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

Merge pull request #3677 from artf/remove-underscore-tmpl. Closes #3558 

Remove underscore template function
pull/3692/head
Artur Arseniev 5 years ago
committed by GitHub
parent
ae1950761e a6c0aa9d93
commit
ce0f7ce6ee
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 128 additions and 109 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. 4
      dist/grapes.min.js
  2. 2
      dist/grapes.min.js.map
  3. 2
      package.json
  4. 25
      src/asset_manager/view/FileUploader.js
  5. 52
      src/block_manager/view/CategoryView.js
  6. 34
      src/code_manager/view/EditorView.js
  7. 57
      src/device_manager/view/DevicesView.js
  8. 61
      src/style_manager/view/SectorView.js

4
dist/grapes.min.js
View File

File diff suppressed because one or more lines are too long

2
dist/grapes.min.js.map
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "grapesjs", "name": "grapesjs",
"description": "Free and Open Source Web Builder Framework", "description": "Free and Open Source Web Builder Framework",
"version": "0.17.23", "version": "0.17.24",
"author": "Artur Arseniev", "author": "Artur Arseniev",
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"homepage": "http://grapesjs.com", "homepage": "http://grapesjs.com",

25
src/asset_manager/view/FileUploader.js
View File

@ -1,16 +1,25 @@
import { template } from 'underscore';
import Backbone from 'backbone'; import Backbone from 'backbone';
import fetch from 'utils/fetch'; import fetch from 'utils/fetch';
import html from 'utils/html';
export default Backbone.View.extend( export default Backbone.View.extend(
{ {
template: template(` template({ pfx, title, uploadId, disabled, multiUpload }) {
<form> return html`
<div id="<%= pfx %>title"><%= title %></div> <form>
<input type="file" id="<%= uploadId %>" name="file" accept="*/*" <%= disabled ? 'disabled' : '' %> <%= multiUpload ? 'multiple' : '' %>/> <div id="${pfx}title">${title}</div>
<div style="clear:both;"></div> <input
</form> type="file"
`), id="${uploadId}"
name="file"
accept="*/*"
${disabled ? 'disabled' : ''}
${multiUpload ? 'multiple' : ''}
/>
<div style="clear:both;"></div>
</form>
`;
},
events: {}, events: {},

52
src/block_manager/view/CategoryView.js
View File

@ -1,20 +1,20 @@
import { template } from 'underscore'; import { View } from 'backbone';
import Backbone from 'backbone'; import html from 'utils/html';
export default Backbone.View.extend({ export default class CategoryView extends View {
template: template(` template({ pfx, label }) {
<div class="<%= pfx %>title"> return html`
<i class="<%= pfx %>caret-icon"></i> <div class="${pfx}title">
<%= label %> <i class="${pfx}caret-icon"></i>
</div> ${label}
<div class="<%= pfx %>blocks-c"></div> </div>
`), <div class="${pfx}blocks-c"></div>
`;
events: {}, }
attributes() { attributes() {
return this.model.get('attributes'); return this.model.get('attributes');
}, }
initialize(o = {}, config = {}) { initialize(o = {}, config = {}) {
this.config = config; this.config = config;
@ -26,33 +26,34 @@ export default Backbone.View.extend({
this.iconClass = `${pfx}caret-icon`; this.iconClass = `${pfx}caret-icon`;
this.activeClass = `${pfx}open`; this.activeClass = `${pfx}open`;
this.className = `${pfx}block-category`; this.className = `${pfx}block-category`;
this.events = {};
this.events[`click .${pfx}title`] = 'toggle'; this.events[`click .${pfx}title`] = 'toggle';
this.listenTo(this.model, 'change:open', this.updateVisibility); this.listenTo(this.model, 'change:open', this.updateVisibility);
this.delegateEvents(); this.delegateEvents();
this.model.view = this; this.model.view = this;
}, }
updateVisibility() { updateVisibility() {
if (this.model.get('open')) this.open(); if (this.model.get('open')) this.open();
else this.close(); else this.close();
}, }
open() { open() {
this.$el.addClass(this.activeClass); this.$el.addClass(this.activeClass);
this.getIconEl().className = `${this.iconClass} ${this.caretD}`; this.getIconEl().className = `${this.iconClass} ${this.caretD}`;
this.getBlocksEl().style.display = ''; this.getBlocksEl().style.display = '';
}, }
close() { close() {
this.$el.removeClass(this.activeClass); this.$el.removeClass(this.activeClass);
this.getIconEl().className = `${this.iconClass} ${this.caretR}`; this.getIconEl().className = `${this.iconClass} ${this.caretR}`;
this.getBlocksEl().style.display = 'none'; this.getBlocksEl().style.display = 'none';
}, }
toggle() { toggle() {
var model = this.model; var model = this.model;
model.set('open', !model.get('open')); model.set('open', !model.get('open'));
}, }
getIconEl() { getIconEl() {
if (!this.iconEl) { if (!this.iconEl) {
@ -60,7 +61,7 @@ export default Backbone.View.extend({
} }
return this.iconEl; return this.iconEl;
}, }
getBlocksEl() { getBlocksEl() {
if (!this.blocksEl) { if (!this.blocksEl) {
@ -68,24 +69,21 @@ export default Backbone.View.extend({
} }
return this.blocksEl; return this.blocksEl;
}, }
append(el) { append(el) {
this.getBlocksEl().appendChild(el); this.getBlocksEl().appendChild(el);
}, }
render() { render() {
const { em, el, $el, model } = this; const { em, el, $el, model, pfx } = this;
const label = const label =
em.t(`blockManager.categories.${model.id}`) || model.get('label'); em.t(`blockManager.categories.${model.id}`) || model.get('label');
el.innerHTML = this.template({ el.innerHTML = this.template({ pfx, label });
pfx: this.pfx,
label
});
$el.addClass(this.className); $el.addClass(this.className);
$el.css({ order: model.get('order') }); $el.css({ order: model.get('order') });
this.updateVisibility(); this.updateVisibility();
return this; return this;
} }
}); }

34
src/code_manager/view/EditorView.js
View File

@ -1,24 +1,28 @@
import { template } from 'underscore'; import html from 'utils/html';
import Backbone from 'backbone'; import { View } from 'backbone';
export default Backbone.View.extend({ export default class EditorView extends View {
template: template(` template({ pfx, codeName, label }) {
<div class="<%= pfx %>editor" id="<%= pfx %><%= codeName %>"> return html`
<div id="<%= pfx %>title"><%= label %></div> <div class="${pfx}editor" id="${pfx}${codeName}">
<div id="<%= pfx %>code"></div> <div id="${pfx}title">${label}</div>
</div>`), <div id="${pfx}code"></div>
</div>
`;
}
initialize(o) { initialize(o) {
this.config = o.config || {}; this.config = o.config || {};
this.pfx = this.config.stylePrefix; this.pfx = this.config.stylePrefix;
}, }
render() { render() {
var obj = this.model.toJSON(); const { model, pfx, $el } = this;
obj.pfx = this.pfx; const obj = model.toJSON();
this.$el.html(this.template(obj)); obj.pfx = pfx;
this.$el.attr('class', this.pfx + 'editor-c'); $el.html(this.template(obj));
this.$el.find('#' + this.pfx + 'code').append(this.model.get('input')); $el.attr('class', `${pfx}editor-c`);
$el.find(`#${pfx}code`).append(model.get('input'));
return this; return this;
} }
}); }

57
src/device_manager/view/DevicesView.js
View File

@ -1,22 +1,27 @@
import { template } from 'underscore'; import { View } from 'backbone';
import Backbone from 'backbone'; import html from 'utils/html';
export default Backbone.View.extend({ export default class DevicesView extends View {
template: template(` template({ ppfx, label }) {
<div class="<%= ppfx %>device-label"><%= deviceLabel %></div> return html`
<div class="<%= ppfx %>field <%= ppfx %>select"> <div class="${ppfx}device-label">${label}</div>
<span id="<%= ppfx %>input-holder"> <div class="${ppfx}field ${ppfx}select">
<select class="<%= ppfx %>devices"></select> <span id="${ppfx}input-holder">
</span> <select class="${ppfx}devices"></select>
<div class="<%= ppfx %>sel-arrow"> </span>
<div class="<%= ppfx %>d-s-arrow"></div> <div class="${ppfx}sel-arrow">
<div class="${ppfx}d-s-arrow"></div>
</div>
</div> </div>
</div> <button style="display:none" class="${ppfx}add-trasp">+</button>
<button style="display:none" class="<%= ppfx %>add-trasp">+</button>`), `;
}
events: { events() {
change: 'updateDevice' return {
}, change: 'updateDevice'
};
}
initialize(o) { initialize(o) {
this.config = o.config || {}; this.config = o.config || {};
@ -25,14 +30,14 @@ export default Backbone.View.extend({
this.events['click .' + this.ppfx + 'add-trasp'] = this.startAdd; this.events['click .' + this.ppfx + 'add-trasp'] = this.startAdd;
this.listenTo(this.em, 'change:device', this.updateSelect); this.listenTo(this.em, 'change:device', this.updateSelect);
this.delegateEvents(); this.delegateEvents();
}, }
/** /**
* Start adding new device * Start adding new device
* @return {[type]} [description] * @return {[type]} [description]
* @private * @private
*/ */
startAdd() {}, startAdd() {}
/** /**
* Update device of the editor * Update device of the editor
@ -45,7 +50,7 @@ export default Backbone.View.extend({
var val = devEl ? devEl.val() : ''; var val = devEl ? devEl.val() : '';
em.set('device', val); em.set('device', val);
} }
}, }
/** /**
* Update select value on device update * Update select value on device update
@ -59,7 +64,7 @@ export default Backbone.View.extend({
var name = device ? device.get('name') : ''; var name = device ? device.get('name') : '';
devEl.val(name); devEl.val(name);
} }
}, }
/** /**
* Return devices options * Return devices options
@ -77,19 +82,15 @@ export default Backbone.View.extend({
}); });
return result; return result;
}, }
render() { render() {
const { em, ppfx, $el, el } = this; const { em, ppfx, $el, el } = this;
$el.html( const label = em && em.t && em.t('deviceManager.device');
this.template({ $el.html(this.template({ ppfx, label }));
ppfx,
deviceLabel: em && em.t && em.t('deviceManager.device')
})
);
this.devicesEl = $el.find(`.${ppfx}devices`); this.devicesEl = $el.find(`.${ppfx}devices`);
this.devicesEl.append(this.getOptions()); this.devicesEl.append(this.getOptions());
el.className = `${ppfx}devices-c`; el.className = `${ppfx}devices-c`;
return this; return this;
} }
}); }

61
src/style_manager/view/SectorView.js
View File

@ -1,17 +1,22 @@
import Backbone from 'backbone'; import { View } from 'backbone';
import { template } from 'underscore'; import html from 'utils/html';
import PropertiesView from './PropertiesView'; import PropertiesView from './PropertiesView';
export default Backbone.View.extend({ export default class SectorView extends View {
template: template(` template({ pfx, label }) {
<div class="<%= pfx %>title" data-sector-title> return html`
<i id="<%= pfx %>caret" class="fa"></i> <div class="${pfx}title" data-sector-title>
<%= label %> <i id="${pfx}caret" class="fa"></i>
</div>`), ${label}
</div>
`;
}
events: { events() {
'click [data-sector-title]': 'toggle' return {
}, 'click [data-sector-title]': 'toggle'
};
}
initialize(o) { initialize(o) {
this.config = o.config || {}; this.config = o.config || {};
@ -25,7 +30,7 @@ export default Backbone.View.extend({
this.listenTo(model, 'change:open', this.updateOpen); this.listenTo(model, 'change:open', this.updateOpen);
this.listenTo(model, 'updateVisibility', this.updateVisibility); this.listenTo(model, 'updateVisibility', this.updateVisibility);
this.listenTo(model, 'destroy remove', this.remove); this.listenTo(model, 'destroy remove', this.remove);
}, }
/** /**
* If all properties are hidden this will hide the sector * If all properties are hidden this will hide the sector
@ -38,7 +43,7 @@ export default Backbone.View.extend({
} }
}); });
this.el.style.display = show ? '' : 'none'; this.el.style.display = show ? '' : 'none';
}, }
/** /**
* Update visibility * Update visibility
@ -46,7 +51,7 @@ export default Backbone.View.extend({
updateOpen() { updateOpen() {
if (this.model.get('open')) this.show(); if (this.model.get('open')) this.show();
else this.hide(); else this.hide();
}, }
/** /**
* Show the content of the sector * Show the content of the sector
@ -55,7 +60,7 @@ export default Backbone.View.extend({
this.$el.addClass(this.pfx + 'open'); this.$el.addClass(this.pfx + 'open');
this.getPropertiesEl().style.display = ''; this.getPropertiesEl().style.display = '';
this.$caret.removeClass(this.caretR).addClass(this.caretD); this.$caret.removeClass(this.caretR).addClass(this.caretD);
}, }
/** /**
* Hide the content of the sector * Hide the content of the sector
@ -64,19 +69,20 @@ export default Backbone.View.extend({
this.$el.removeClass(this.pfx + 'open'); this.$el.removeClass(this.pfx + 'open');
this.getPropertiesEl().style.display = 'none'; this.getPropertiesEl().style.display = 'none';
this.$caret.removeClass(this.caretD).addClass(this.caretR); this.$caret.removeClass(this.caretD).addClass(this.caretR);
}, }
getPropertiesEl() { getPropertiesEl() {
return this.$el.find(`.${this.pfx}properties`).get(0); return this.$el.find(`.${this.pfx}properties`).get(0);
}, }
/** /**
* Toggle visibility * Toggle visibility
* */ * */
toggle(e) { toggle(e) {
var v = this.model.get('open') ? 0 : 1; const { model } = this;
this.model.set('open', v); const v = model.get('open') ? 0 : 1;
}, model.set('open', v);
}
render() { render() {
const { pfx, model, em, $el } = this; const { pfx, model, em, $el } = this;
@ -88,19 +94,20 @@ export default Backbone.View.extend({
$el.attr('class', `${pfx}sector ${pfx}sector__${id} no-select`); $el.attr('class', `${pfx}sector ${pfx}sector__${id} no-select`);
this.updateOpen(); this.updateOpen();
return this; return this;
}, }
renderProperties() { renderProperties() {
var objs = this.model.get('properties'); const { model, target, propTarget, config } = this;
const objs = model.get('properties');
if (objs) { if (objs) {
var view = new PropertiesView({ const view = new PropertiesView({
collection: objs, collection: objs,
target: this.target, target,
propTarget: this.propTarget, propTarget,
config: this.config config
}); });
this.$el.append(view.render().el); this.$el.append(view.render().el);
} }
} }
}); }

Write Preview
Loading…
Cancel
Save