mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
10 years ago
18 changed files with 561 additions and 100 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,17 @@ |
|||
define(function () { |
|||
return { |
|||
|
|||
// Style prefix
|
|||
stylePrefix : 'clm-', |
|||
|
|||
// Default classes
|
|||
classes : [], |
|||
|
|||
// Label for classes
|
|||
label: 'Classes', |
|||
|
|||
// Label for states
|
|||
statesLabel: 'States', |
|||
|
|||
}; |
|||
}); |
|||
@ -0,0 +1,84 @@ |
|||
define(function(require) { |
|||
/** |
|||
* @class ClassManager |
|||
* @param {Object} config Configurations |
|||
* |
|||
* */ |
|||
var ClassManager = function(config) |
|||
{ |
|||
var c = config || {}, |
|||
def = require('./config/config'), |
|||
ClassTags = require('./model/ClassTags'), |
|||
ClassTagsView = require('./view/ClassTagsView'); |
|||
|
|||
for (var name in def) { |
|||
if (!(name in c)) |
|||
c[name] = def[name]; |
|||
} |
|||
|
|||
this.classes = new ClassTags(c.classes); |
|||
|
|||
var obj = { |
|||
collection: this.classes, |
|||
config: c, |
|||
}; |
|||
this.tagsView = new ClassTagsView(obj); |
|||
//this.ClassTagsView = new ClassTagsView(obj);
|
|||
}; |
|||
|
|||
ClassManager.prototype = { |
|||
|
|||
/** |
|||
* Get collection of classes |
|||
* |
|||
* @return {Object} |
|||
* */ |
|||
getClasses : function() { |
|||
return this.classes; |
|||
}, |
|||
|
|||
/** |
|||
* Get class by its name |
|||
* |
|||
* @return {Object|null} |
|||
* */ |
|||
getClass : function(id) { |
|||
var res = this.classes.where({name: id}); |
|||
return res.length ? res[0] : null; |
|||
}, |
|||
|
|||
/** |
|||
* Add new class to collection only if it's not already exists |
|||
* @param {String} name Class name |
|||
* @return {Object} Model class |
|||
* */ |
|||
addClass: function(name){ |
|||
var label = name; |
|||
var fname = this.escapeName(name); |
|||
var c = this.getClass(fname); |
|||
if(!c) |
|||
return this.classes.add({name: fname, label: label}); |
|||
return c; |
|||
}, |
|||
|
|||
/** |
|||
* Escape string |
|||
* @param {String} name |
|||
* @return {String} |
|||
*/ |
|||
escapeName: function(name) { |
|||
return name.toLowerCase().replace(/([^a-z0-9\w]+)/gi, '-'); |
|||
}, |
|||
|
|||
/** |
|||
* Renders a collection of class tags. Useful for components classes |
|||
* @return {Object} Rendered view |
|||
*/ |
|||
renderTags: function(){ |
|||
return this.tagsView.render().el; |
|||
}, |
|||
}; |
|||
|
|||
return ClassManager; |
|||
|
|||
}); |
|||
@ -0,0 +1,14 @@ |
|||
define(['backbone'], |
|||
function (Backbone) { |
|||
/** |
|||
* @class ClassTag |
|||
* */ |
|||
return Backbone.Model.extend({ |
|||
|
|||
defaults: { |
|||
label: '', |
|||
name: '', |
|||
}, |
|||
|
|||
}); |
|||
}); |
|||
@ -0,0 +1,11 @@ |
|||
define(['backbone','./ClassTag'], |
|||
function (Backbone, ClassTag) { |
|||
/** |
|||
* @class ClassTags |
|||
* */ |
|||
return Backbone.Collection.extend({ |
|||
|
|||
model: ClassTag, |
|||
|
|||
}); |
|||
}); |
|||
@ -0,0 +1,12 @@ |
|||
<div id="<%= pfx %>up"> |
|||
<div id="<%= pfx %>label"><%= label %></div> |
|||
<div id="<%= pfx %>status-c"> |
|||
<%= statesLabel %> |
|||
<span id="<%= pfx %>input-c"></span> |
|||
</div> |
|||
</div> |
|||
<div id="<%= pfx %>tags-field"> |
|||
<div id="<%= pfx %>tags-c"></div> |
|||
<input id="<%= pfx %>new" /> |
|||
<span id="<%= pfx %>add-tag" class="fa fa-plus"></span> |
|||
</div> |
|||
@ -0,0 +1,22 @@ |
|||
define(['backbone'], |
|||
function (Backbone) { |
|||
/** |
|||
* @class ClassTagView |
|||
* */ |
|||
return Backbone.View.extend({ |
|||
|
|||
initialize: function(o) { |
|||
this.config = o.config || {}; |
|||
this.pfx = this.config.stylePrefix; |
|||
this.className = this.pfx + 'tag'; |
|||
}, |
|||
|
|||
/** @inheritdoc */ |
|||
render : function(){ |
|||
this.$el.html(this.model.get('name')+': ' + this.model.get('label')); |
|||
this.$el.attr('class', this.className); |
|||
return this; |
|||
}, |
|||
|
|||
}); |
|||
}); |
|||
@ -0,0 +1,166 @@ |
|||
define(['backbone', 'text!./../template/classTags.html', './ClassTagView'], |
|||
function (Backbone, tagsTemplate, ClassTagView) { |
|||
/** |
|||
* @class ClassTagsView |
|||
* */ |
|||
return Backbone.View.extend({ |
|||
|
|||
template: _.template(tagsTemplate), |
|||
|
|||
events:{ |
|||
'click .add': 'startNewClass', |
|||
}, |
|||
|
|||
initialize: function(o) { |
|||
this.config = o.config || {}; |
|||
this.pfx = this.config.stylePrefix; |
|||
this.className = this.pfx + 'tags'; |
|||
this.addBtnId = this.pfx + 'add-tag'; |
|||
this.newInputId = this.pfx + 'new'; |
|||
this.events['click #' + this.addBtnId] = 'startNewTag'; |
|||
this.events['blur #'+this.newInputId] = 'endNewTag'; |
|||
this.events['keyup #'+this.newInputId] = 'onInputKeyUp'; |
|||
|
|||
this.target = this.config.target; |
|||
|
|||
this.listenTo( this.target ,'change:selectedComponent',this.componentChanged); |
|||
|
|||
this.listenTo( this.collection, 'add', this.addNew); |
|||
this.listenTo( this.collection, 'reset', this.renderClasses); |
|||
|
|||
this.delegateEvents(); |
|||
}, |
|||
|
|||
/** |
|||
* Add new model |
|||
* @param {Object} model |
|||
*/ |
|||
addNew: function(model){ |
|||
this.addToClasses(model); |
|||
}, |
|||
|
|||
/** |
|||
* Start new tag event |
|||
* @param {Object} e |
|||
* |
|||
*/ |
|||
startNewTag: function(e) { |
|||
this.$addBtn.hide(); |
|||
this.$input.show().focus(); |
|||
}, |
|||
|
|||
/** |
|||
* Start new tag event |
|||
* @param {Object} e |
|||
* |
|||
*/ |
|||
endNewTag: function(e) { |
|||
this.$addBtn.show(); |
|||
this.$input.hide().val(''); |
|||
}, |
|||
|
|||
|
|||
/** |
|||
* Add new class tag |
|||
* @param {Object} model |
|||
* |
|||
*/ |
|||
addTag: function(model){ |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* Triggered when component is changed |
|||
* @param {Object} e |
|||
*/ |
|||
componentChanged: function(e){ |
|||
}, |
|||
|
|||
/** |
|||
* Checks what to do on keyup event |
|||
* @param {Object} e |
|||
*/ |
|||
onInputKeyUp: function(e) { |
|||
if (e.keyCode === 13) |
|||
this.addNewTag(this.$input.val()); |
|||
else if(e.keyCode === 27) |
|||
this.endNewTag(); |
|||
else{ |
|||
//this.searchItem();
|
|||
//console.log('search');
|
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Add new tag to collection, if possible, and to the component |
|||
* @param {Object} e |
|||
*/ |
|||
addNewTag: function(name){ |
|||
if(!name) |
|||
return; |
|||
|
|||
if(this.target){ |
|||
var cm = this.target.get('ClassManager'); |
|||
var model = cm.addClass(name); |
|||
console.log(model); |
|||
} |
|||
this.endNewTag(); |
|||
}, |
|||
|
|||
/** |
|||
* Add new object to collection |
|||
* @param {Object} model Model |
|||
* @param {Object} fragmentEl Fragment collection |
|||
* |
|||
* @return {Object} Object created |
|||
* */ |
|||
addToClasses: function(model, fragmentEl) { |
|||
var fragment = fragmentEl || null; |
|||
|
|||
var view = new ClassTagView({ |
|||
model: model, |
|||
config: this.config, |
|||
}); |
|||
var rendered = view.render().el; |
|||
|
|||
if(fragment) |
|||
fragment.appendChild( rendered ); |
|||
else |
|||
this.$classes.append(rendered); |
|||
|
|||
return rendered; |
|||
}, |
|||
|
|||
/** |
|||
* Render the collection of classes |
|||
* @return {this} |
|||
*/ |
|||
renderClasses: function() { |
|||
var fragment = document.createDocumentFragment(); |
|||
|
|||
this.collection.each(function(model){ |
|||
this.addToClasses(model, fragment); |
|||
},this); |
|||
|
|||
this.$classes.empty().append(fragment); |
|||
return this; |
|||
}, |
|||
|
|||
|
|||
/** @inheritdoc */ |
|||
render : function(){ |
|||
this.$el.html( this.template({ |
|||
label: this.config.label, |
|||
statesLabel: this.config.statesLabel, |
|||
pfx: this.pfx, |
|||
})); |
|||
this.$input = this.$el.find('input#' + this.newInputId); |
|||
this.$addBtn = this.$el.find('#' + this.addBtnId); |
|||
this.$classes = this.$el.find('#' + this.pfx + 'tags-c'); |
|||
this.renderClasses(); |
|||
this.$el.attr('class', this.className); |
|||
return this; |
|||
}, |
|||
|
|||
}); |
|||
}); |
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue