tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update text component

pull/36/head
Artur Arseniev 10 years ago
parent
952d604a26
commit
3fc4f669e6
8 changed files with 90 additions and 130 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      src/canvas/view/CanvasView.js
  2. 60
      src/commands/view/ResizeComponent.js
  3. 46
      src/dom_components/view/ComponentTextView.js
  4. 6
      src/editor/view/EditorView.js
  5. 36
      src/rich_text_editor/main.js
  6. 22
      src/rich_text_editor/view/CommandButtonsView.js
  7. 10
      styles/css/main.css
  8. 10
      styles/scss/main.scss

30
src/canvas/view/CanvasView.js
View File

@ -7,20 +7,10 @@ function(Backbone, FrameView) {
initialize: function(o) { initialize: function(o) {
this.config = o.config || {}; this.config = o.config || {};
this.em = this.config.em || {};
this.ppfx = this.config.pStylePrefix || ''; this.ppfx = this.config.pStylePrefix || '';
this.className = this.config.stylePrefix + 'canvas'; this.className = this.config.stylePrefix + 'canvas';
this.frame = new FrameView({ model: this.model.get('frame')}); this.frame = new FrameView({ model: this.model.get('frame')});
this.toolsEl = $('<div>', { id: this.ppfx + 'tools' }).get(0);
this.hlEl = $('<div>', { class: this.ppfx + 'highlighter' }).get(0);
this.badgeEl = $('<div>', {class: this.ppfx + 'badge'}).get(0);
this.placerEl = $('<div>', {class: this.ppfx + 'placeholder'}).get(0);
this.placerIntEl = $('<div>', {class: this.ppfx + 'placeholder-int'}).get(0);
this.ghostEl = $('<div>', {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}'; '.' + this.ppfx + 'plh-image{background:#f5f5f5; border:none; height:50px; width:50px; display:block; outline:3px solid #ffca6f; cursor:pointer}';
if(protCss) if(protCss)
body.append('<style>' + frameCss + protCss + '</style>'); body.append('<style>' + frameCss + protCss + '</style>');
this.config.em.trigger('loaded');
} }
}, },
@ -55,8 +46,23 @@ function(Backbone, FrameView) {
var frame = this.frame; var frame = this.frame;
frame.el.onload = this.renderBody.bind(this); frame.el.onload = this.renderBody.bind(this);
} }
this.toolsEl = $('<div>', { id: this.ppfx + 'tools' }).get(0);
this.hlEl = $('<div>', { class: this.ppfx + 'highlighter' }).get(0);
this.badgeEl = $('<div>', {class: this.ppfx + 'badge'}).get(0);
this.placerEl = $('<div>', {class: this.ppfx + 'placeholder'}).get(0);
this.placerIntEl = $('<div>', {class: this.ppfx + 'placeholder-int'}).get(0);
this.ghostEl = $('<div>', {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); 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}); this.$el.attr({class: this.className, id: this.config.canvasId});
return this; return this;
}, },

60
src/commands/view/ResizeComponent.js
View File

@ -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;
}
});
});

46
src/dom_components/view/ComponentTextView.js
View File

