Skip to content

Commit

Permalink
introduce placeholderText() function to define the text for image pla…
Browse files Browse the repository at this point in the history
…ceholders

ko.bindingHandlers.wysiwygSrc.placeholderText(width, height) can be overridden and may be called with only one dimension when the placeholder is relative to a space that will resize instead of cropping the image.

Also, this "text" is passed as a parameter to the backend call generating the placeholder, so that the backend can write it on the image.
  • Loading branch information
bago committed Nov 4, 2022
1 parent d5bb72f commit d7aeec5
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 4 deletions.
4 changes: 2 additions & 2 deletions src/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@ var applyBindingOptions = function(options, ko) {
}
};

ko.bindingHandlers.wysiwygSrc.placeholderUrl = function(width, height, text) {
ko.bindingHandlers.wysiwygSrc.placeholderUrl = function(width, height, text, method) {
var imgProcessorBackend = options.imgProcessorBackend ? options.imgProcessorBackend : './upload';
return _appendUrlParameters(imgProcessorBackend, { method: 'placeholder', params: width + "," + height });
return _appendUrlParameters(imgProcessorBackend, { method: method ? method : 'placeholder', params: width + "," + height, text: text });
};

// pushes custom tinymce configurations from options to the binding
Expand Down
5 changes: 4 additions & 1 deletion src/js/bindings/wysiwygs.js
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,9 @@ ko.bindingHandlers.wysiwygSrc = {
// http://placehold.it/200x150.png/cccccc/333333&text=placehold.it#sthash.nA3r26vR.dpuf
// placeholdersrc = "'http://placehold.it/'+"+width+"+'x'+"+height+"+'.png/cccccc/333333&text='+"+size;
},
placeholderText: function(w, h) {
return w && h ? w+'x'+h : w ? 'w'+w : 'h'+h;
},
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
if (ko.bindingHandlers['wysiwygSrc'].preload) $(element).data('preloadimg', new Image());
},
Expand Down Expand Up @@ -167,7 +170,7 @@ ko.bindingHandlers.wysiwygSrc = {
var src = null;
var w = ko.utils.unwrapObservable(placeholderValue.width);
var h = ko.utils.unwrapObservable(placeholderValue.height);
var text = w && h ? w+'x'+h : w ? 'w'+w : 'h'+h;
var text = ko.bindingHandlers.wysiwygSrc.placeholderText(width, height);
var isPlaceholder = false;
if ((srcValue === false) || (srcValue === null) || (srcValue === undefined) || (srcValue === '')) {
if (typeof placeholderValue == 'object' && placeholderValue !== null) src = ko.bindingHandlers.wysiwygSrc.placeholderUrl(w, h, text);
Expand Down
2 changes: 1 addition & 1 deletion src/tmpl/img-wysiwyg.tmpl.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
class="img-wysiwyg selectable-img"><tr><td class="uploadzone">
<div class="mo-imgselectionhelper"></div>
<div class="mo-uploadzone"></div>
<div class="img-size" data-bind="text: _width && _height ? ko.utils.unwrapObservable(_width)+'x'+ko.utils.unwrapObservable(_height) : _width ? 'w'+ko.utils.unwrapObservable(_width) : 'h'+ko.utils.unwrapObservable(_height)">size</div>
<div class="img-size" data-bind="text: ko.bindingHandlers.wysiwygSrc.placeholderText(ko.utils.unwrapObservable(_width), ko.utils.unwrapObservable(_height))">size</div>
<div class="midtools" data-bind="tooltips: {}">
<!-- ko if: _src() != '' -->
<div title="Remove image" class="tool delete" data-bind="attr: { title: $root.t('Remove image') }, click: _src.bind(_src, ''), clickBubble: false"><i class="fa fa-fw fa-trash-o"></i></div>
Expand Down

0 comments on commit d7aeec5

Please sign in to comment.