Skip to content

Add crop(per) support #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kurtextrem wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Add crop(per) support #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3470d7c
Add crop(per) support
kurtextrem Nov 12, 2015
0affedc
Add crop(per) support
kurtextrem Nov 12, 2015
ff05713
Set image_data correctly
kurtextrem Nov 12, 2015
38f65fa
Also change widget thumbnail
kurtextrem Nov 12, 2015
80e180b
Add flex alignments as mixin
kurtextrem Nov 12, 2015
d0d542b
Fixes weird save button look
kurtextrem Nov 20, 2015
4a3845d
Merge remote-tracking branch 'refs/remotes/Tapfiliate/master'
kurtextrem Nov 28, 2015
fec2c29
Fix default avatar + cropper canvas
kurtextrem Nov 28, 2015
0180a69
Restore original avatar after saving/reopening
kurtextrem Nov 28, 2015
f63ef90
Update tapatar.js
kurtextrem May 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 49 additions & 16 deletions src/tapatar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,15 @@
templates: {
widget: '<div class="tptr-widget"><span class="tptr-widget-pick">pick</span></div>',
overlay: '<div class="tptr-container" style="display: none"><div class="tptr-overlay"></div></div>',
picker: '<div class="tptr-picker"><div class="tptr-close"></div><div class="tptr-image-holder tptr-box-part"><div class="tptr-big-image"> </div></div><div class="tptr-sources-holder tptr-box-part"><div class="tptr-sources"></div><button class="tptr-save">Save</button></div></div>',
picker: '<div class="tptr-picker"><div class="tptr-close"></div><div class="tptr-image-holder tptr-box-part"><img class="tptr-big-image"></div><div class="tptr-sources-holder tptr-box-part"><div class="tptr-sources"></div><button class="tptr-save">Save</button></div></div>',
source: '<div class="tptr-source"><div class="tptr-source-part tptr-source-icon"><img /></div><div class="tptr-source-part tptr-source-content"></div><div class="tptr-source-part tptr-source-image-preview"></div><button class="tptr-source-part tptr-source-pick">Pick</button></div>'
},
cropper: {
enabled: false,
options: {
autoCropArea: 1.0
// https://github.com/fengyuanchen/cropper
}
}
};

Expand Down Expand Up @@ -54,7 +61,7 @@
this.$tptrEl = $(this.element).parent();
var $innerEl = $('<div class="tptr-inner"></div>');
this.$tptrEl.append('<div class="tptr-inner"></div>');
var $innerEl = this.$tptrEl.find('.tptr-inner');
$innerEl = this.$tptrEl.find('.tptr-inner');

var self = this;

Expand Down Expand Up @@ -82,6 +89,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);
Expand All @@ -99,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
Expand All @@ -118,16 +127,10 @@
},
_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 = '';

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').css('background-image', 'url(' + imageData + ')');

// Sort sources and append
var $sourcesHolder = $picker.find('.tptr-sources');
Expand All @@ -140,21 +143,35 @@
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;

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() {
Expand All @@ -180,13 +197,27 @@

return $el;
},
_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);
Copy link
Copy Markdown
Contributor Author

@kurtextrem kurtextrem Nov 13, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in case you wonder why I don't set the 2nd parameter to true (setImageData): It would end in a cropper init loop.
That is why _setPickedImage has to be called separately.

},
_getSourceEl: function (source) {
return this.$containerEl.find('[data-source-id=' + source.id +']');
},
_updateAllSourcesUi: function() {
for (var source in this.sources) {
this._updateSourceUi(this.sources[source])
};
}
},
_updateSourceUi: function(source) {
if (!this.pickerActive) return;
Expand All @@ -199,6 +230,8 @@
this._getSourceEl(source).find('.tptr-source-image-preview').html($('<div></div>').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 + ')');
Expand All @@ -219,7 +252,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.
Expand Down
36 changes: 20 additions & 16 deletions src/tapatar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,26 @@
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;
width: 70px;
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;
Expand Down Expand Up @@ -66,6 +78,7 @@

.tptr-overlay {
.tptr-flex();
.tptr-flex-center();
position: fixed;
top: 0;
left: 0;
Expand All @@ -74,14 +87,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;
Expand Down Expand Up @@ -129,11 +134,9 @@
}

.tptr-big-image {
width: 100%;
height: 0;
padding-top: 100%;
background-size: cover;
display: block;
margin: auto;
width: 100%;
}
}

Expand Down Expand Up @@ -164,7 +167,7 @@
margin-bottom: @source-padding;
.clearfix();

.tptr-source-part, {
.tptr-source-part {
float: left;
background-color: @tptr-color-gray-accent;
height: @source-height;
Expand Down Expand Up @@ -208,8 +211,9 @@
width: @source-height;
height: 0;
padding-top: 100%;
background-size: cover;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-position: 50%;
}
}
}
Expand Down