diff --git a/src/class_manager/model/ClassTag.js b/src/class_manager/model/ClassTag.js
index 1a66811b8..735d0341c 100644
--- a/src/class_manager/model/ClassTag.js
+++ b/src/class_manager/model/ClassTag.js
@@ -8,6 +8,7 @@ define(['backbone'],
defaults: {
label: '',
name: '',
+ active: true,
},
initialize: function(){
diff --git a/src/class_manager/template/classTag.html b/src/class_manager/template/classTag.html
index 95c02bcc1..ba7844d0c 100644
--- a/src/class_manager/template/classTag.html
+++ b/src/class_manager/template/classTag.html
@@ -1,3 +1,3 @@
-
- <%= label %>
+
+ <%= label %>
⨯
\ No newline at end of file
diff --git a/src/class_manager/view/ClassTagView.js b/src/class_manager/view/ClassTagView.js
index 3e5328b60..5d2c33db3 100644
--- a/src/class_manager/view/ClassTagView.js
+++ b/src/class_manager/view/ClassTagView.js
@@ -11,14 +11,25 @@ define(['backbone', 'text!./../template/classTag.html'],
initialize: function(o) {
this.config = o.config || {};
+ this.coll = o.coll || null;
this.pfx = this.config.stylePrefix || '';
this.className = this.pfx + 'tag';
this.closeId = this.pfx + 'close';
+ this.chkId = this.pfx + 'checkbox';
+ this.labelId = this.pfx + 'tag-label';
this.events['click #' + this.closeId ] = 'removeTag';
+ this.events['click #' + this.chkId ] = 'changeStatus';
+ this.events['click #' + this.labelId ] = 'changeStatus';
+
+ this.listenTo( this.model, 'change:active', this.updateStatus);
this.delegateEvents();
},
+ changeStatus: function(){
+ this.model.set('active', !this.model.get('active'));
+ },
+
/**
* Remove tag from the selected component
* @param {Object} e
@@ -29,15 +40,32 @@ define(['backbone', 'text!./../template/classTag.html'],
if(comp)
comp.get('classes').remove(this.model);
+ if(this.coll)
+ this.coll.remove(this.model);
+
this.remove();
},
+ /**
+ * Update status of the checkbox
+ */
+ updateStatus: function(){
+ if(!this.$chk)
+ this.$chk = this.$el.find('#' + this.pfx + 'checkbox');
+
+ if(this.model.get('active'))
+ this.$chk.removeClass('fa-circle-o').addClass('fa-dot-circle-o');
+ else
+ this.$chk.removeClass('fa-dot-circle-o').addClass('fa-circle-o');
+ },
+
/** @inheritdoc */
render : function(){
this.$el.html( this.template({
label: this.model.get('label'),
pfx: this.pfx,
}));
+ this.updateStatus();
this.$el.attr('class', this.className);
return this;
},
diff --git a/src/class_manager/view/ClassTagsView.js b/src/class_manager/view/ClassTagsView.js
index a4c5cb8e4..ad1b66a35 100644
--- a/src/class_manager/view/ClassTagsView.js
+++ b/src/class_manager/view/ClassTagsView.js
@@ -26,18 +26,11 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
this.listenTo( this.target ,'change:selectedComponent',this.componentChanged);
this.listenTo( this.collection, 'add', this.addNew);
- this.listenTo( this.collection, 'remove', this.removed);
this.listenTo( this.collection, 'reset', this.renderClasses);
- //this.config.
-
this.delegateEvents();
},
- removed: function(){
- console.log('removed');
- },
-
/**
* Add new model
* @param {Object} model
@@ -134,6 +127,7 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
var view = new ClassTagView({
model: model,
config: this.config,
+ coll: this.collection,
});
var rendered = view.render().el;
diff --git a/src/dom_components/main.js b/src/dom_components/main.js
index f3e4ee96b..02aee9d2f 100644
--- a/src/dom_components/main.js
+++ b/src/dom_components/main.js
@@ -35,8 +35,8 @@ define(function(require) {
c.wrapper.style = {};
c.wrapper.style.position = 'relative';
+ this.component = new Component(c.wrapper, { sm: c.em });
- this.component = new Component(c.wrapper);
var obj = {
model: this.component,
config: c,
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index ee9471b05..78d9f9274 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -22,11 +22,12 @@ define(['backbone','./Components', 'ClassManager/model/ClassTags'],
attributes : {},
},
- initialize: function(o) {
+ initialize: function(o, opt) {
+ this.sm = opt ? opt.sm || {} : {};
this.config = o || {};
this.defaultC = this.config.components || [];
this.defaultCl = this.normalizeClasses(this.config.classes || []);
- this.components = new Components(this.defaultC);
+ this.components = new Components(this.defaultC, opt);
this.set('components', this.components);
this.set('classes', new ClassTags(this.defaultCl));
},
@@ -39,11 +40,24 @@ define(['backbone','./Components', 'ClassManager/model/ClassTags'],
*/
normalizeClasses: function(arr){
var res = [];
+
+ if(!this.sm.get)
+ return;
+
+ var clm = this.sm.get('ClassManager');
+ if(!clm)
+ return;
+
arr.forEach(function(val){
+ var name = '';
+
if(typeof val === 'string')
- res.push({ name: val });
+ name = val;
else
- res.push(val);
+ name = val.name;
+
+ var model = clm.addClass(name);
+ res.push(model);
});
return res;
},
diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js
index 10bab937b..a57aa2f14 100644
--- a/src/dom_components/model/Components.js
+++ b/src/dom_components/model/Components.js
@@ -1,16 +1,19 @@
-define([ 'backbone', 'require'],
+define([ 'backbone', 'require'],
function (Backbone, require) {
/**
* @class Components
* */
-
+
return Backbone.Collection.extend({
-
+
initialize: function(models, opt){
-
+
this.model = function(attrs, options) {
var model;
-
+
+ if(!options.sm && opt && opt.sm)
+ options.sm = opt.sm;
+
switch(attrs.type){
case 'text':
@@ -18,24 +21,24 @@ define([ 'backbone', 'require'],
this.mComponentText = require("./ComponentText");
model = new this.mComponentText(attrs, options);
break;
-
+
case 'image':
if(!this.mComponentImage)
this.mComponentImage = require("./ComponentImage");
model = new this.mComponentImage(attrs, options);
break;
-
+
default:
if(!this.mComponent)
this.mComponent = require("./Component");
model = new this.mComponent(attrs, options);
-
+
}
-
+
return model;
};
-
+
},
-
+
});
});
diff --git a/src/dom_components/view/ComponentImageView.js b/src/dom_components/view/ComponentImageView.js
index bcc7c9c49..a84668f7b 100644
--- a/src/dom_components/view/ComponentImageView.js
+++ b/src/dom_components/view/ComponentImageView.js
@@ -59,6 +59,7 @@ define(['backbone', './ComponentView'],
render: function() {
this.updateAttributes();
+ this.updateClasses();
return this;
},
});
diff --git a/src/dom_components/view/ComponentTextView.js b/src/dom_components/view/ComponentTextView.js
index 3883147a9..cc0cbae5b 100644
--- a/src/dom_components/view/ComponentTextView.js
+++ b/src/dom_components/view/ComponentTextView.js
@@ -66,6 +66,7 @@ define(['backbone', './ComponentView'],
render: function() {
this.updateAttributes();
+ this.updateClasses();
this.$el.html(this.model.get('content'));
return this;
},
diff --git a/styles/css/main.css b/styles/css/main.css
index 4d861ab3a..1720d2abb 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -2587,7 +2587,7 @@ html, body, #wte-app, .wte-editor {
.clear {
clear: both; }
-.no-select, .wte-com-no-select, .wte-com-no-select img, .wte-clm-tags #wte-clm-close {
+.no-select, .wte-com-no-select, .wte-com-no-select img, .wte-clm-tags #wte-clm-close, .wte-clm-tags #wte-clm-tag-label {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
@@ -3249,7 +3249,10 @@ ol.example li.placeholder:before {
filter: alpha(opacity=70); }
.wte-clm-tags #wte-clm-checkbox {
vertical-align: middle;
+ cursor: pointer;
font-size: 9px; }
+ .wte-clm-tags #wte-clm-tag-label {
+ cursor: pointer; }
/********* END Class manager **********/
/********* Modal dialog **********/
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index fbb98e8fd..2462bd362 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -791,8 +791,14 @@ $tagBg: #804f7b;
}
##{$clm-prefix}checkbox {
vertical-align: middle;
+ cursor: pointer;
font-size: 9px;
}
+
+ ##{$clm-prefix}tag-label {
+ cursor: pointer;
+ @extend .no-select;
+ }
}
/********* END Class manager **********/
diff --git a/test/specs/class_manager/e2e/ClassManager.js b/test/specs/class_manager/e2e/ClassManager.js
index 5e49637f9..ba5602b76 100644
--- a/test/specs/class_manager/e2e/ClassManager.js
+++ b/test/specs/class_manager/e2e/ClassManager.js
@@ -62,23 +62,22 @@ define(
});
it('Classes from components are correctly imported inside main container', function() {
- this.$fixture.empty();
- var Grapes = require('editor/main');
- var gjs = new Grapes({
- storageType: 'none',
- storageManager: { storageType: 'none',},
- assetManager: { storageType: 'none', },
- container: '#ClassManager-fixture',
- components: {
- defaults: [
- { classes: ['test11', 'test12', 'test13'] },
- { classes: ['test11', 'test22', 'test22'] },
- ],
- }
+ var wrp = this.gjs.editor.get('Components').getWrapper().get('components');
+ var model = wrp.add([
+ { classes: ['test11', 'test12', 'test13'] },
+ { classes: ['test11', 'test22', 'test22'] },
+ ]);
+ this.gjs.editor.get('ClassManager').getClasses().length.should.equal(4);
+ });
+
+ it('Class imported into component is the same model from main container', function() {
+ var wrp = this.gjs.editor.get('Components').getWrapper().get('components');
+ var model = wrp.add({
+ classes: ['test1']
});
- gjs.render();
- console.log(this.$fixture);
- gjs.editor.get('ClassManager').getClasses().length.should.equal(4);
+ var clModel = model.get('classes').at(0);
+ var clModel2 = this.gjs.editor.get('ClassManager').getClasses().at(0);
+ clModel.should.deep.equal(clModel2);
});
});