@ -10,27 +10,20 @@ define(['backbone', './ComponentView'],
initialize: function(o){ initialize: function(o){
ComponentView.prototype.initialize.apply(this, arguments); ComponentView.prototype.initialize.apply(this, arguments);
_.bindAll(this,'disableEditing'); _.bindAll(this,'disableEditing');
this.listenTo( this.model, 'focus', this.enableEditing); this.listenTo(this.model, 'focus', this.enableEditing);
if(this.config.rte){ this.rte = this.config.rte || '';
this.rte = this.config.rte;
}
}, },
/** /**
* Enable this component to be editable, * Enable this component to be editable,
* load also the mini toolbar for quick editing * load also the mini toolbar for quick editing
* @param Event * @param {Event} e
* @private * @private
* */ * */
enableEditing: function(e){ enableEditing: function(e){
if(this.rte){ if(this.rte)
var $e = this.config.em.get('$editor'); this.rte.bind(this);
if(!this.$wrapper && $e.length) this.toggleEvents(1);
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
}, },
/** /**
@ -42,13 +35,13 @@ define(['backbone', './ComponentView'],
if(this.rte){ if(this.rte){
this.rte.unbind(this); this.rte.unbind(this);
} }
$(document).off('mousedown', this.disableEditing); this.toggleEvents();
this.$el.off('mousedown',this.disablePropagation);
this.updateContents(); this.updateContents();
}, },
/** Isolate disable propagation method /**
* @param Event * Isolate disable propagation method
* @param {Event}
* @private * @private
* */ * */
disablePropagation: function(e){ disablePropagation: function(e){
@ -57,18 +50,29 @@ define(['backbone', './ComponentView'],
/** /**
* Update contents of the element * Update contents of the element
*
* @return void
* @private * @private
**/ **/
updateContents : function(){ 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() { render: function() {
this.updateAttributes(); this.updateAttributes();
this.updateClasses(); this.updateClasses();
this.$el.html(this.model.get('content')); this.el.innerHTML = this.model.get('content');
return this; return this;
}, },
}); });

6
src/editor/view/EditorView.js
View File

@ -7,6 +7,9 @@ function(Backbone){
this.cv = this.model.get('Canvas'); this.cv = this.model.get('Canvas');
this.pn = this.model.get('Panels'); this.pn = this.model.get('Panels');
this.className = this.model.config.stylePrefix + 'editor'; this.className = this.model.config.stylePrefix + 'editor';
this.model.on('loaded', function(){
this.pn.active();
});
}, },
render: function(){ render: function(){
@ -34,9 +37,6 @@ function(Backbone){
this.$el.attr('class', this.className); this.$el.attr('class', this.className);
if(this.pn)
this.pn.active();
return this; return this;
} }
}); });

36
src/rich_text_editor/main.js
View File

