mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
10 years ago
16 changed files with 1289 additions and 18 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,24 @@ |
|||||
|
define(function () { |
||||
|
return { |
||||
|
|
||||
|
// Style prefix
|
||||
|
stylePrefix : 'clm-', |
||||
|
|
||||
|
// Default classes
|
||||
|
selectors : [], |
||||
|
|
||||
|
// Label for classes
|
||||
|
label: 'Classes', |
||||
|
|
||||
|
// Label for states
|
||||
|
statesLabel: '- State -', |
||||
|
|
||||
|
// States
|
||||
|
states: [ |
||||
|
{ name: 'hover', label: 'Hover' }, |
||||
|
{ name: 'active', label: 'Click' }, |
||||
|
{ name: 'nth-of-type(2n)', label: 'Even/Odd' } |
||||
|
], |
||||
|
|
||||
|
}; |
||||
|
}); |
||||
@ -0,0 +1,164 @@ |
|||||
|
/** |
||||
|
* * [init](#init) |
||||
|
* * [add](#add) |
||||
|
* * [get](#get) |
||||
|
* * [getAll](#getall) |
||||
|
* * [render](#render) |
||||
|
* |
||||
|
* Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To get better this concept let's take |
||||
|
* a look at this code: |
||||
|
* |
||||
|
* ```css
|
||||
|
* span > #send-btn.btn{ |
||||
|
* ... |
||||
|
* } |
||||
|
* ``` |
||||
|
* ```html
|
||||
|
* <span> |
||||
|
* <button id="send-btn" class="btn"></button> |
||||
|
* </span> |
||||
|
* ``` |
||||
|
* |
||||
|
* In this scenario we get: |
||||
|
* span -> selector of type `tag` |
||||
|
* send-btn -> selector of type `id` |
||||
|
* btn -> selector of type `class` |
||||
|
* |
||||
|
* So, for example, being `btn` the same class entity it'll be easier to refactor and track things. |
||||
|
* |
||||
|
* Before using methods you should get first the module from the editor instance, in this way: |
||||
|
* |
||||
|
* ```js
|
||||
|
* var selectorManager = editor.SelectorManager; |
||||
|
* ``` |
||||
|
* |
||||
|
* @module SelectorManager |
||||
|
*/ |
||||
|
define(function(require) { |
||||
|
|
||||
|
return function(config) { |
||||
|
var c = config || {}, |
||||
|
defaults = require('./config/config'); |
||||
|
Selectors = require('./model/Selectors'); |
||||
|
ClassTagsView = require('./view/ClassTagsView'); |
||||
|
var selectors, selectorTags; |
||||
|
|
||||
|
return { |
||||
|
|
||||
|
/** |
||||
|
* Name of the module |
||||
|
* @type {String} |
||||
|
* @private |
||||
|
*/ |
||||
|
name: 'SelectorManager', |
||||
|
|
||||
|
/** |
||||
|
* Indicates if module is public |
||||
|
* @type {Boolean} |
||||
|
* @private |
||||
|
*/ |
||||
|
public: true, |
||||
|
|
||||
|
/** |
||||
|
* Initialize module. Automatically called with a new instance of the editor |
||||
|
* @param {Object} config Configurations |
||||
|
* @param {Array<Object>} [config.selectors=[]] Default selectors |
||||
|
* @param {Array<Object>} [config.states=[]] Default states |
||||
|
* @param {String} [config.label='Classes'] Classes label |
||||
|
* @param {String} [config.statesLabel='- State -'] The empty state label |
||||
|
* @return {this} |
||||
|
* @example |
||||
|
* ... |
||||
|
* { |
||||
|
* selectors: [ |
||||
|
* {name:'myselector1'}, |
||||
|
* ... |
||||
|
* ], |
||||
|
* states: [{ |
||||
|
* name: 'hover', label: 'Hover' |
||||
|
* },{ |
||||
|
* name: 'active', label: 'Click' |
||||
|
* }], |
||||
|
* statesLabel: '- Selecte State -', |
||||
|
* } |
||||
|
*/ |
||||
|
init: function(conf) { |
||||
|
c = conf || {}; |
||||
|
|
||||
|
for (var name in defaults) { |
||||
|
if (!(name in c)) |
||||
|
c[name] = defaults[name]; |
||||
|
} |
||||
|
|
||||
|
var ppfx = c.pStylePrefix; |
||||
|
if(ppfx) |
||||
|
c.stylePrefix = ppfx + c.stylePrefix; |
||||
|
|
||||
|
selectors = new Selectors(c.selectors); |
||||
|
selectorTags = new ClassTagsView({ |
||||
|
collection: selectors, |
||||
|
config: c, |
||||
|
}); |
||||
|
return this; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Add new selector to collection if it's not already exists. Class type is a default one |
||||
|
* @param {String} name Selector name |
||||
|
* @param {Object} opts Selector options |
||||
|
* @param {String} [opts.label=''] Label for the selector, if it's not provided the label will be the same as the name |
||||
|
* @param {String} [opts.type='class'] Type of the selector. At the moment, only 'class' is available |
||||
|
* @return {Model} |
||||
|
* @example |
||||
|
* var selector = selectorManager.add('selectorName'); |
||||
|
* // Same as
|
||||
|
* var selector = selectorManager.add('selectorName', { |
||||
|
* type: 'class', |
||||
|
* label: 'selectorName' |
||||
|
* }); |
||||
|
* */ |
||||
|
add: function(name, opts){ |
||||
|
var obj = opts || {}; |
||||
|
obj.name = name; |
||||
|
return selectors.add(obj); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Get selector by its name |
||||
|
* @param {String} name Selector name |
||||
|
* @return {Model|null} |
||||
|
* @example |
||||
|
* var selector = selectorManager.get('selectorName'); |
||||
|
* */ |
||||
|
get: function(name) { |
||||
|
return selectors.where({name: name})[0]; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Get all selectors |
||||
|
* @return {Collection} |
||||
|
* */ |
||||
|
getAll: function() { |
||||
|
return selectors; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Render class selectors. If an array of selectors is provided a new instance of the collection will be rendered |
||||
|
* @param {Array<Object>} selectors |
||||
|
* @return {HTMLElement} |
||||
|
*/ |
||||
|
render: function(selectors) { |
||||
|
if(selectors){ |
||||
|
var view = new ClassTagsView({ |
||||
|
collection: new Selectors(selectors), |
||||
|
config: c, |
||||
|
}); |
||||
|
return view.render().el; |
||||
|
}else |
||||
|
return selectorTags.render().el; |
||||
|
}, |
||||
|
|
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
}); |
||||
@ -0,0 +1,32 @@ |
|||||
|
define(['backbone'], |
||||
|
function (Backbone) { |
||||
|
return Backbone.Model.extend({ |
||||
|
|
||||
|
idAttribute: 'name', |
||||
|
|
||||
|
defaults: { |
||||
|
name: '', |
||||
|
label: '', |
||||
|
type: 'class', |
||||
|
active: true, |
||||
|
}, |
||||
|
|
||||
|
initialize: function() { |
||||
|
this.set('name', this.escapeName(this.get('name'))); |
||||
|
var label = this.get('label').trim(); |
||||
|
if(!label) |
||||
|
this.set('label', this.get('name')); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Escape string |
||||
|
* @param {string} name |
||||
|
* |
||||
|
* @return {string} |
||||
|
*/ |
||||
|
escapeName: function(name) { |
||||
|
return name.toLowerCase().replace(/([^a-z0-9\w]+)/gi, '-'); |
||||
|
}, |
||||
|
|
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,9 @@ |
|||||
|
define(['backbone','./Selector'], |
||||
|
function (Backbone, Selector) { |
||||
|
|
||||
|
return Backbone.Collection.extend({ |
||||
|
|
||||
|
model: Selector, |
||||
|
|
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,5 @@ |
|||||
|
<span id="<%= pfx %>checkbox" class="fa"></span> |
||||
|
<span id="<%= pfx %>tag-label"> |
||||
|
<input class="<%= ppfx %>no-app" value="<%= label %>" <%= inputProp %>/> |
||||
|
</span> |
||||
|
<span id="<%= pfx %>close">⨯</span> |
||||
@ -0,0 +1,27 @@ |
|||||
|
<div id="<%= pfx %>up"> |
||||
|
<div id="<%= pfx %>label"><%= label %></div> |
||||
|
<div id="<%= pfx %>status-c"> |
||||
|
<span id="<%= pfx %>input-c"> |
||||
|
<div class="<%= pfx %>field <%= pfx %>select"> |
||||
|
<span id="<%= pfx %>input-holder"> |
||||
|
<select id="<%= pfx %>states"> |
||||
|
<option value=""><%= statesLabel %></option> |
||||
|
</select> |
||||
|
</span> |
||||
|
<div class="<%= pfx %>sel-arrow"> |
||||
|
<div class="<%= pfx %>d-s-arrow"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</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> |
||||
|
<div id="<%= pfx %>sel-help"> |
||||
|
<div id="<%= pfx %>label">Selected</div> |
||||
|
<div id="<%= pfx %>sel"></div> |
||||
|
<div style="clear:both"></div> |
||||
|
</div> |
||||
@ -0,0 +1,129 @@ |
|||||
|
define(['backbone', 'text!./../template/classTag.html'], |
||||
|
function (Backbone, tagTemplate) { |
||||
|
/** |
||||
|
* @class ClassTagView |
||||
|
* */ |
||||
|
return Backbone.View.extend({ |
||||
|
|
||||
|
template: _.template(tagTemplate), |
||||
|
|
||||
|
events: {}, |
||||
|
|
||||
|
initialize: function(o) { |
||||
|
this.config = o.config || {}; |
||||
|
this.coll = o.coll || null; |
||||
|
this.pfx = this.config.stylePrefix || ''; |
||||
|
this.ppfx = this.config.pStylePrefix || ''; |
||||
|
this.inputProp = 'readonly'; |
||||
|
this.target = this.config.em; |
||||
|
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['dblclick #' + this.labelId ] = 'startEditTag'; |
||||
|
this.events['keypress #' + this.labelId + ' input'] = 'updateInputLabel'; |
||||
|
this.events['blur #' + this.labelId + ' input'] = 'endEditTag'; |
||||
|
|
||||
|
this.listenTo( this.model, 'change:active', this.updateStatus); |
||||
|
this.delegateEvents(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Start editing tag |
||||
|
*/ |
||||
|
startEditTag: function(){ |
||||
|
this.$labelInput.prop(this.inputProp, false); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* End editing tag. If the class typed already exists the |
||||
|
* old one will be restored otherwise will be changed |
||||
|
*/ |
||||
|
endEditTag: function(){ |
||||
|
var value = this.$labelInput.val(); |
||||
|
var next = this.model.escapeName(value); |
||||
|
|
||||
|
if(this.target){ |
||||
|
var clsm = this.target.get('SelectorManager'); |
||||
|
|
||||
|
if(clsm){ |
||||
|
if(clsm.get(next)) |
||||
|
this.$labelInput.val(this.model.get('label')); |
||||
|
else |
||||
|
this.model.set({ name: next, label: value}); |
||||
|
} |
||||
|
} |
||||
|
this.$labelInput.prop(this.inputProp, true); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Update status of the tag |
||||
|
*/ |
||||
|
changeStatus: function(){ |
||||
|
this.model.set('active', !this.model.get('active')); |
||||
|
this.target.trigger('targetClassUpdated'); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Remove tag from the selected component |
||||
|
* @param {Object} e |
||||
|
*/ |
||||
|
removeTag: function(e){ |
||||
|
var comp = this.target.get('selectedComponent'); |
||||
|
|
||||
|
if(comp) |
||||
|
comp.get('classes').remove(this.model); |
||||
|
|
||||
|
if(this.coll){ |
||||
|
this.coll.remove(this.model); |
||||
|
this.target.trigger('targetClassRemoved'); |
||||
|
} |
||||
|
|
||||
|
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'); |
||||
|
this.$el.removeClass('opac50'); |
||||
|
}else{ |
||||
|
this.$chk.removeClass('fa-dot-circle-o').addClass('fa-circle-o'); |
||||
|
this.$el.addClass('opac50'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Update label's input |
||||
|
*/ |
||||
|
updateInputLabel: function(){ |
||||
|
if(!this.$labelInput) |
||||
|
this.$labelInput = this.$el.find('input'); |
||||
|
var size = this.$labelInput.val().length - 2; |
||||
|
size = size < 1 ? 1 : size; |
||||
|
this.$labelInput.attr('size', size); |
||||
|
}, |
||||
|
|
||||
|
/** @inheritdoc */ |
||||
|
render : function(){ |
||||
|
this.$el.html( this.template({ |
||||
|
label: this.model.get('label'), |
||||
|
pfx: this.pfx, |
||||
|
ppfx: this.ppfx, |
||||
|
inputProp: this.inputProp, |
||||
|
})); |
||||
|
this.updateStatus(); |
||||
|
this.$el.attr('class', this.className); |
||||
|
this.updateInputLabel(); |
||||
|
return this; |
||||
|
}, |
||||
|
|
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,280 @@ |
|||||
|
define(['backbone', 'text!./../template/classTags.html', './ClassTagView'], |
||||
|
function (Backbone, tagsTemplate, ClassTagView) { |
||||
|
/** |
||||
|
* @class ClassTagsView |
||||
|
* */ |
||||
|
return Backbone.View.extend({ |
||||
|
|
||||
|
template: _.template(tagsTemplate), |
||||
|
|
||||
|
events: {}, |
||||
|
|
||||
|
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.stateInputId = this.pfx + 'states'; |
||||
|
this.stateInputC = this.pfx + 'input-c'; |
||||
|
this.states = this.config.states || []; |
||||
|
this.events['click #' + this.addBtnId] = 'startNewTag'; |
||||
|
this.events['blur #' + this.newInputId] = 'endNewTag'; |
||||
|
this.events['keyup #' + this.newInputId] = 'onInputKeyUp'; |
||||
|
this.events['change #' + this.stateInputId] = 'stateChanged'; |
||||
|
|
||||
|
this.target = this.config.em; |
||||
|
|
||||
|
this.listenTo(this.target ,'change:selectedComponent',this.componentChanged); |
||||
|
this.listenTo(this.target, 'targetClassUpdated', this.updateSelector); |
||||
|
|
||||
|
this.listenTo(this.collection, 'add', this.addNew); |
||||
|
this.listenTo(this.collection, 'reset', this.renderClasses); |
||||
|
this.listenTo(this.collection, 'remove', this.tagRemoved); |
||||
|
|
||||
|
this.delegateEvents(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Triggered when a tag is removed from collection |
||||
|
* @param {Object} model Removed model |
||||
|
*/ |
||||
|
tagRemoved: function(model){ |
||||
|
this.updateStateVis(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Create select input with states |
||||
|
* @return {string} String of options |
||||
|
*/ |
||||
|
getStateOptions: function(){ |
||||
|
var strInput = ''; |
||||
|
for(var i = 0; i < this.states.length; i++){ |
||||
|
strInput += '<option value="' + this.states[i].name + '">' + this.states[i].label + '</option>'; |
||||
|
} |
||||
|
return strInput; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Add new model |
||||
|
* @param {Object} model |
||||
|
*/ |
||||
|
addNew: function(model){ |
||||
|
this.addToClasses(model); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Start tag creation |
||||
|
* @param {Object} e |
||||
|
* |
||||
|
*/ |
||||
|
startNewTag: function(e) { |
||||
|
this.$addBtn.hide(); |
||||
|
this.$input.show().focus(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* End tag creation |
||||
|
* @param {Object} e |
||||
|
* |
||||
|
*/ |
||||
|
endNewTag: function(e) { |
||||
|
this.$addBtn.show(); |
||||
|
this.$input.hide().val(''); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 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(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Triggered when component is changed |
||||
|
* @param {Object} e |
||||
|
*/ |
||||
|
componentChanged: function(e){ |
||||
|
this.compTarget = this.target.get('selectedComponent'); |
||||
|
if(this.compTarget) |
||||
|
this.getStates().val(this.compTarget.get('state')); |
||||
|
var models = this.compTarget ? this.compTarget.get('classes').models : []; |
||||
|
this.collection.reset(models); |
||||
|
this.updateStateVis(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Update states visibility. Hides states in case there is no tags |
||||
|
* inside collection |
||||
|
*/ |
||||
|
updateStateVis: function(){ |
||||
|
if(this.collection.length) |
||||
|
this.getStatesC().css('display','block'); |
||||
|
else |
||||
|
this.getStatesC().css('display','none'); |
||||
|
this.updateSelector(); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Udpate selector helper |
||||
|
* @return {this} |
||||
|
* @private |
||||
|
*/ |
||||
|
updateSelector: function(){ |
||||
|
this.compTarget = this.target.get('selectedComponent'); |
||||
|
if(!this.compTarget || !this.compTarget.get) |
||||
|
return; |
||||
|
var result = ''; |
||||
|
var models = this.compTarget.get('classes'); |
||||
|
models.each(function(model){ |
||||
|
if(model.get('active')) |
||||
|
result += '.' + model.get('name'); |
||||
|
}); |
||||
|
var state = this.compTarget.get('state'); |
||||
|
result = state ? result + ':' + state : result; |
||||
|
var el = this.el.querySelector('#' + this.pfx + 'sel'); |
||||
|
if(el) |
||||
|
el.innerHTML = result; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Triggered when the select with states is changed |
||||
|
* @param {Object} e |
||||
|
*/ |
||||
|
stateChanged: function(e){ |
||||
|
if(this.compTarget){ |
||||
|
this.compTarget.set('state', this.$states.val()); |
||||
|
if(this.target) |
||||
|
this.target.trigger('targetStateUpdated'); |
||||
|
this.updateSelector(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 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('SelectorManager'); |
||||
|
var model = cm.add(name); |
||||
|
|
||||
|
if(this.compTarget){ |
||||
|
var targetCls = this.compTarget.get('classes'); |
||||
|
var lenB = targetCls.length; |
||||
|
targetCls.add(model); |
||||
|
var lenA = targetCls.length; |
||||
|
this.collection.add(model); |
||||
|
|
||||
|
if(lenA > lenB) |
||||
|
this.target.trigger('targetClassAdded'); |
||||
|
|
||||
|
this.updateStateVis(); |
||||
|
} |
||||
|
} |
||||
|
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, |
||||
|
coll: this.collection, |
||||
|
}); |
||||
|
var rendered = view.render().el; |
||||
|
|
||||
|
if(fragment) |
||||
|
fragment.appendChild(rendered); |
||||
|
else |
||||
|
this.getClasses().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); |
||||
|
|
||||
|
if(this.getClasses()) |
||||
|
this.getClasses().empty().append(fragment); |
||||
|
|
||||
|
return this; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Return classes element |
||||
|
* @return {HTMLElement} |
||||
|
* @private |
||||
|
*/ |
||||
|
getClasses: function() { |
||||
|
if(!this.$classes) |
||||
|
this.$classes = this.$el.find('#' + this.pfx + 'tags-c'); |
||||
|
return this.$classes; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Return states element |
||||
|
* @return {HTMLElement} |
||||
|
* @private |
||||
|
*/ |
||||
|
getStates: function() { |
||||
|
if(!this.$states) |
||||
|
this.$states = this.$el.find('#' + this.stateInputId); |
||||
|
return this.$states; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Return states container element |
||||
|
* @return {HTMLElement} |
||||
|
* @private |
||||
|
*/ |
||||
|
getStatesC: function() { |
||||
|
if(!this.$statesC) |
||||
|
this.$statesC = this.$el.find('#' + this.stateInputC); |
||||
|
return this.$statesC; |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
/** @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.$states = this.$el.find('#' + this.stateInputId); |
||||
|
this.$statesC = this.$el.find('#' + this.stateInputC); |
||||
|
this.$states.append(this.getStateOptions()); |
||||
|
this.renderClasses(); |
||||
|
this.$el.attr('class', this.className); |
||||
|
return this; |
||||
|
}, |
||||
|
|
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,127 @@ |
|||||
|
|
||||
|
define(['GrapesJS', 'SelectorManager/model/Selectors', 'SelectorManager/view/ClassTagsView'], |
||||
|
function(GrapesJS, Selectors, ClassTagsView) { |
||||
|
|
||||
|
return { |
||||
|
run : function(){ |
||||
|
describe('E2E tests', function() { |
||||
|
|
||||
|
/** |
||||
|
* Create tags viewer |
||||
|
* @param {Object} ctx |
||||
|
*/ |
||||
|
var instClassTagViewer = function(ctx){ |
||||
|
var $clm; |
||||
|
var clm = ctx.gjs.editor.get('SelectorManager'); |
||||
|
if(clm){ |
||||
|
$clm = new ClassTagsView({ |
||||
|
collection: new Selectors([]), |
||||
|
config: { |
||||
|
em: ctx.gjs.editor |
||||
|
}, |
||||
|
}).render(); |
||||
|
ctx.$fixture.append($clm.el); |
||||
|
} |
||||
|
return $clm; |
||||
|
}; |
||||
|
|
||||
|
before(function () { |
||||
|
this.$fixtures = $("#fixtures"); |
||||
|
this.$fixture = $('<div id="SelectorManager-fixture"></div>'); |
||||
|
}); |
||||
|
|
||||
|
beforeEach(function () { |
||||
|
this.gjs = GrapesJS.init({ |
||||
|
stylePrefix: '', |
||||
|
storage: { autoload: 0, type:'none' }, |
||||
|
assetManager: { |
||||
|
storageType: 'none', |
||||
|
}, |
||||
|
container: '#SelectorManager-fixture', |
||||
|
}); |
||||
|
this.$fixture.empty().appendTo(this.$fixtures); |
||||
|
this.gjs.render(); |
||||
|
}); |
||||
|
|
||||
|
afterEach(function () { |
||||
|
delete this.gjs; |
||||
|
}); |
||||
|
|
||||
|
after(function () { |
||||
|
this.$fixture.remove(); |
||||
|
}); |
||||
|
|
||||
|
describe('Interaction with Components', function() { |
||||
|
|
||||
|
beforeEach(function () { |
||||
|
this.wrapper = this.gjs.editor.get('Components').getWrapper().get('components'); |
||||
|
this.$clm = instClassTagViewer(this); |
||||
|
}); |
||||
|
|
||||
|
afterEach(function () { |
||||
|
delete this.wrapper; |
||||
|
delete this.$clm; |
||||
|
}); |
||||
|
|
||||
|
it('Assign correctly new class to component', function() { |
||||
|
var model = this.wrapper.add({}); |
||||
|
model.get('classes').length.should.equal(0); |
||||
|
this.gjs.editor.set('selectedComponent', model); |
||||
|
this.$clm.addNewTag('test'); |
||||
|
model.get('classes').length.should.equal(1); |
||||
|
model.get('classes').at(0).get('name').should.equal('test'); |
||||
|
}); |
||||
|
|
||||
|
it('Classes from components are correctly imported inside main container', function() { |
||||
|
var model = this.wrapper.add([ |
||||
|
{ classes: ['test11', 'test12', 'test13'] }, |
||||
|
{ classes: ['test11', 'test22', 'test22'] }, |
||||
|
]); |
||||
|
this.gjs.editor.get('SelectorManager').getAll().length.should.equal(4); |
||||
|
}); |
||||
|
|
||||
|
it('Class imported into component is the same model from main container', function() { |
||||
|
var model = this.wrapper.add({ classes: ['test1'] }); |
||||
|
var clModel = model.get('classes').at(0); |
||||
|
var clModel2 = this.gjs.editor.get('SelectorManager').getAll().at(0); |
||||
|
clModel.should.deep.equal(clModel2); |
||||
|
}); |
||||
|
|
||||
|
it('Can assign only one time the same class on selected component and the class viewer', function() { |
||||
|
var model = this.wrapper.add({}); |
||||
|
this.gjs.editor.set('selectedComponent', model); |
||||
|
this.$clm.addNewTag('test'); |
||||
|
this.$clm.addNewTag('test'); |
||||
|
model.get('classes').length.should.equal(1); |
||||
|
model.get('classes').at(0).get('name').should.equal('test'); |
||||
|
this.$clm.collection.length.should.equal(1); |
||||
|
this.$clm.collection.at(0).get('name').should.equal('test'); |
||||
|
}); |
||||
|
|
||||
|
it('Removing from container removes also from selected component', function() { |
||||
|
var model = this.wrapper.add({}); |
||||
|
this.gjs.editor.set('selectedComponent', model); |
||||
|
this.$clm.addNewTag('test'); |
||||
|
this.$clm.getClasses().find('.tag #close').trigger('click') |
||||
|
model.get('classes').length.should.equal(0); |
||||
|
}); |
||||
|
|
||||
|
it("Trigger correctly event on target with new class add", function() { |
||||
|
var spy = sinon.spy(); |
||||
|
var model = this.wrapper.add({}); |
||||
|
this.gjs.editor.set('selectedComponent', model); |
||||
|
this.$clm.addNewTag('test'); |
||||
|
this.gjs.editor.on("targetClassAdded", spy); |
||||
|
this.$clm.addNewTag('test'); |
||||
|
spy.called.should.equal(false); |
||||
|
this.$clm.addNewTag('test2'); |
||||
|
spy.called.should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
}); |
||||
@ -0,0 +1,94 @@ |
|||||
|
var modulePath = './../../../test/specs/selector_manager'; |
||||
|
|
||||
|
define([ |
||||
|
'SelectorManager', |
||||
|
modulePath + '/model/SelectorModels', |
||||
|
modulePath + '/view/ClassTagView', |
||||
|
modulePath + '/view/ClassTagsView', |
||||
|
modulePath + '/e2e/ClassManager' |
||||
|
], |
||||
|
function( |
||||
|
SelectorManager, |
||||
|
Models, |
||||
|
ClassTagView, |
||||
|
ClassTagsView, |
||||
|
e2e |
||||
|
) { |
||||
|
|
||||
|
describe('SelectorManager', function() { |
||||
|
|
||||
|
describe('Main', function() { |
||||
|
|
||||
|
var obj; |
||||
|
|
||||
|
beforeEach(function () { |
||||
|
obj = new SelectorManager().init(); |
||||
|
}); |
||||
|
|
||||
|
afterEach(function () { |
||||
|
delete obj; |
||||
|
}); |
||||
|
|
||||
|
it('Object exists', function() { |
||||
|
obj.should.be.exist; |
||||
|
}); |
||||
|
|
||||
|
it('No selectors inside', function() { |
||||
|
obj.getAll().length.should.equal(0); |
||||
|
}); |
||||
|
|
||||
|
it('Able to add default selectors', function() { |
||||
|
var cm = new SelectorManager().init({ |
||||
|
selectors: ['test1', 'test2', 'test3'], |
||||
|
}); |
||||
|
cm.getAll().length.should.equal(3); |
||||
|
}); |
||||
|
|
||||
|
it('Add new selector', function() { |
||||
|
obj.add('test'); |
||||
|
obj.getAll().length.should.equal(1); |
||||
|
}); |
||||
|
|
||||
|
it('Default new selector is a class type', function() { |
||||
|
obj.add('test'); |
||||
|
obj.get('test').get('type').should.equal('class'); |
||||
|
}); |
||||
|
|
||||
|
it('Check name property', function() { |
||||
|
var name = 'test'; |
||||
|
var sel = obj.add(name); |
||||
|
sel.get('name').should.equal(name); |
||||
|
sel.get('label').should.equal(name); |
||||
|
}); |
||||
|
|
||||
|
it('Add 2 selectors', function() { |
||||
|
obj.add('test'); |
||||
|
obj.add('test2'); |
||||
|
obj.getAll().length.should.equal(2); |
||||
|
}); |
||||
|
|
||||
|
it('Adding 2 selectors with the same name is not possible', function() { |
||||
|
obj.add('test'); |
||||
|
obj.add('test'); |
||||
|
obj.getAll().length.should.equal(1); |
||||
|
}); |
||||
|
|
||||
|
it('Get selector', function() { |
||||
|
var name = 'test'; |
||||
|
var sel = obj.add(name); |
||||
|
obj.get(name).should.deep.equal(sel); |
||||
|
}); |
||||
|
|
||||
|
it('Get empty class', function() { |
||||
|
(obj.get('test') === undefined).should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
Models.run(); |
||||
|
ClassTagView.run(); |
||||
|
ClassTagsView.run(); |
||||
|
e2e.run(); |
||||
|
|
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,53 @@ |
|||||
|
var path = 'SelectorManager/model/'; |
||||
|
define([path + 'Selector', |
||||
|
path + 'Selectors'], |
||||
|
function(Selector, Selectors) { |
||||
|
|
||||
|
return { |
||||
|
run : function(){ |
||||
|
describe('Selector', function() { |
||||
|
|
||||
|
beforeEach(function () { |
||||
|
this.obj = new Selector(); |
||||
|
}); |
||||
|
|
||||
|
afterEach(function () { |
||||
|
delete this.obj; |
||||
|
}); |
||||
|
|
||||
|
it('Has name property', function() { |
||||
|
this.obj.has('name').should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it('Has label property', function() { |
||||
|
this.obj.has('label').should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it('Has active property', function() { |
||||
|
this.obj.has('active').should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it('escapeName test', function() { |
||||
|
this.obj.escapeName('@Te sT*').should.equal('-te-st-'); |
||||
|
}); |
||||
|
|
||||
|
it('Name is corrected at instantiation', function() { |
||||
|
this.obj = new Selector({ name: '@Te sT*'}); |
||||
|
this.obj.get('name').should.equal('-te-st-'); |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
}); |
||||
|
describe('Selectors', function() { |
||||
|
|
||||
|
it('Creates collection item correctly', function() { |
||||
|
var c = new Selectors(); |
||||
|
var m = c.add({}); |
||||
|
m.should.be.an.instanceOf(Selector); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
}); |
||||
@ -0,0 +1,132 @@ |
|||||
|
var path = 'SelectorManager/view/'; |
||||
|
define([path + 'ClassTagView', 'SelectorManager/model/Selectors'], |
||||
|
function(ClassTagView, Selectors) { |
||||
|
|
||||
|
return { |
||||
|
run : function(){ |
||||
|
describe('ClassTagView', function() { |
||||
|
|
||||
|
var obj; |
||||
|
var fixture; |
||||
|
var fixtures; |
||||
|
var testLabel; |
||||
|
var coll; |
||||
|
|
||||
|
before(function () { |
||||
|
fixtures = $("#fixtures"); |
||||
|
fixture = $('<div class="classtag-fixture"></div>'); |
||||
|
}); |
||||
|
|
||||
|
beforeEach(function () { |
||||
|
coll = new Selectors(); |
||||
|
testLabel = 'TestLabel'; |
||||
|
var model = coll.add({ |
||||
|
name: 'test', |
||||
|
label: testLabel, |
||||
|
}); |
||||
|
obj = new ClassTagView({ |
||||
|
config : {}, |
||||
|
model: model, |
||||
|
coll: coll |
||||
|
}); |
||||
|
obj.target = { get:function(){} }; |
||||
|
_.extend(obj.target, Backbone.Events); |
||||
|
fixture.empty().appendTo(fixtures); |
||||
|
fixture.html(obj.render().el); |
||||
|
}); |
||||
|
|
||||
|
afterEach(function () { |
||||
|
delete obj.model; |
||||
|
}); |
||||
|
|
||||
|
after(function () { |
||||
|
fixture.remove(); |
||||
|
}); |
||||
|
|
||||
|
it('Object exists', function() { |
||||
|
ClassTagView.should.be.exist; |
||||
|
}); |
||||
|
|
||||
|
it('Not empty', function() { |
||||
|
var $el = obj.$el; |
||||
|
$el.html().should.not.be.empty; |
||||
|
}); |
||||
|
|
||||
|
it('Not empty', function() { |
||||
|
var $el = obj.$el; |
||||
|
$el.html().should.contain(testLabel); |
||||
|
}); |
||||
|
|
||||
|
describe('Should be rendered correctly', function() { |
||||
|
|
||||
|
it('Has close button', function() { |
||||
|
var $el = obj.$el; |
||||
|
$el.find('#close').should.have.property(0); |
||||
|
}); |
||||
|
it('Has checkbox', function() { |
||||
|
var $el = obj.$el; |
||||
|
$el.find('#checkbox').should.have.property(0); |
||||
|
}); |
||||
|
it('Has label', function() { |
||||
|
var $el = obj.$el; |
||||
|
$el.find('#tag-label').should.have.property(0); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
it('Could be removed', function() { |
||||
|
var spy = sinon.spy(); |
||||
|
obj.config.target = { get:function(){} }; |
||||
|
sinon.stub(obj.config.target, 'get').returns(0); |
||||
|
obj.$el.find('#close').trigger('click'); |
||||
|
fixture.html().should.be.empty; |
||||
|
}); |
||||
|
|
||||
|
it('On remove triggers event', function() { |
||||
|
var spy = sinon.spy(); |
||||
|
sinon.stub(obj.target, 'get').returns(0); |
||||
|
obj.target.on("targetClassRemoved", spy); |
||||
|
obj.$el.find('#close').trigger('click'); |
||||
|
spy.called.should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it('Checkbox toggles status', function() { |
||||
|
var spy = sinon.spy(); |
||||
|
obj.model.on("change:active", spy); |
||||
|
obj.model.set('active', true); |
||||
|
obj.$el.find('#checkbox').trigger('click'); |
||||
|
obj.model.get('active').should.equal(false); |
||||
|
spy.called.should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it('On toggle triggers event', function() { |
||||
|
var spy = sinon.spy(); |
||||
|
sinon.stub(obj.target, 'get').returns(0); |
||||
|
obj.target.on("targetClassUpdated", spy); |
||||
|
obj.$el.find('#checkbox').trigger('click'); |
||||
|
spy.called.should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it('Label input is disabled', function() { |
||||
|
var inputProp = obj.inputProp; |
||||
|
obj.$labelInput.prop(inputProp).should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it('On double click label input is enable', function() { |
||||
|
var inputProp = obj.inputProp; |
||||
|
obj.$el.find('#tag-label').trigger('dblclick'); |
||||
|
obj.$labelInput.prop(inputProp).should.equal(false); |
||||
|
}); |
||||
|
|
||||
|
it('On blur label input turns back disabled', function() { |
||||
|
var inputProp = obj.inputProp; |
||||
|
obj.$el.find('#tag-label').trigger('dblclick'); |
||||
|
obj.endEditTag(); |
||||
|
obj.$labelInput.prop(inputProp).should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
}); |
||||
@ -0,0 +1,195 @@ |
|||||
|
var path = 'SelectorManager/view/'; |
||||
|
define([path + 'ClassTagsView', 'SelectorManager/model/Selectors'], |
||||
|
function(ClassTagsView, Selectors) { |
||||
|
|
||||
|
return { |
||||
|
run : function(){ |
||||
|
describe('ClassTagsView', function() { |
||||
|
|
||||
|
var view; |
||||
|
var fixture; |
||||
|
var fixtures; |
||||
|
var testLabel; |
||||
|
var coll; |
||||
|
var target; |
||||
|
|
||||
|
before(function () { |
||||
|
fixtures = $("#fixtures"); |
||||
|
fixture = $('<div class="classtag-fixture"></div>'); |
||||
|
}); |
||||
|
|
||||
|
beforeEach(function () { |
||||
|
target = { get: function(){} }; |
||||
|
coll = new Selectors(); |
||||
|
_.extend(target, Backbone.Events); |
||||
|
|
||||
|
view = new ClassTagsView({ |
||||
|
config : { em: target }, |
||||
|
collection: coll |
||||
|
}); |
||||
|
|
||||
|
this.targetStub = { |
||||
|
add: function(v){ return {name: v}; } |
||||
|
}; |
||||
|
|
||||
|
this.compTargetStub = { |
||||
|
get: function(){ return { add: function(){} }} |
||||
|
}; |
||||
|
|
||||
|
fixture.empty().appendTo(fixtures); |
||||
|
fixture.html(view.render().el); |
||||
|
this.btnAdd = view.$el.find('#' + view.addBtnId); |
||||
|
this.input = view.$el.find('input#' + view.newInputId); |
||||
|
this.$tags = fixture.find('#tags-c'); |
||||
|
this.$states = fixture.find('#states'); |
||||
|
this.$statesC = fixture.find('#input-c'); |
||||
|
}); |
||||
|
|
||||
|
afterEach(function () { |
||||
|
delete view.collection; |
||||
|
}); |
||||
|
|
||||
|
after(function () { |
||||
|
fixture.remove(); |
||||
|
}); |
||||
|
|
||||
|
it('Object exists', function() { |
||||
|
ClassTagsView.should.be.exist; |
||||
|
}); |
||||
|
|
||||
|
it('Not tags inside', function() { |
||||
|
this.$tags.html().should.equal(''); |
||||
|
}); |
||||
|
|
||||
|
it('Add new tag triggers correct method', function() { |
||||
|
sinon.stub(view, "addToClasses"); |
||||
|
coll.add({ name: 'test' }); |
||||
|
view.addToClasses.calledOnce.should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it('Start new tag creation', function() { |
||||
|
this.btnAdd.click(); |
||||
|
(this.btnAdd.css('display') == 'none').should.equal(true); |
||||
|
(this.input.css('display') !== 'none').should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it('Stop tag creation', function() { |
||||
|
this.btnAdd.click(); |
||||
|
this.input.val('test') |
||||
|
this.input.blur(); |
||||
|
(this.btnAdd.css('display') !== 'none').should.equal(true); |
||||
|
(this.input.css('display') == 'none').should.equal(true); |
||||
|
this.input.val().should.equal(''); |
||||
|
}); |
||||
|
|
||||
|
it('Check keyup of ESC on input', function() { |
||||
|
this.btnAdd.click(); |
||||
|
sinon.stub(view, "addNewTag"); |
||||
|
this.input.trigger({ |
||||
|
type: 'keyup', |
||||
|
keyCode: 13 |
||||
|
}); |
||||
|
view.addNewTag.calledOnce.should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it('Check keyup on ENTER on input', function() { |
||||
|
this.btnAdd.click(); |
||||
|
sinon.stub(view, "endNewTag"); |
||||
|
this.input.trigger({ |
||||
|
type: 'keyup', |
||||
|
keyCode: 27 |
||||
|
}); |
||||
|
view.endNewTag.calledOnce.should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it('Collection changes on update of target', function() { |
||||
|
coll.add({ name: 'test' }); |
||||
|
target.trigger('change:selectedComponent'); |
||||
|
coll.length.should.equal(0); |
||||
|
}); |
||||
|
|
||||
|
it('Collection reacts on reset', function() { |
||||
|
coll.add([{ name: 'test1' }, { name: 'test2' }]); |
||||
|
sinon.stub(view, "addToClasses"); |
||||
|
coll.trigger('reset'); |
||||
|
view.addToClasses.calledTwice.should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it("Don't accept empty tags", function() { |
||||
|
view.addNewTag(''); |
||||
|
this.$tags.html().should.equal(''); |
||||
|
}); |
||||
|
|
||||
|
it("Accept new tags", function() { |
||||
|
sinon.stub(target, "get").returns(this.targetStub); |
||||
|
view.compTarget = this.compTargetStub; |
||||
|
view.addNewTag('test'); |
||||
|
view.compTarget = this.compTargetStub; |
||||
|
view.addNewTag('test2'); |
||||
|
this.$tags.children().length.should.equal(2); |
||||
|
}); |
||||
|
|
||||
|
it("New tag correctly added", function() { |
||||
|
coll.add({ label: 'test' }); |
||||
|
this.$tags.children().first().find('#tag-label input').val().should.equal('test'); |
||||
|
}); |
||||
|
|
||||
|
it("States are hidden in case no tags", function() { |
||||
|
view.updateStateVis(); |
||||
|
this.$statesC.css('display').should.equal('none'); |
||||
|
}); |
||||
|
|
||||
|
it("States are visible in case of more tags inside", function() { |
||||
|
coll.add({ label: 'test' }); |
||||
|
view.updateStateVis(); |
||||
|
this.$statesC.css('display').should.equal('block'); |
||||
|
}); |
||||
|
|
||||
|
it("Update state visibility on new tag", function() { |
||||
|
sinon.stub(view, "updateStateVis"); |
||||
|
sinon.stub(target, "get").returns(this.targetStub); |
||||
|
view.compTarget = this.compTargetStub; |
||||
|
view.addNewTag('test'); |
||||
|
view.updateStateVis.called.should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it("Update state visibility on removing of the tag", function() { |
||||
|
sinon.stub(target, "get").returns(this.targetStub); |
||||
|
view.compTarget = this.compTargetStub; |
||||
|
view.addNewTag('test'); |
||||
|
sinon.stub(view, "updateStateVis"); |
||||
|
coll.remove(coll.at(0)); |
||||
|
view.updateStateVis.calledOnce.should.equal(true); |
||||
|
}); |
||||
|
|
||||
|
it("Output correctly state options", function() { |
||||
|
var view = new ClassTagsView({ |
||||
|
config : { |
||||
|
em: target, |
||||
|
states: [ { name: 'testName', label: 'testLabel' } ], |
||||
|
}, |
||||
|
collection: coll |
||||
|
}); |
||||
|
view.getStateOptions().should.equal('<option value="testName">testLabel</option>'); |
||||
|
}); |
||||
|
|
||||
|
describe('Should be rendered correctly', function() { |
||||
|
it('Has label', function() { |
||||
|
view.$el.find('#label').should.have.property(0); |
||||
|
}); |
||||
|
it('Has tags container', function() { |
||||
|
view.$el.find('#tags-c').should.have.property(0); |
||||
|
}); |
||||
|
it('Has add button', function() { |
||||
|
view.$el.find('#add-tag').should.have.property(0); |
||||
|
}); |
||||
|
it('Has states input', function() { |
||||
|
view.$el.find('#states').should.have.property(0); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
}); |
||||
Loading…
Reference in new issue