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
Split 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",
"description": "Free and Open Source Web Builder Framework",
"version": "0.17.23",
"version": "0.17.24",
"author": "Artur Arseniev",
"license": "BSD-3-Clause",
"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 fetch from 'utils/fetch';
import html from 'utils/html';
export default Backbone.View.extend(
{
template: template(`
<form>
<div id="<%= pfx %>title"><%= title %></div>
<input type="file" id="<%= uploadId %>" name="file" accept="*/*" <%= disabled ? 'disabled' : '' %> <%= multiUpload ? 'multiple' : '' %>/>
<div style="clear:both;"></div>
</form>
`),
template({ pfx, title, uploadId, disabled, multiUpload }) {
return html`
<form>
<div id="${pfx}title">${title}</div>
<input
type="file"
id="${uploadId}"
name="file"
accept="*/*"
${disabled ? 'disabled' : ''}
${multiUpload ? 'multiple' : ''}
/>
<div style="clear:both;"></div>
</form>
`;
},
events: {},

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save