@ -25,26 +25,38 @@ define(function(require) {
config : c, config : c,
}; };
this.toolbar = new CommandButtonsView(obj); this.toolbar = new CommandButtonsView(obj);
this.$toolbar = this.toolbar.render().$el; this.$toolbar = this.toolbar.render().$el;
} }
RichTextEditor.prototype = { 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 * Bind rich text editor to element
* @param {Object} view * @param {View} view
* @param {Object} container
*
* */ * */
bind : function(view, container){ bind: function(view){
if(!this.$contaniner){
this.$container = container;
this.$toolbar.appendTo(this.$container);
}
view.$el.wysiwyg({hotKeys: {}}).focus(); view.$el.wysiwyg({hotKeys: {}}).focus();
this.updatePosition(view.$el); this.updatePosition(view.$el);
this.bindToolbar(view).show(); this.bindToolbar(view).show();
//Avoid closing edit mode clicking on toolbar //Avoid closing edit mode clicking on toolbar
this.$toolbar.on('mousedown', this.disableProp); this.$toolbar.on('mousedown', this.disableProp);
}, },
@ -54,7 +66,7 @@ define(function(require) {
* @param {Object} view * @param {Object} view
* *
* */ * */
unbind : function(view){ unbind: function(view){
view.$el.wysiwyg('destroy'); view.$el.wysiwyg('destroy');
this.hide(); this.hide();
this.$toolbar.off('mousedown', this.disableProp); this.$toolbar.off('mousedown', this.disableProp);
@ -66,7 +78,7 @@ define(function(require) {
* *
* @return this * @return this
* */ * */
bindToolbar : function(view){ bindToolbar: function(view){
var id = this.tlbPfx + view.model.cid, var id = this.tlbPfx + view.model.cid,
dId = this.tlbPfx + 'inited'; dId = this.tlbPfx + 'inited';
if(!view.$el.data(dId)){ if(!view.$el.data(dId)){

22
src/rich_text_editor/view/CommandButtonsView.js
View File

@ -1,37 +1,35 @@
define(['backbone','./CommandButtonView'], define(['backbone','./CommandButtonView'],
function (Backbone, CommandButtonView) { function (Backbone, CommandButtonView) {
/** /**
* @class CommandButtonsView * @class CommandButtonsView
* */ * */
return Backbone.View.extend({ return Backbone.View.extend({
className: 'no-dots',
attributes : { attributes : {
'data-role' : 'editor-toolbar', 'data-role' : 'editor-toolbar',
}, },
initialize: function(o){ initialize: function(o){
this.config = o.config || {}; this.config = o.config || {};
this.id = this.config.stylePrefix + this.config.toolbarId; this.id = this.config.stylePrefix + this.config.toolbarId;
this.$el.data('helper',1); this.$el.data('helper',1);
}, },
/** /**
* Update RTE target pointer * Update RTE target pointer
* @param {String} target * @param {String} target
* *
* @return this * @return this
* */ * */
updateTarget: function(target){ updateTarget: function(target){
this.$el.attr('data-target',target); this.$el.attr('data-target', target);
return this; return this;
}, },
render: function() { render: function() {
var fragment = document.createDocumentFragment(); var fragment = document.createDocumentFragment();
this.$el.empty(); this.$el.empty();
this.collection.each(function(item){ this.collection.each(function(item){
var view = new CommandButtonView({ var view = new CommandButtonView({
model : item, model : item,

10
styles/css/main.css
View File

@ -2902,7 +2902,7 @@ ol.example li.placeholder:before {
font-weight: lighter; font-weight: lighter;
text-align: left; text-align: left;
position: relative; 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 { .wte-nv-navigator .wte-nv-item.wte-nv-hide {
opacity: 0.55; opacity: 0.55;
filter: alpha(opacity=55); } filter: alpha(opacity=55); }
@ -3127,7 +3127,7 @@ ol.example li.placeholder:before {
padding: 5px; padding: 5px;
display: block; } 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 { .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*/ } /*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 { .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; background-repeat: no-repeat;
@ -3315,11 +3315,11 @@ ol.example li.placeholder:before {
display: inline-block; display: inline-block;
vertical-align: top; } vertical-align: top; }
.wte-clm-tags #wte-clm-add-tag { .wte-clm-tags #wte-clm-add-tag {
background-color: #535353; background-color: rgba(255, 255, 255, 0.2);
border-radius: 2px; border-radius: 2px;
padding: 5px 6px; padding: 5px 6px;
box-shadow: 1px 1px 0 #6d6d6d inset; box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset;
border: 1px solid #323232; border: 1px solid rgba(0, 0, 0, 0.15);
cursor: pointer; } cursor: pointer; }
.wte-clm-tags #wte-clm-new { .wte-clm-tags #wte-clm-new {
color: #eee; color: #eee;

10
styles/scss/main.scss
View File

@ -410,7 +410,7 @@ $leftWidth: 16.5%;
font-weight: lighter; font-weight: lighter;
text-align: left; text-align: left;
position: relative; position: relative;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.2);
} }
.#{$nv-prefix}item.#{$nv-prefix}hide { .#{$nv-prefix}item.#{$nv-prefix}hide {
@include opacity(0.55); @include opacity(0.55);
@ -637,7 +637,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
input{ display:none; } input{ display:none; }
label{ cursor:pointer; padding: 5px; display:block;} label{ cursor:pointer; padding: 5px; display:block;}
.#{$sm-prefix}radio:checked + label{ .#{$sm-prefix}radio:checked + label{
background-color: lighten($mainDkColor, 13%);/*5b5b5b*/ background-color: rgba(255, 255, 255, 0.2);/*5b5b5b*/
} }
.#{$sm-prefix}icon{ .#{$sm-prefix}icon{
background-repeat: no-repeat; background-repeat: no-repeat;
@ -876,11 +876,11 @@ $paddElClm: 5px 6px;
} }
##{$clm-prefix}add-tag{ ##{$clm-prefix}add-tag{
background-color: $addBtnBg; background-color: rgba(255, 255, 255, 0.2);
border-radius: 2px; border-radius: 2px;
padding: $paddElClm; padding: $paddElClm;
box-shadow: 1px 1px 0 lighten($addBtnBg, 10%) inset; box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset;
border: 1px solid darken($addBtnBg, 13%); border: 1px solid rgba(0, 0, 0, 0.15);
cursor: pointer; cursor: pointer;
} }

Write Preview
Loading…
Cancel
Save