From 3fc4f669e6e502507fa6234dddb4545d87a0a989 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 8 Jul 2016 21:35:45 +0200 Subject: [PATCH] Update text component --- src/canvas/view/CanvasView.js | 30 ++++++---- src/commands/view/ResizeComponent.js | 60 ------------------- src/dom_components/view/ComponentTextView.js | 46 +++++++------- src/editor/view/EditorView.js | 6 +- src/rich_text_editor/main.js | 36 +++++++---- .../view/CommandButtonsView.js | 22 ++++--- styles/css/main.css | 10 ++-- styles/scss/main.scss | 10 ++-- 8 files changed, 90 insertions(+), 130 deletions(-) delete mode 100644 src/commands/view/ResizeComponent.js diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index e176c851d..63a71b4b5 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -7,20 +7,10 @@ function(Backbone, FrameView) { initialize: function(o) { this.config = o.config || {}; + this.em = this.config.em || {}; this.ppfx = this.config.pStylePrefix || ''; this.className = this.config.stylePrefix + 'canvas'; this.frame = new FrameView({ model: this.model.get('frame')}); - this.toolsEl = $('
', { id: this.ppfx + 'tools' }).get(0); - this.hlEl = $('
', { class: this.ppfx + 'highlighter' }).get(0); - this.badgeEl = $('
', {class: this.ppfx + 'badge'}).get(0); - this.placerEl = $('
', {class: this.ppfx + 'placeholder'}).get(0); - this.placerIntEl = $('
', {class: this.ppfx + 'placeholder-int'}).get(0); - this.ghostEl = $('
', {class: this.ppfx + 'ghost'}).get(0); - this.placerEl.appendChild(this.placerIntEl); - this.toolsEl.appendChild(this.hlEl); - this.toolsEl.appendChild(this.badgeEl); - this.toolsEl.appendChild(this.placerEl); - this.toolsEl.appendChild(this.ghostEl); }, /** @@ -42,6 +32,7 @@ function(Backbone, FrameView) { '.' + this.ppfx + 'plh-image{background:#f5f5f5; border:none; height:50px; width:50px; display:block; outline:3px solid #ffca6f; cursor:pointer}'; if(protCss) body.append(''); + this.config.em.trigger('loaded'); } }, @@ -55,8 +46,23 @@ function(Backbone, FrameView) { var frame = this.frame; frame.el.onload = this.renderBody.bind(this); } - + this.toolsEl = $('
', { id: this.ppfx + 'tools' }).get(0); + this.hlEl = $('
', { class: this.ppfx + 'highlighter' }).get(0); + this.badgeEl = $('
', {class: this.ppfx + 'badge'}).get(0); + this.placerEl = $('
', {class: this.ppfx + 'placeholder'}).get(0); + this.placerIntEl = $('
', {class: this.ppfx + 'placeholder-int'}).get(0); + this.ghostEl = $('
', {class: this.ppfx + 'ghost'}).get(0); + this.placerEl.appendChild(this.placerIntEl); + this.toolsEl.appendChild(this.hlEl); + this.toolsEl.appendChild(this.badgeEl); + this.toolsEl.appendChild(this.placerEl); + this.toolsEl.appendChild(this.ghostEl); this.$el.append(this.toolsEl); + var rte = this.em.get('RichTextEditor'); + + if(rte) + this.toolsEl.appendChild(rte.render()); + this.$el.attr({class: this.className, id: this.config.canvasId}); return this; }, diff --git a/src/commands/view/ResizeComponent.js b/src/commands/view/ResizeComponent.js deleted file mode 100644 index 8ec9fb2b1..000000000 --- a/src/commands/view/ResizeComponent.js +++ /dev/null @@ -1,60 +0,0 @@ -define(['backbone', 'jqueryUi', './MoveComponent'], - function(Backbone, jqueryUi, MoveComponent) { - /** - * @class ResizeComponent - * @private - * */ - return _.extend({}, MoveComponent,{ - - enable: function(){ - var $this = this; - this.startSelectComponent(); - this.$el.find('*').resizable({ - containment: 'parent', - start: function(event,ui){ - ui.element[0].style.height = ui.element.height()+'px'; - ui.element.css({'min-height':'', 'min-width':'' }); - }, - stop: function(event,ui){ - ui.element.css('overflow','auto'); - $this.updateModel(ui); - } - }); - }, - - - /** - * Update model of resized element - * @param object Component model - * */ - updateModel: function(el){ - var um = 'px', - model = el.element.data("model"), - style = _.clone(model.get('style')); - delete style['min-height']; - delete style['min-width']; - style.height = el.size.height + um; - style.width = el.size.width + um; - style.overflow = 'auto'; - model.set('style', style); - }, - - /** - * Run method - * */ - run: function(){ - this.enable(); - this.active = true; - }, - - /** - * Stop method - * */ - stop: function(){ - this.stopSelectComponent(); - this.$el.find('.ui-resizable').resizable("destroy"); - this.$el.unbind();//removes all attached events - this.active = false; - } - }); - }); \ No newline at end of file diff --git a/src/dom_components/view/ComponentTextView.js b/src/dom_components/view/ComponentTextView.js index 787984f52..2e52342dc 100644 --- a/src/dom_components/view/ComponentTextView.js +++ b/src/dom_components/view/ComponentTextView.js @@ -10,27 +10,20 @@ define(['backbone', './ComponentView'], initialize: function(o){ ComponentView.prototype.initialize.apply(this, arguments); _.bindAll(this,'disableEditing'); - this.listenTo( this.model, 'focus', this.enableEditing); - if(this.config.rte){ - this.rte = this.config.rte; - } + this.listenTo(this.model, 'focus', this.enableEditing); + this.rte = this.config.rte || ''; }, /** * Enable this component to be editable, * load also the mini toolbar for quick editing - * @param Event + * @param {Event} e * @private * */ enableEditing: function(e){ - if(this.rte){ - var $e = this.config.em.get('$editor'); - if(!this.$wrapper && $e.length) - this.$wrapper = $e.find('#'+this.config.wrapperId); - this.rte.bind(this, this.$wrapper); - } - $(document).on('mousedown', this.disableEditing); //Close edit mode - this.$el.on('mousedown', this.disablePropagation); //Avoid closing edit mode on component click + if(this.rte) + this.rte.bind(this); + this.toggleEvents(1); }, /** @@ -42,13 +35,13 @@ define(['backbone', './ComponentView'], if(this.rte){ this.rte.unbind(this); } - $(document).off('mousedown', this.disableEditing); - this.$el.off('mousedown',this.disablePropagation); + this.toggleEvents(); this.updateContents(); }, - /** Isolate disable propagation method - * @param Event + /** + * Isolate disable propagation method + * @param {Event} * @private * */ disablePropagation: function(e){ @@ -57,18 +50,29 @@ define(['backbone', './ComponentView'], /** * Update contents of the element - * - * @return void * @private **/ updateContents : function(){ - this.model.set('content', this.$el.html()); + this.model.set('content', this.el.innerHTML); + }, + + /** + * Enable/Disable events + * @param {Boolean} enable + */ + toggleEvents: function(enable) { + var method = enable ? 'on' : 'off'; + // The ownerDocument is from the frame + var elDocs = [this.el.ownerDocument, document]; + $(elDocs)[method]('mousedown', this.disableEditing); + // Avoid closing edit mode on component click + this.$el[method]('mousedown', this.disablePropagation); }, render: function() { this.updateAttributes(); this.updateClasses(); - this.$el.html(this.model.get('content')); + this.el.innerHTML = this.model.get('content'); return this; }, }); diff --git a/src/editor/view/EditorView.js b/src/editor/view/EditorView.js index 8f1f5f169..feda86bd8 100644 --- a/src/editor/view/EditorView.js +++ b/src/editor/view/EditorView.js @@ -7,6 +7,9 @@ function(Backbone){ this.cv = this.model.get('Canvas'); this.pn = this.model.get('Panels'); this.className = this.model.config.stylePrefix + 'editor'; + this.model.on('loaded', function(){ + this.pn.active(); + }); }, render: function(){ @@ -34,9 +37,6 @@ function(Backbone){ this.$el.attr('class', this.className); - if(this.pn) - this.pn.active(); - return this; } }); diff --git a/src/rich_text_editor/main.js b/src/rich_text_editor/main.js index 691d6b527..ea469bcc1 100644 --- a/src/rich_text_editor/main.js +++ b/src/rich_text_editor/main.js @@ -25,26 +25,38 @@ define(function(require) { config : c, }; - this.toolbar = new CommandButtonsView(obj); - this.$toolbar = this.toolbar.render().$el; + this.toolbar = new CommandButtonsView(obj); + this.$toolbar = this.toolbar.render().$el; } RichTextEditor.prototype = { + /** + * Render toolbar + * @return {HTMLElement} + */ + render: function(){ + return this.toolbar.render().el; + }, + + /** + * Return toolbar element + * @return {HTMLElement} + */ + getToolbarEl: function() { + return this.$toolbar; + }, + /** * Bind rich text editor to element - * @param {Object} view - * @param {Object} container - * + * @param {View} view * */ - bind : function(view, container){ - if(!this.$contaniner){ - this.$container = container; - this.$toolbar.appendTo(this.$container); - } + bind: function(view){ view.$el.wysiwyg({hotKeys: {}}).focus(); + this.updatePosition(view.$el); this.bindToolbar(view).show(); + //Avoid closing edit mode clicking on toolbar this.$toolbar.on('mousedown', this.disableProp); }, @@ -54,7 +66,7 @@ define(function(require) { * @param {Object} view * * */ - unbind : function(view){ + unbind: function(view){ view.$el.wysiwyg('destroy'); this.hide(); this.$toolbar.off('mousedown', this.disableProp); @@ -66,7 +78,7 @@ define(function(require) { * * @return this * */ - bindToolbar : function(view){ + bindToolbar: function(view){ var id = this.tlbPfx + view.model.cid, dId = this.tlbPfx + 'inited'; if(!view.$el.data(dId)){ diff --git a/src/rich_text_editor/view/CommandButtonsView.js b/src/rich_text_editor/view/CommandButtonsView.js index 924da73b3..b48cb5eb7 100644 --- a/src/rich_text_editor/view/CommandButtonsView.js +++ b/src/rich_text_editor/view/CommandButtonsView.js @@ -1,37 +1,35 @@ -define(['backbone','./CommandButtonView'], +define(['backbone','./CommandButtonView'], function (Backbone, CommandButtonView) { - /** + /** * @class CommandButtonsView * */ return Backbone.View.extend({ - - className: 'no-dots', - + attributes : { 'data-role' : 'editor-toolbar', }, - + initialize: function(o){ this.config = o.config || {}; this.id = this.config.stylePrefix + this.config.toolbarId; this.$el.data('helper',1); }, - - /** + + /** * Update RTE target pointer * @param {String} target - * + * * @return this * */ updateTarget: function(target){ - this.$el.attr('data-target',target); + this.$el.attr('data-target', target); return this; }, - + render: function() { var fragment = document.createDocumentFragment(); this.$el.empty(); - + this.collection.each(function(item){ var view = new CommandButtonView({ model : item, diff --git a/styles/css/main.css b/styles/css/main.css index 4540b3774..02ea78d6c 100644 --- a/styles/css/main.css +++ b/styles/css/main.css @@ -2902,7 +2902,7 @@ ol.example li.placeholder:before { font-weight: lighter; text-align: left; position: relative; - background-color: rgba(0, 0, 0, 0.3); } + background-color: rgba(0, 0, 0, 0.2); } .wte-nv-navigator .wte-nv-item.wte-nv-hide { opacity: 0.55; filter: alpha(opacity=55); } @@ -3127,7 +3127,7 @@ ol.example li.placeholder:before { padding: 5px; display: block; } .wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-radio:checked + label, .wte-clm-tags .wte-sm-field.wte-sm-list .wte-sm-radio:checked + label, .wte-sm-sector .wte-sm-list.wte-clm-field .wte-sm-radio:checked + label, .wte-clm-tags .wte-sm-list.wte-clm-field .wte-sm-radio:checked + label { - background-color: #5b5b5b; + background-color: rgba(255, 255, 255, 0.2); /*5b5b5b*/ } .wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-icon, .wte-clm-tags .wte-sm-field.wte-sm-list .wte-sm-icon, .wte-sm-sector .wte-sm-list.wte-clm-field .wte-sm-icon, .wte-clm-tags .wte-sm-list.wte-clm-field .wte-sm-icon { background-repeat: no-repeat; @@ -3315,11 +3315,11 @@ ol.example li.placeholder:before { display: inline-block; vertical-align: top; } .wte-clm-tags #wte-clm-add-tag { - background-color: #535353; + background-color: rgba(255, 255, 255, 0.2); border-radius: 2px; padding: 5px 6px; - box-shadow: 1px 1px 0 #6d6d6d inset; - border: 1px solid #323232; + box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset; + border: 1px solid rgba(0, 0, 0, 0.15); cursor: pointer; } .wte-clm-tags #wte-clm-new { color: #eee; diff --git a/styles/scss/main.scss b/styles/scss/main.scss index 8e464918b..e04bd13f5 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -410,7 +410,7 @@ $leftWidth: 16.5%; font-weight: lighter; text-align: left; position: relative; - background-color: rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, 0.2); } .#{$nv-prefix}item.#{$nv-prefix}hide { @include opacity(0.55); @@ -637,7 +637,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/ input{ display:none; } label{ cursor:pointer; padding: 5px; display:block;} .#{$sm-prefix}radio:checked + label{ - background-color: lighten($mainDkColor, 13%);/*5b5b5b*/ + background-color: rgba(255, 255, 255, 0.2);/*5b5b5b*/ } .#{$sm-prefix}icon{ background-repeat: no-repeat; @@ -876,11 +876,11 @@ $paddElClm: 5px 6px; } ##{$clm-prefix}add-tag{ - background-color: $addBtnBg; + background-color: rgba(255, 255, 255, 0.2); border-radius: 2px; padding: $paddElClm; - box-shadow: 1px 1px 0 lighten($addBtnBg, 10%) inset; - border: 1px solid darken($addBtnBg, 13%); + box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset; + border: 1px solid rgba(0, 0, 0, 0.15); cursor: pointer; }