mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
9 years ago
committed by
GitHub
GitHub
114 changed files with 5317 additions and 3386 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,13 +1,12 @@ |
|||
var Backbone = require('backbone'); |
|||
var Asset = require('./Asset'); |
|||
const Asset = require('./Asset'); |
|||
|
|||
module.exports = Asset.extend({ |
|||
|
|||
defaults: _.extend({}, Asset.prototype.defaults, { |
|||
type: 'image', |
|||
unitDim: 'px', |
|||
height: 0, |
|||
width: 0, |
|||
defaults: Object.assign({}, Asset.prototype.defaults, { |
|||
type: 'image', |
|||
unitDim: 'px', |
|||
height: 0, |
|||
width: 0, |
|||
}), |
|||
|
|||
}); |
|||
|
|||
@ -1,68 +1,18 @@ |
|||
var Backbone = require('backbone'); |
|||
var Asset = require('./Asset'); |
|||
var AssetImage = require('./AssetImage'); |
|||
|
|||
module.exports = Backbone.Collection.extend({ |
|||
|
|||
model: AssetImage, |
|||
|
|||
initialize(models, opt) { |
|||
|
|||
this.model = (attrs, options) => { |
|||
var model; |
|||
switch(attrs.type){ |
|||
default: |
|||
model = new AssetImage(attrs, options); |
|||
import TypeableCollection from 'domain_abstract/model/TypeableCollection'; |
|||
|
|||
module.exports = require('backbone').Collection.extend(TypeableCollection).extend({ |
|||
types: [{ |
|||
id: 'image', |
|||
model: require('./AssetImage'), |
|||
view: require('./../view/AssetImageView'), |
|||
isType(value) { |
|||
if (typeof value == 'string') { |
|||
return { |
|||
type: 'image', |
|||
src: value, |
|||
} |
|||
} |
|||
return value; |
|||
} |
|||
return model; |
|||
}; |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* Add new image asset to the collection |
|||
* @param {string} url URL of the image |
|||
* @param {Object} opts Options |
|||
* @return {this} |
|||
* @private |
|||
*/ |
|||
addImg(url, opts) { |
|||
this.add({ |
|||
type: 'image', |
|||
src: url, |
|||
}, opts); |
|||
return this; |
|||
}, |
|||
|
|||
/** |
|||
* Prevent inserting assets with the same 'src' |
|||
* Seems like idAttribute is not working with dynamic model assignament |
|||
* @private |
|||
*/ |
|||
add(models, opt) { |
|||
var mods = []; |
|||
models = models instanceof Array ? models : [models]; |
|||
|
|||
for (var i = 0, len = models.length; i < len; i++) { |
|||
var model = models[i]; |
|||
|
|||
if(typeof model === 'string') |
|||
model = {src: model, type: 'image'}; |
|||
|
|||
if(!model || !model.src) |
|||
continue; |
|||
|
|||
var found = this.where({src: model.src}); |
|||
|
|||
if(!found.length) |
|||
mods.push(model); |
|||
} |
|||
|
|||
if(mods.length == 1) |
|||
mods = mods[0]; |
|||
|
|||
return Backbone.Collection.prototype.add.apply(this, [mods, opt]); |
|||
}, |
|||
|
|||
|
|||
}] |
|||
}); |
|||
|
|||
@ -1,108 +1,85 @@ |
|||
var AssetView = require('./AssetView'); |
|||
var assetTemplate = ` |
|||
<div id="<%= pfx %>preview-cont"> |
|||
<div id="<%= pfx %>preview" style="background-image: url(<%= src %>);"></div> |
|||
<div id="<%= pfx %>preview-bg" class="<%= ppfx %>checker-bg"></div> |
|||
</div> |
|||
<div id="<%= pfx %>meta"> |
|||
<div id="<%= pfx %>name"><%= name %></div> |
|||
<div id="<%= pfx %>dimensions"><%= dim %></div> |
|||
</div> |
|||
<div id="<%= pfx %>close">⨯</div> |
|||
<div style="clear:both"></div> |
|||
`;
|
|||
module.exports = require('./AssetView').extend({ |
|||
|
|||
module.exports = AssetView.extend({ |
|||
events: { |
|||
click: 'onClick', |
|||
dblclick: 'onDblClick', |
|||
'click [data-toggle=asset-remove]': 'onRemove', |
|||
}, |
|||
|
|||
events:{ |
|||
'click': 'handleClick', |
|||
'dblclick': 'handleDblClick', |
|||
getPreview() { |
|||
const pfx = this.pfx; |
|||
const src = this.model.get('src'); |
|||
return ` |
|||
<div class="${pfx}preview" style="background-image: url(${src});"></div> |
|||
<div class="${pfx}preview-bg ${this.ppfx}checker-bg"></div> |
|||
`;
|
|||
}, |
|||
|
|||
template: _.template(assetTemplate), |
|||
getInfo() { |
|||
const pfx = this.pfx; |
|||
const model = this.model; |
|||
let name = model.get('name'); |
|||
let width = model.get('width'); |
|||
let height = model.get('height'); |
|||
let unit = model.get('unitDim'); |
|||
let dim = width && height ? `${width}x${height}${unit}` : ''; |
|||
name = name || model.getFilename(); |
|||
return ` |
|||
<div class="${pfx}name">${name}</div> |
|||
<div class="${pfx}dimensions">${dim}</div> |
|||
`;
|
|||
}, |
|||
|
|||
initialize(o) { |
|||
AssetView.prototype.initialize.apply(this, arguments); |
|||
this.className += ' ' + this.pfx + 'asset-image'; |
|||
this.events['click #' + this.pfx + 'close'] = 'removeItem'; |
|||
this.delegateEvents(); |
|||
init(o) { |
|||
const pfx = this.pfx; |
|||
this.className += ` ${pfx}asset-image`; |
|||
}, |
|||
|
|||
/** |
|||
* Trigger when the asset is clicked |
|||
* Triggered when the asset is clicked |
|||
* @private |
|||
* */ |
|||
handleClick() { |
|||
onClick() { |
|||
var onClick = this.config.onClick; |
|||
var model = this.model; |
|||
model.collection.trigger('deselectAll'); |
|||
this.collection.trigger('deselectAll'); |
|||
this.$el.addClass(this.pfx + 'highlight'); |
|||
|
|||
if (typeof onClick === 'function') { |
|||
onClick(model); |
|||
} else { |
|||
this.updateTarget(model.get('src')); |
|||
this.updateTarget(this.collection.target); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Trigger when the asset is double clicked |
|||
* Triggered when the asset is double clicked |
|||
* @private |
|||
* */ |
|||
handleDblClick() { |
|||
onDblClick() { |
|||
const em = this.em; |
|||
var onDblClick = this.config.onDblClick; |
|||
var model = this.model; |
|||
|
|||
if (typeof onDblClick === 'function') { |
|||
onDblClick(model); |
|||
} else { |
|||
this.updateTarget(model.get('src')); |
|||
this.updateTarget(this.collection.target); |
|||
em && em.get('Modal').close(); |
|||
} |
|||
|
|||
var onSelect = model.collection.onSelect; |
|||
if(typeof onSelect == 'function'){ |
|||
var onSelect = this.collection.onSelect; |
|||
if (typeof onSelect == 'function') { |
|||
onSelect(this.model); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Update target if exists |
|||
* @param {String} v Value |
|||
* @private |
|||
* */ |
|||
updateTarget(v) { |
|||
var target = this.model.collection.target; |
|||
if(target && target.set) { |
|||
var attr = _.clone( target.get('attributes') ); |
|||
target.set('attributes', attr ); |
|||
target.set('src', v ); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Remove asset from collection |
|||
* @private |
|||
* */ |
|||
removeItem(e) { |
|||
onRemove(e) { |
|||
e.stopPropagation(); |
|||
this.model.collection.remove(this.model); |
|||
}, |
|||
|
|||
render() { |
|||
var name = this.model.get('name'), |
|||
dim = this.model.get('width') && this.model.get('height') ? |
|||
this.model.get('width')+' x '+this.model.get('height') : ''; |
|||
name = name ? name : this.model.get('src').split("/").pop(); |
|||
name = name && name.length > 30 ? name.substring(0, 30)+'...' : name; |
|||
dim = dim ? dim + (this.model.get('unitDim') ? this.model.get('unitDim') : ' px' ) : ''; |
|||
this.$el.html( this.template({ |
|||
name, |
|||
src: this.model.get('src'), |
|||
dim, |
|||
pfx: this.pfx, |
|||
ppfx: this.ppfx |
|||
})); |
|||
this.$el.attr('class', this.className); |
|||
return this; |
|||
}, |
|||
} |
|||
}); |
|||
|
|||
@ -1,12 +1,59 @@ |
|||
var Backbone = require('backbone'); |
|||
|
|||
module.exports = Backbone.View.extend({ |
|||
initialize(o) { |
|||
|
|||
initialize(o = {}) { |
|||
this.options = o; |
|||
this.config = o.config || {}; |
|||
this.pfx = this.config.stylePrefix || ''; |
|||
this.ppfx = this.config.pStylePrefix || ''; |
|||
this.collection = o.collection; |
|||
const config = o.config || {}; |
|||
this.config = config; |
|||
this.pfx = config.stylePrefix || ''; |
|||
this.ppfx = config.pStylePrefix || ''; |
|||
this.em = config.em; |
|||
this.className = this.pfx + 'asset'; |
|||
this.listenTo( this.model, 'destroy remove', this.remove); |
|||
this.listenTo(this.model, 'destroy remove', this.remove); |
|||
this.model.view = this; |
|||
const init = this.init && this.init.bind(this); |
|||
init && init(o); |
|||
}, |
|||
|
|||
template() { |
|||
const pfx = this.pfx; |
|||
return ` |
|||
<div class="${pfx}preview-cont"> |
|||
${this.getPreview()} |
|||
</div> |
|||
<div class="${pfx}meta"> |
|||
${this.getInfo()} |
|||
</div> |
|||
<div class="${pfx}close" data-toggle="asset-remove"> |
|||
⨯ |
|||
</div> |
|||
`;
|
|||
}, |
|||
|
|||
/** |
|||
* Update target if exists |
|||
* @param {Model} target |
|||
* @private |
|||
* */ |
|||
updateTarget(target) { |
|||
if (target && target.set) { |
|||
target.set('attributes', _.clone(target.get('attributes'))); |
|||
target.set('src', this.model.get('src')); |
|||
} |
|||
}, |
|||
|
|||
getPreview() { |
|||
return ''; |
|||
}, |
|||
|
|||
getInfo() { |
|||
return ''; |
|||
}, |
|||
|
|||
render() { |
|||
const el = this.el; |
|||
el.innerHTML = this.template(this, this.model); |
|||
el.className = this.className; |
|||
return this; |
|||
}, |
|||
}); |
|||
|
|||
@ -0,0 +1,132 @@ |
|||
const Model = Backbone.Model; |
|||
const View = Backbone.View; |
|||
|
|||
export default { |
|||
types: [], |
|||
|
|||
initialize(models, opts) { |
|||
this.model = (attrs = {}, options = {}) => { |
|||
let Model, View, type; |
|||
|
|||
if (attrs && attrs.type) { |
|||
const baseType = this.getBaseType(); |
|||
type = this.getType(attrs.type); |
|||
Model = type ? type.model : baseType.model; |
|||
View = type ? type.view : baseType.view; |
|||
} else { |
|||
const typeFound = this.recognizeType(attrs); |
|||
type = typeFound.type; |
|||
Model = type.model; |
|||
View = type.view; |
|||
attrs = typeFound.attributes; |
|||
} |
|||
|
|||
const model = new Model(attrs, options); |
|||
model.typeView = View; |
|||
return model; |
|||
}; |
|||
const init = this.init && this.init.bind(this); |
|||
init && init(); |
|||
}, |
|||
|
|||
/** |
|||
* Recognize type by any value |
|||
* @param {mixed} value |
|||
* @return {Object} Found type |
|||
*/ |
|||
recognizeType(value) { |
|||
const types = this.getTypes(); |
|||
|
|||
for (let i = 0; i < types.length; i++) { |
|||
const type = types[i]; |
|||
let typeFound = type.isType(value); |
|||
typeFound = typeof typeFound == 'boolean' && typeFound ? |
|||
{type: type.id} : typeFound; |
|||
|
|||
if (typeFound) { |
|||
return { |
|||
type, |
|||
attributes: typeFound, |
|||
}; |
|||
} |
|||
} |
|||
|
|||
// If, for any reason, the type is not found it'll return the base one
|
|||
return { |
|||
type: this.getBaseType(), |
|||
attributes: value, |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Returns the base type (last object in the stack) |
|||
* @return {Object} |
|||
*/ |
|||
getBaseType() { |
|||
const types = this.getTypes(); |
|||
return types[types.length - 1]; |
|||
}, |
|||
|
|||
/** |
|||
* Get types |
|||
* @return {Array} |
|||
*/ |
|||
getTypes() { |
|||
return this.types; |
|||
}, |
|||
|
|||
/** |
|||
* Get type |
|||
* @param {string} id Type ID |
|||
* @return {Object} Type definition |
|||
*/ |
|||
getType(id) { |
|||
const types = this.getTypes(); |
|||
|
|||
for (let i = 0; i < types.length; i++) { |
|||
const type = types[i]; |
|||
if (type.id === id) { |
|||
return type; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Add new type |
|||
* @param {string} id Type ID |
|||
* @param {Object} definition Definition of the type. Each definition contains |
|||
* `model` (business logic), `view` (presentation logic) |
|||
* and `isType` function which recognize the type of the |
|||
* passed entity |
|||
* addType('my-type', { |
|||
* model: {}, |
|||
* view: {}, |
|||
* isType: (value) => {}, |
|||
* }) |
|||
*/ |
|||
addType(id, definition) { |
|||
const type = this.getType(id); |
|||
const baseType = this.getBaseType(); |
|||
const ModelInst = type ? type.model : baseType.model; |
|||
const ViewInst = type ? type.view : baseType.view; |
|||
let {model, view, isType} = definition; |
|||
model = model instanceof Model ? model : ModelInst.extend(model || {}); |
|||
view = view instanceof View ? view : ViewInst.extend(view || {}); |
|||
|
|||
if (type) { |
|||
type.model = model; |
|||
type.view = view; |
|||
type.isType = isType || type.isType; |
|||
} else { |
|||
definition.id = id; |
|||
definition.model = model; |
|||
definition.view = view; |
|||
definition.isType = isType || function(value) { |
|||
if (value && value.type == id) { |
|||
return true; |
|||
} |
|||
}; |
|||
this.getTypes().unshift(definition); |
|||
} |
|||
} |
|||
} |
|||
@ -1,9 +1,15 @@ |
|||
module.exports = { |
|||
stylePrefix: 'nv-', |
|||
|
|||
// Enable/Disable globally the possibility to sort layers
|
|||
sortable: 1, |
|||
|
|||
// Enable/Disable globally the possibility to hide layers
|
|||
hidable: 1, |
|||
|
|||
// Hide textnodes
|
|||
hideTextnode: 1, |
|||
containerId: 'navigator', |
|||
itemClass: 'item', |
|||
itemsClass: 'items', |
|||
|
|||
// Indicates if the wrapper is visible in layers
|
|||
showWrapper: 1, |
|||
}; |
|||
|
|||
@ -1,6 +1,79 @@ |
|||
var Backbone = require('backbone'); |
|||
var Property = require('./Property'); |
|||
import TypeableCollection from 'domain_abstract/model/TypeableCollection'; |
|||
const Property = require('./Property'); |
|||
|
|||
module.exports = Backbone.Collection.extend({ |
|||
model: Property, |
|||
module.exports = require('backbone').Collection.extend(TypeableCollection).extend({ |
|||
types: [ |
|||
{ |
|||
id: 'stack', |
|||
model: require('./PropertyStack'), |
|||
view: require('./../view/PropertyStackView'), |
|||
isType(value) { |
|||
if (value && value.type == 'stack') { |
|||
return value; |
|||
} |
|||
} |
|||
},{ |
|||
id: 'composite', |
|||
model: require('./PropertyComposite'), |
|||
view: require('./../view/PropertyCompositeView'), |
|||
isType(value) { |
|||
if (value && value.type == 'composite') { |
|||
return value; |
|||
} |
|||
} |
|||
},{ |
|||
id: 'file', |
|||
model: Property, |
|||
view: require('./../view/PropertyFileView'), |
|||
isType(value) { |
|||
if (value && value.type == 'file') { |
|||
return value; |
|||
} |
|||
} |
|||
},{ |
|||
id: 'color', |
|||
model: Property, |
|||
view: require('./../view/PropertyColorView'), |
|||
isType(value) { |
|||
if (value && value.type == 'color') { |
|||
return value; |
|||
} |
|||
} |
|||
},{ |
|||
id: 'select', |
|||
model: require('./PropertyRadio'), |
|||
view: require('./../view/PropertySelectView'), |
|||
isType(value) { |
|||
if (value && value.type == 'select') { |
|||
return value; |
|||
} |
|||
} |
|||
},{ |
|||
id: 'radio', |
|||
model: require('./PropertyRadio'), |
|||
view: require('./../view/PropertyRadioView'), |
|||
isType(value) { |
|||
if (value && value.type == 'radio') { |
|||
return value; |
|||
} |
|||
} |
|||
},{ |
|||
id: 'integer', |
|||
model: require('./PropertyInteger'), |
|||
view: require('./../view/PropertyIntegerView'), |
|||
isType(value) { |
|||
if (value && value.type == 'integer') { |
|||
return value; |
|||
} |
|||
} |
|||
},{ |
|||
id: 'base', |
|||
model: Property, |
|||
view: require('./../view/PropertyView'), |
|||
isType(value) { |
|||
value.type = 'base'; |
|||
return value; |
|||
} |
|||
} |
|||
] |
|||
}); |
|||
|
|||
@ -1,70 +1,82 @@ |
|||
var Backbone = require('backbone'); |
|||
var Layers = require('./Layers'); |
|||
|
|||
module.exports = Backbone.Model.extend({ |
|||
module.exports = require('backbone').Model.extend({ |
|||
|
|||
defaults: { |
|||
name: '', |
|||
property: '', |
|||
type: '', |
|||
units: [], |
|||
unit: '', |
|||
defaults: '', |
|||
info: '', |
|||
value: '', |
|||
icon: '', |
|||
preview: false, |
|||
detached: false, |
|||
visible: true, |
|||
functionName: '', |
|||
status: '', |
|||
properties: [], |
|||
layers: [], |
|||
list: [], |
|||
visible: true, |
|||
fixedValues: ['initial', 'inherit'], |
|||
}, |
|||
|
|||
initialize(opt) { |
|||
var o = opt || {}; |
|||
var type = this.get('type'); |
|||
var name = this.get('name'); |
|||
var prop = this.get('property'); |
|||
var props = this.get('properties'); |
|||
|
|||
if(!name) |
|||
if (!name) { |
|||
this.set('name', prop.charAt(0).toUpperCase() + prop.slice(1).replace(/-/g,' ')); |
|||
} |
|||
|
|||
if(props.length){ |
|||
var Properties = require('./Properties'); |
|||
this.set('properties', new Properties(props)); |
|||
const init = this.init && this.init.bind(this); |
|||
init && init(); |
|||
}, |
|||
|
|||
/** |
|||
* Parse a raw value, generally fetched from the target, for this property |
|||
* @param {string} value |
|||
* @return {string} |
|||
*/ |
|||
parseValue(value) { |
|||
if (!this.get('functionName')) { |
|||
return value; |
|||
} |
|||
|
|||
switch(type){ |
|||
case 'stack': |
|||
this.set('layers', new Layers()); |
|||
break; |
|||
const args = []; |
|||
let valueStr = value + ''; |
|||
let start = valueStr.indexOf('(') + 1; |
|||
let end = valueStr.lastIndexOf(')'); |
|||
args.push(start); |
|||
|
|||
// Will try even if the last closing parentheses is not found
|
|||
if (end >= 0) { |
|||
args.push(end); |
|||
} |
|||
|
|||
return String.prototype.substring.apply(valueStr, args); |
|||
}, |
|||
|
|||
/** |
|||
* Get the default value |
|||
* @return {string} |
|||
* @private |
|||
*/ |
|||
getDefaultValue() { |
|||
return this.get('defaults'); |
|||
}, |
|||
|
|||
/** |
|||
* Return value |
|||
* @return {string} Value |
|||
* Get a complete value of the property. |
|||
* This probably will replace the getValue when all |
|||
* properties models will be splitted |
|||
* @param {string} val Custom value to replace the one on the model |
|||
* @return {string} |
|||
* @private |
|||
*/ |
|||
getValue() { |
|||
var result = ''; |
|||
var type = this.get('type'); |
|||
getFullValue(val) { |
|||
const fn = this.get('functionName'); |
|||
let value = val || this.get('value'); |
|||
|
|||
switch(type){ |
|||
case 'integer': |
|||
result = this.get('value') + this.get('unit'); |
|||
break; |
|||
default: |
|||
result = this.get('value'); |
|||
break; |
|||
if (fn) { |
|||
value = `${fn}(${value})`; |
|||
} |
|||
|
|||
return result; |
|||
return value; |
|||
}, |
|||
|
|||
}); |
|||
|
|||
@ -0,0 +1,55 @@ |
|||
const Property = require('./Property'); |
|||
|
|||
module.exports = Property.extend({ |
|||
|
|||
defaults: Object.assign({}, Property.prototype.defaults, { |
|||
// 'background' is a good example where to make a difference
|
|||
// between detached and not
|
|||
//
|
|||
// - NOT detached (default)
|
|||
// background: url(..) no-repeat center ...;
|
|||
// - Detached
|
|||
// background-image: url();
|
|||
// background-repeat: repeat;
|
|||
// ...
|
|||
detached: 0, |
|||
|
|||
// Array of sub properties
|
|||
properties: [], |
|||
}), |
|||
|
|||
init() { |
|||
const properties = this.get('properties') || []; |
|||
const Properties = require('./Properties'); |
|||
this.set('properties', new Properties(properties)); |
|||
}, |
|||
|
|||
/** |
|||
* Returns default value |
|||
* @param {Boolean} defaultProps Force to get defaults from properties |
|||
* @return {string} |
|||
*/ |
|||
getDefaultValue(defaultProps) { |
|||
let value = this.get('defaults'); |
|||
|
|||
if (value && !defaultProps) { |
|||
return value; |
|||
} |
|||
|
|||
value = ''; |
|||
const properties = this.get('properties'); |
|||
properties.each((prop, index) => value += `${prop.getDefaultValue()} `); |
|||
return value.trim(); |
|||
}, |
|||
|
|||
getFullValue() { |
|||
if (this.get('detached')) { |
|||
return ''; |
|||
} |
|||
|
|||
let result = ''; |
|||
this.get('properties').each(prop => result += `${prop.getFullValue()} `); |
|||
return result.trim(); |
|||
}, |
|||
|
|||
}); |
|||
@ -0,0 +1,18 @@ |
|||
const Property = require('./Property'); |
|||
|
|||
module.exports = Property.extend({ |
|||
|
|||
defaults: Object.assign({}, Property.prototype.defaults, { |
|||
// Array of units, eg. ['px', '%']
|
|||
units: [], |
|||
|
|||
// Selected unit, eg. 'px'
|
|||
unit: '', |
|||
}), |
|||
|
|||
getFullValue() { |
|||
let value = this.get('value') + this.get('unit'); |
|||
return Property.prototype.getFullValue.apply(this, [value]); |
|||
}, |
|||
|
|||
}); |
|||
@ -0,0 +1,10 @@ |
|||
const Property = require('./Property'); |
|||
|
|||
module.exports = Property.extend({ |
|||
|
|||
defaults: Object.assign({}, Property.prototype.defaults, { |
|||
// Array of options, eg. [{name: 'Label ', value: '100'}]
|
|||
options: [], |
|||
}), |
|||
|
|||
}); |
|||
@ -0,0 +1,30 @@ |
|||
const Property = require('./PropertyComposite'); |
|||
const Layers = require('./Layers'); |
|||
|
|||
module.exports = Property.extend({ |
|||
|
|||
defaults: Object.assign({}, Property.prototype.defaults, { |
|||
// Array of layers (which contain properties)
|
|||
layers: [], |
|||
|
|||
// Layer preview
|
|||
preview: 0, |
|||
}), |
|||
|
|||
init() { |
|||
Property.prototype.init.apply(this, arguments); |
|||
const layers = this.get('layers'); |
|||
this.set('layers', new Layers(layers)); |
|||
}, |
|||
|
|||
getFullValue() { |
|||
if (this.get('detached')) { |
|||
return ''; |
|||
} |
|||
|
|||
const layers = this.get('layers'); |
|||
let val = layers.length ? layers.pluck('value').join(', ') : ''; |
|||
return val.trim(); |
|||
}, |
|||
|
|||
}); |
|||
@ -0,0 +1,144 @@ |
|||
|
|||
.#{$nv-prefix}selected-parent { |
|||
border: 1px solid $colorYell; |
|||
} |
|||
|
|||
.#{$nv-prefix}opac50{ |
|||
@include opacity(0.50); |
|||
} |
|||
.#{$app-prefix}layers { |
|||
position:relative; |
|||
height: 100%; |
|||
##{$nv-prefix}placeholder{ |
|||
width: 100%; |
|||
position: absolute; |
|||
##{$nv-prefix}plh-int{ |
|||
height: 100%; |
|||
padding: 1px; |
|||
&.#{$nv-prefix}insert{ |
|||
background-color: $colorGreen; |
|||
} |
|||
} |
|||
} |
|||
.#{$nv-prefix}item { |
|||
font-weight: lighter; |
|||
text-align: left; |
|||
position: relative; |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
} |
|||
.#{$nv-prefix}item.#{$nv-prefix}hide { |
|||
@include opacity(0.55); |
|||
} |
|||
.#{$nv-prefix}item ##{$nv-prefix}counter { |
|||
font-size: 10px; |
|||
position: absolute; |
|||
right: 27px; |
|||
top: 9px; |
|||
} |
|||
.#{$nv-prefix}item ##{$nv-prefix}btn-eye{ |
|||
@extend .btn; |
|||
height: auto !important; width: auto !important; |
|||
font-size: 13px; |
|||
left: 0; top: 0; |
|||
padding: 7px 5px 7px 10px; |
|||
position: absolute; |
|||
cursor:pointer; |
|||
z-index: 1; |
|||
} |
|||
} |
|||
|
|||
.#{$nv-prefix}item ##{$nv-prefix}caret { |
|||
font-size: 7px; |
|||
width: 8px; |
|||
padding: 2px; |
|||
cursor: pointer; |
|||
position: absolute; |
|||
left: -9px; |
|||
top: 6px; |
|||
@include opacity(0.7); |
|||
|
|||
&:hover { |
|||
@include opacity(1); |
|||
} |
|||
} |
|||
|
|||
.#{$nv-prefix}item .#{$nv-prefix}title-c { |
|||
@extend .#{$app-prefix}bg-main; |
|||
} |
|||
|
|||
.#{$nv-prefix}title { |
|||
@extend .#{$app-prefix}category-title; |
|||
|
|||
padding: 3px 10px 5px 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.#{$nv-prefix}title-inn { |
|||
position: relative; |
|||
} |
|||
|
|||
.#{$nv-prefix}item .#{$nv-prefix}children .#{$nv-prefix}title{ |
|||
border-left: 1px solid lighten($mainDkColor,2%); |
|||
} |
|||
.#{$nv-prefix}item > .#{$nv-prefix}children { |
|||
display: none; |
|||
} |
|||
.#{$nv-prefix}item.open > .#{$nv-prefix}children { |
|||
display: block; |
|||
} |
|||
|
|||
.#{$nv-prefix}item > .#{$nv-prefix}no-chld > ##{$nv-prefix}caret::before{ |
|||
content:''; |
|||
} |
|||
|
|||
.#{$nv-prefix}no-chld > .#{$nv-prefix}title-inn > ##{$nv-prefix}caret { |
|||
display:none; |
|||
} |
|||
|
|||
.#{$nv-prefix}item > ##{$nv-prefix}move { |
|||
position: absolute; |
|||
cursor: move; |
|||
font-size: 12px; |
|||
right: 0; top: 0; |
|||
padding: 7px 10px 7px 5px; |
|||
} |
|||
/* |
|||
.#{$nv-prefix}item{ |
|||
&.#{$nv-prefix}selected{ |
|||
border: 2px solid $colorBlue; |
|||
} |
|||
} |
|||
*/ |
|||
.#{$nv-prefix}selected .#{$nv-prefix}title { |
|||
background-color: rgba(255,255,255,0.1); |
|||
} |
|||
|
|||
.#{$nv-prefix}nav-item-edit { |
|||
visibility: hidden; |
|||
padding: 5px; |
|||
font-size: 9px; |
|||
position: absolute; |
|||
left: -27px; |
|||
top: 1px; |
|||
|
|||
@include opacity(0.7); |
|||
|
|||
&:hover { |
|||
@include opacity(1); |
|||
} |
|||
} |
|||
|
|||
.#{$nv-prefix}title-c:hover { |
|||
|
|||
.#{$nv-prefix}nav-item-edit { |
|||
visibility: visible; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.#{$app-prefix}nav-comp-name { |
|||
padding: 5px; |
|||
box-sizing: content-box; |
|||
@extend .#{$app-prefix}no-user-select; |
|||
} |
|||
@ -0,0 +1,78 @@ |
|||
|
|||
|
|||
/* Class names prefixes */ |
|||
|
|||
$app-prefix: 'gjs-' !default; |
|||
$nv-prefix: $app-prefix + 'nv-' !default; |
|||
$rte-prefix: $app-prefix + 'rte-' !default; |
|||
$comp-prefix: $app-prefix + 'comp-' !default; |
|||
$mdl-prefix: $app-prefix + 'mdl-' !default; |
|||
$am-prefix: $app-prefix + 'am-' !default; |
|||
$cm-prefix: $app-prefix + 'cm-' !default; |
|||
$pn-prefix: $app-prefix + 'pn-' !default; |
|||
$com-prefix: $app-prefix + 'com-' !default; |
|||
$sm-prefix: $app-prefix + 'sm-' !default; |
|||
$cv-prefix: $app-prefix + 'cv-' !default; |
|||
$clm-prefix: $app-prefix + 'clm-' !default; |
|||
$trt-prefix: $app-prefix + 'trt-' !default; |
|||
|
|||
|
|||
/* Colors / Theme */ |
|||
|
|||
|
|||
/* Dark theme */ |
|||
$mainColor: #444 !default; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%) */ |
|||
$fontColor: #ddd !default; /* l: #d8d7db */ |
|||
$fontColorActive: #f8f8f8 !default; |
|||
|
|||
/* Light theme |
|||
$mainColor: #fff; |
|||
$fontColor: #9299a3; |
|||
$fontColorActive: #4f8ef7; |
|||
*/ |
|||
|
|||
$mainDkColor: rgba(0, 0, 0, 0.3) !default;/* darken($mainColor, 4%) - #383838 */ |
|||
$mainDklColor: rgba(0, 0, 0, 0.1) !default; |
|||
$mainLhColor: rgba(255, 255, 255, 0.1) !default; /* #515151 */ |
|||
$mainLhlColor: rgba(255, 255, 255, 0.7) !default; |
|||
$fontColorDk: #777 !default; |
|||
$mainFont: Helvetica, sans-serif !default; |
|||
$colorBlue: #3b97e3 !default; |
|||
$colorRed: #dd3636 !default; |
|||
$colorYell: #ffca6f !default; |
|||
$colorGreen: #62c462 !default; |
|||
$tagBg: #804f7b !default; |
|||
$secColor: $tagBg !default; |
|||
$imageCompDim: 50px !default; |
|||
$leftWidth: 15% !default; |
|||
|
|||
/* Color Helpers */ |
|||
$colorHighlight: #71b7f1 !default; |
|||
$colorWarn: #ffca6f !default; |
|||
|
|||
/* Canvas */ |
|||
$hndlMargin: -5px !default; |
|||
|
|||
/* Components / Inputs */ |
|||
$lightBorder: rgba(255, 255, 255, 0.05) !default; |
|||
$inputFontColor: $mainLhlColor !default; /* #d5d5d5 */ |
|||
$arrowColor: $mainLhlColor !default; /* b1b1b1 */ |
|||
$darkTextShadow: $mainDkColor !default; /* #252525 */ |
|||
$darkBorder: rgba(0, 0, 0, 0.15) !default; /* 303030 */ |
|||
$colorpSize: 22px !default; |
|||
$inputPadding: 5px !default; // Has to be a single value |
|||
|
|||
/* Class manager */ |
|||
$addBtnBg: lighten($mainDkColor, 10%) !default; |
|||
$paddElClm: 5px 6px !default; |
|||
|
|||
/* File uploader */ |
|||
$uploadPadding: 150px 10px !default; |
|||
|
|||
/* Commands */ |
|||
$animSpeed: 0.2s !default; |
|||
|
|||
/* Fonts */ |
|||
$fontPath: '../fonts' !default; |
|||
$fontName: 'main-fonts' !default; |
|||
$fontV: 20 !default;//random(1000) |
|||
@ -0,0 +1,29 @@ |
|||
import Promise from 'promise-polyfill'; |
|||
|
|||
window.Promise = window.Promise || Promise; |
|||
|
|||
export default typeof fetch == 'function' ? fetch.bind() : (url, options) => { |
|||
return new Promise((res, rej) => { |
|||
const req = new XMLHttpRequest(); |
|||
req.open(options.method || 'get', url); |
|||
req.withCredentials = options.credentials == 'include'; |
|||
|
|||
for (let k in options.headers || {}) { |
|||
req.setRequestHeader(k, options.headers[k]); |
|||
} |
|||
|
|||
req.onload = e => res({ |
|||
status: req.status, |
|||
statusText: req.statusText, |
|||
text: () => Promise.resolve(req.responseText) |
|||
}); |
|||
req.onerror = rej; |
|||
|
|||
// Actually, fetch doesn't support onProgress feature
|
|||
if (req.upload && options.onProgress) { |
|||
req.upload.onprogress = options.onProgress; |
|||
} |
|||
|
|||
req.send(options.body); |
|||
}); |
|||
} |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue