From 3470d7cfea0f92723fbef4bead763ede9ebd0573 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F?= Date: Thu, 12 Nov 2015 16:12:53 +0100 Subject: [PATCH 1/9] Add crop(per) support --- src/tapatar.js | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/src/tapatar.js b/src/tapatar.js index 0b0def8..ea28d1b 100644 --- a/src/tapatar.js +++ b/src/tapatar.js @@ -17,8 +17,14 @@ templates: { widget: '
pick
', overlay: '', - picker: '
', + picker: '
', source: '
' + }, + cropper: { + enabled: false, + options: { + // https://github.com/fengyuanchen/cropper + } } }; @@ -82,6 +88,7 @@ pickSource: function(source) { this.selectedSource = source.id; this._setPickedImage(source); + if (this.options.cropper.enabled) this._addCropper(source); }, imageDataSet: function(source, pick) { this._updateSourceUi(source); @@ -118,7 +125,7 @@ }, _setPickedImage: function(source) { if (!source.image_data) return; - this.$containerEl.find('.tptr-image-holder .tptr-big-image').css('background-image', 'url(' + source.image_data + ')'); + this.$containerEl.find('.tptr-big-image').attr('src', source.image_data); }, _popPicker: function() { var sources = ''; @@ -127,7 +134,7 @@ var imageData = (this.selectedSource) ? this.sources[this.selectedSource].image_data : this._getImageFromPathOrFunction(this.options.default_image, this.options); - $picker.find('.tptr-big-image').css('background-image', 'url(' + imageData + ')'); + $picker.find('.tptr-big-image').attr('src', imageData); // Sort sources and append var $sourcesHolder = $picker.find('.tptr-sources'); @@ -180,6 +187,17 @@ return $el; }, + _addCropper: function(source) { + var $img = this.$containerEl.find('.tptr-big-image'); + $img + .cropper(this.options.cropper.options) + .on('crop.cropper', this._cropEvent.bind(this, source, $img)); + }, + _cropEvent: function(source, $img) { + source.image_data = $img.cropper('getCroppedCanvas').toDataURL(); + this._setPickedImage(source); + this._setPreviewImage(source); + }, _getSourceEl: function (source) { return this.$containerEl.find('[data-source-id=' + source.id +']'); }, From 0affedc8b7bed932a1d487bf951b69478dbf7d55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F?= Date: Thu, 12 Nov 2015 16:13:20 +0100 Subject: [PATCH 2/9] Add crop(per) support plus it changes the preview --- src/tapatar.less | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/tapatar.less b/src/tapatar.less index a6d9379..1a831a7 100644 --- a/src/tapatar.less +++ b/src/tapatar.less @@ -62,6 +62,9 @@ .tptr-box-part { padding: @box-padding; box-sizing: border-box; + .tptr-flex(); + align-items: center; + justify-content: center; } .tptr-overlay { @@ -129,11 +132,8 @@ } .tptr-big-image { - width: 100%; - height: 0; - padding-top: 100%; - background-size: cover; display: block; + margin: auto; } } @@ -208,8 +208,10 @@ width: @source-height; height: 0; padding-top: 100%; - background-size: cover; + background-size: contain; display: block; + background-repeat: no-repeat; + background-position: 50%; } } } From ff057132c795b7965577e0ba728d469159f47055 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F?= Date: Thu, 12 Nov 2015 16:19:34 +0100 Subject: [PATCH 3/9] Set image_data correctly --- src/tapatar.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/tapatar.js b/src/tapatar.js index ea28d1b..5567410 100644 --- a/src/tapatar.js +++ b/src/tapatar.js @@ -194,9 +194,8 @@ .on('crop.cropper', this._cropEvent.bind(this, source, $img)); }, _cropEvent: function(source, $img) { - source.image_data = $img.cropper('getCroppedCanvas').toDataURL(); + source.setImageData($img.cropper('getCroppedCanvas').toDataURL()); this._setPickedImage(source); - this._setPreviewImage(source); }, _getSourceEl: function (source) { return this.$containerEl.find('[data-source-id=' + source.id +']'); From 38f65fa0080b64106fd05f81affe6002d5c8583f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F?= Date: Thu, 12 Nov 2015 16:23:08 +0100 Subject: [PATCH 4/9] Also change widget thumbnail --- src/tapatar.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/tapatar.less b/src/tapatar.less index 1a831a7..f2a82ec 100644 --- a/src/tapatar.less +++ b/src/tapatar.less @@ -25,7 +25,9 @@ border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px; - background-size: cover; + background-size: contain; + background-repeat: no-repeat; + background-position: 50%; display: block; overflow: hidden; position: relative; @@ -209,7 +211,6 @@ height: 0; padding-top: 100%; background-size: contain; - display: block; background-repeat: no-repeat; background-position: 50%; } From 80e180b3fb5d10429c70757ac38fc5fbbfb7aa6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F?= Date: Thu, 12 Nov 2015 17:35:15 +0100 Subject: [PATCH 5/9] Add flex alignments as mixin --- src/tapatar.less | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/tapatar.less b/src/tapatar.less index f2a82ec..f6d1659 100644 --- a/src/tapatar.less +++ b/src/tapatar.less @@ -18,6 +18,16 @@ display: flex; } +.tptr-flex-center() { + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + .tptr-widget { font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; height: 70px; @@ -65,12 +75,12 @@ padding: @box-padding; box-sizing: border-box; .tptr-flex(); - align-items: center; - justify-content: center; + .tptr-flex-center(); } .tptr-overlay { .tptr-flex(); + .tptr-flex-center(); position: fixed; top: 0; left: 0; @@ -79,14 +89,6 @@ background-color: @tptr-color-overlay; z-index: 101; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - .tptr-picker { .tptr-flex(); position: relative; From d0d542b5e108abe2742a3e37099a62356ea3a2a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F=20=28kurtextrem=29?= Date: Fri, 20 Nov 2015 16:42:17 +0100 Subject: [PATCH 6/9] Fixes weird save button look --- src/tapatar.js | 15 ++++++--------- src/tapatar.less | 4 +--- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/tapatar.js b/src/tapatar.js index 5567410..8a98278 100644 --- a/src/tapatar.js +++ b/src/tapatar.js @@ -60,7 +60,7 @@ this.$tptrEl = $(this.element).parent(); var $innerEl = $('
'); this.$tptrEl.append('
'); - var $innerEl = this.$tptrEl.find('.tptr-inner'); + $innerEl = this.$tptrEl.find('.tptr-inner'); var self = this; @@ -128,8 +128,6 @@ this.$containerEl.find('.tptr-big-image').attr('src', source.image_data); }, _popPicker: function() { - var sources = ''; - var $picker = $(this.options.templates.picker); var imageData = (this.selectedSource) ? this.sources[this.selectedSource].image_data @@ -147,18 +145,16 @@ sorted.reverse(); for (var i = sorted.length - 1; i >= 0; i--) { - var source = this.sources[sorted[i][0]]; + source = this.sources[sorted[i][0]]; if (source && this.options.sources[source.id].enabled) { $sourcesHolder.append($(this._buildSource(source))); } - }; + } var $overlay = $(this.options.templates.overlay); $overlay.find('.tptr-overlay').html($picker); $('body').append($overlay); - var self = this; - this.pickerActive = true; $overlay.fadeIn(); this.$containerEl = $overlay; @@ -190,6 +186,7 @@ _addCropper: function(source) { var $img = this.$containerEl.find('.tptr-big-image'); $img + .cropper('destroy') .cropper(this.options.cropper.options) .on('crop.cropper', this._cropEvent.bind(this, source, $img)); }, @@ -203,7 +200,7 @@ _updateAllSourcesUi: function() { for (var source in this.sources) { this._updateSourceUi(this.sources[source]) - }; + } }, _updateSourceUi: function(source) { if (!this.pickerActive) return; @@ -236,7 +233,7 @@ } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { // Call a public plugin method (not starting with an underscore) for each // selected element. - if (Array.prototype.slice.call(args, 1).length == 0 && $.inArray(options, $.fn[pluginName].getters) != -1) { + if (Array.prototype.slice.call(args, 1).length === 0 && $.inArray(options, $.fn[pluginName].getters) != -1) { // If the user does not pass any arguments and the method allows to // work as a getter then break the chainability so we can return a value // instead the element reference. diff --git a/src/tapatar.less b/src/tapatar.less index f6d1659..af32c18 100644 --- a/src/tapatar.less +++ b/src/tapatar.less @@ -74,8 +74,6 @@ .tptr-box-part { padding: @box-padding; box-sizing: border-box; - .tptr-flex(); - .tptr-flex-center(); } .tptr-overlay { @@ -168,7 +166,7 @@ margin-bottom: @source-padding; .clearfix(); - .tptr-source-part, { + .tptr-source-part { float: left; background-color: @tptr-color-gray-accent; height: @source-height; From fec2c294fc11a13b67678e1f54562a0335fd246f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F=20=28kurtextrem=29?= Date: Sat, 28 Nov 2015 10:47:36 +0100 Subject: [PATCH 7/9] Fix default avatar + cropper canvas --- src/tapatar.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/tapatar.less b/src/tapatar.less index af32c18..4635973 100644 --- a/src/tapatar.less +++ b/src/tapatar.less @@ -136,6 +136,7 @@ .tptr-big-image { display: block; margin: auto; + width: 100%; } } From 0180a69516700c86d7b7cf735849f03df30b5df7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F=20=28kurtextrem=29?= Date: Sat, 28 Nov 2015 10:48:00 +0100 Subject: [PATCH 8/9] Restore original avatar after saving/reopening --- src/tapatar.js | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/tapatar.js b/src/tapatar.js index 8a98278..09054a2 100644 --- a/src/tapatar.js +++ b/src/tapatar.js @@ -23,6 +23,7 @@ cropper: { enabled: false, options: { + autoCropArea: 1.0 // https://github.com/fengyuanchen/cropper } } @@ -129,10 +130,6 @@ }, _popPicker: function() { var $picker = $(this.options.templates.picker); - var imageData = (this.selectedSource) - ? this.sources[this.selectedSource].image_data - : this._getImageFromPathOrFunction(this.options.default_image, this.options); - $picker.find('.tptr-big-image').attr('src', imageData); // Sort sources and append var $sourcesHolder = $picker.find('.tptr-sources'); @@ -158,6 +155,22 @@ this.pickerActive = true; $overlay.fadeIn(); this.$containerEl = $overlay; + + if (this.selectedSource) { // recover chosen image + var $widget = this.$tptrEl.find('.tptr-widget'), + data = $widget.data('original'), + cropData = $widget.data('crop-data'); + + if (data) + this.sources[this.selectedSource].image_data = data; + if (cropData) + this.options.cropper.options.data = cropData; + + this.pickSource(this.sources[this.selectedSource]); + } else { // or use default + $picker.find('.tptr-big-image').attr('src', this._getImageFromPathOrFunction(this.options.default_image, this.options)); + } + this._updateAllSourcesUi(); }, _closePicker: function() { @@ -185,12 +198,15 @@ }, _addCropper: function(source) { var $img = this.$containerEl.find('.tptr-big-image'); + this.$tptrEl.find('.tptr-widget').data('original', $img.prop('src')); + $img .cropper('destroy') .cropper(this.options.cropper.options) .on('crop.cropper', this._cropEvent.bind(this, source, $img)); }, _cropEvent: function(source, $img) { + this.$tptrEl.find('.tptr-widget').data('crop-data', $img.cropper('getData')); source.setImageData($img.cropper('getCroppedCanvas').toDataURL()); this._setPickedImage(source); }, From f63ef909570f1ff0341f60469357df785aebe882 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20Gro=C3=9F?= Date: Wed, 6 May 2020 17:02:42 +0200 Subject: [PATCH 9/9] Update tapatar.js --- src/tapatar.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/tapatar.js b/src/tapatar.js index 09054a2..8c9b63b 100644 --- a/src/tapatar.js +++ b/src/tapatar.js @@ -107,7 +107,8 @@ // Register click handler for the save button $(document).on('click', '.tptr-save', function() { - self._save(); + self. + (); }); // Register click handler for the save button @@ -229,6 +230,8 @@ this._getSourceEl(source).find('.tptr-source-image-preview').html($('
').css('background-image', 'url(' + source.image_data + ')')); }, _save: function() { + if (!this.sources[this.selectedSource]) return; + var imgData = this.sources[this.selectedSource].image_data; $(this.element).val(imgData); this.$tptrEl.find('.tptr-widget').css('background-image', 'url(' + imgData + ')');