From 334725594a4d2068e6e24cbc680091b643df6db7 Mon Sep 17 00:00:00 2001 From: Sam Georges Date: Sat, 20 Sep 2014 16:47:52 +1000 Subject: [PATCH] Add image toolbar button --- modules/backend/formwidgets/RichEditor.php | 1 + .../richeditor/assets/js/plugin.image.js | 185 ++++++++++++++++++ .../richeditor/assets/js/richeditor.js | 2 +- 3 files changed, 187 insertions(+), 1 deletion(-) create mode 100644 modules/backend/formwidgets/richeditor/assets/js/plugin.image.js diff --git a/modules/backend/formwidgets/RichEditor.php b/modules/backend/formwidgets/RichEditor.php index e8fd3523a..4167a0432 100644 --- a/modules/backend/formwidgets/RichEditor.php +++ b/modules/backend/formwidgets/RichEditor.php @@ -54,6 +54,7 @@ class RichEditor extends FormWidgetBase $this->addJs('js/plugin.figure.js', 'core'); $this->addJs('js/plugin.quote.js', 'core'); $this->addJs('js/plugin.table.js', 'core'); + $this->addJs('js/plugin.image.js', 'core'); $this->addJs('vendor/redactor/redactor.js', 'core'); $this->addCss('css/richeditor.css', 'core'); diff --git a/modules/backend/formwidgets/richeditor/assets/js/plugin.image.js b/modules/backend/formwidgets/richeditor/assets/js/plugin.image.js new file mode 100644 index 000000000..8667949fb --- /dev/null +++ b/modules/backend/formwidgets/richeditor/assets/js/plugin.image.js @@ -0,0 +1,185 @@ +(function ($) { + 'use strict'; + + window.RedactorPlugins = window.RedactorPlugins || {} + + var Image = function (redactor) { + this.redactor = redactor + this.init() + } + + Image.prototype = { + control: { + left : { classSuffix: 'arrow-left' }, + right : { classSuffix: 'arrow-right' }, + small : { classSuffix: 'small', text: 'S' }, + medium : { classSuffix: 'medium', text: 'M' }, + resize_full : { classSuffix: 'resize-full' }, + resize_small: { classSuffix: 'resize-small' } + }, + + controlGroup: ['left', 'up', 'down', 'right', '|', 'small', 'medium', 'resize_full', 'resize_small', 'remove'], + + init: function () { + this.redactor.$editor.on('focus', $.proxy(this.addCaptions, this)) + this.addCaptions() + }, + + addCaptions: function () { + /* + * Find images without captions, adds an empty caption + */ + this.redactor.$editor.find('figure[data-type=image]:not(:has(figcaption))').each(function () { + $(this).append('
') + }) + }, + + onShow: function ($figure, $toolbar) { + + $toolbar.children().removeClass('on') + + if ($figure.hasClass('oc-figure-small')) { + $toolbar.find('.oc-figure-controls-small').show().addClass('on') + $toolbar.find('.oc-figure-controls-medium').show() + $toolbar.find('.oc-figure-controls-resize-full').show() + $toolbar.find('.oc-figure-controls-resize-small').hide() + } + + else if ($figure.hasClass('oc-figure-medium')) { + $toolbar.find('.oc-figure-controls-small').show() + $toolbar.find('.oc-figure-controls-medium').show().addClass('on') + $toolbar.find('.oc-figure-controls-resize-full').show() + $toolbar.find('.oc-figure-controls-resize-small').hide() + } + + else { + $toolbar.find('.oc-figure-controls-small').hide() + $toolbar.find('.oc-figure-controls-medium').hide() + $toolbar.find('.oc-figure-controls-large').hide() + $toolbar.find('.oc-figure-controls-resize-full').hide() + $toolbar.find('.oc-figure-controls-resize-small').show() + } + + if ($figure.hasClass('oc-figure-right')) { + $toolbar.find('.oc-figure-controls-arrow-right').addClass('on') + } + + if ($figure.hasClass('oc-figure-left')) { + $toolbar.find('.oc-figure-controls-arrow-left').addClass('on') + } + + }, + + command: function (command, $figure) { + + var classString = function (suffixArray, separator, prefix, dot) { + var baseClass = (dot ? '.' : '') + 'oc-figure-' + (prefix || '') + return baseClass + suffixArray.join((separator || ' ') + baseClass) + } + + var changeSuffix = function (removeArray, addArray) { + $figure.removeClass(classString(removeArray)).addClass(classString(addArray)) + $.each(addArray, function (index, command) { + $figure.trigger('imageCommand', command) + }) + } + + switch (command) { + case 'left': + case 'right': + changeSuffix(['left', 'right'], [command]) + if (!$figure.hasClass('oc-figure-medium') && !$figure.hasClass('oc-figure-small')) { + $figure.addClass('oc-figure-medium') + $figure.trigger('medium') + } + break + + case 'small': + case 'medium': + changeSuffix(['small', 'medium', 'large'], [command]) + if (!$figure.hasClass('oc-figure-left') && !$figure.hasClass('oc-figure-right')) { + $figure.addClass('oc-figure-left') + $figure.trigger('left') + } + break + + case 'resize_full': + changeSuffix(['small', 'medium', 'left', 'right'], ['large']) + break + + case 'resize_small': + changeSuffix(['small', 'large', 'right'], ['medium', 'left']) + break + } + } + } + + window.RedactorPlugins.image = { + init: function () { + this.image = new Image(this) + + // This is a work in progress + this.buttonAddBefore('video', 'image', 'Image', $.proxy(function () { + + /* + * Maintain undo history + */ + this.bufferSet() + + /* + * Remember the cursor pos + */ + var cursor = this.getBlock() || this.getCurrent() + + /* + * Display the image upload modal + */ + + /* + * Add button + */ + var url = 'http://placehold.it/100x100' + + var data = '
' + + this.selectionRestore() + + if (cursor) { + $(cursor).after(data) + } + else { + this.insertHtmlAdvanced(data, false); + } + + this.selectionRestore() + this.sync() + + }, this)) + + /* + * Detect resize command, update the image src + */ + this.$editor.on('imageCommand', 'figure', function (event, command) { + var size = null + + if (command == 'small') + size = 300 + else if (command == 'medium') + size = 600 + else if (command == 'large') + size = 900 + else + return + + // @todo + var newUrl, $img = $(this).find('img') + $img.attr('src', newUrl) + }) + + this.buttonGet('image') + .addClass('redactor_btn_image') + .removeClass('redactor-btn-image') + } + } + +}(jQuery)); \ No newline at end of file diff --git a/modules/backend/formwidgets/richeditor/assets/js/richeditor.js b/modules/backend/formwidgets/richeditor/assets/js/richeditor.js index d09c695ad..de5aebe3b 100644 --- a/modules/backend/formwidgets/richeditor/assets/js/richeditor.js +++ b/modules/backend/formwidgets/richeditor/assets/js/richeditor.js @@ -72,7 +72,7 @@ redactorOptions.fullpage = true } - redactorOptions.plugins = ['cleanup', 'fullscreen', 'figure', 'quote', 'table'] + redactorOptions.plugins = ['cleanup', 'fullscreen', 'figure', 'image', 'quote', 'table'] redactorOptions.buttons = ['formatting', 'bold', 'italic', 'unorderedlist', 'orderedlist', 'link', 'horizontalrule', 'html'], this.$textarea.redactor(redactorOptions)