Browse Source

General updates

pull/2/head
Artur Arseniev 10 years ago
parent
commit
63b267ca28
  1. 4
      .gitignore
  2. 80
      Gruntfile.js
  3. 40
      bower.json
  4. 5
      index.html
  5. 43
      package.json
  6. 39
      src/asset_manager/view/AssetImageView.js
  7. 51
      src/asset_manager/view/FileUploader.js
  8. 27
      src/code_manager/model/CodeMirrorEditor.js
  9. 40
      src/commands/view/ExportTemplate.js
  10. 49
      src/config/require-config.js
  11. 50
      src/demo.js
  12. 30
      src/dom_components/view/ComponentTextView.js
  13. 14
      src/editor/main.js
  14. 54
      src/modal_dialog/view/ModalView.js
  15. 56
      src/navigator/view/ItemView.js
  16. 67
      src/rich_text_editor/main.js
  17. 209
      src/rich_text_editor/view/TextEditorView.js
  18. 68
      src/storage_manager/main.js
  19. 24
      src/storage_manager/model/LocalStorage.js
  20. 28
      src/storage_manager/model/RemoteStorage.js
  21. 42
      src/style_manager/view/LayerView.js
  22. 47
      src/style_manager/view/PropertyFileView.js
  23. 49
      src/style_manager/view/PropertyIntegerView.js
  24. 66
      src/style_manager/view/PropertyStackView.js
  25. 35
      src/style_manager/view/SectorView.js
  26. 2
      styles/css/main.css
  27. 2
      styles/css/main.css.map
  28. 166
      styles/scss/main.scss

4
.gitignore

@ -2,7 +2,11 @@
.settings/
.sass-cache/
.project
grapes.sublime-project
grapes.sublime-workspace
private/
libs/
vendor/
node_modules/
bower_components/

80
Gruntfile.js

@ -1,17 +1,18 @@
module.exports = function(grunt) {
var appPath = 'src',
buildPath = 'dist',
configPath = 'config/require-config.js';
module.exports = function(grunt) {
var appPath = 'src',
buildPath = 'dist',
configPath = 'config/require-config.js';
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-bowercopy');
grunt.loadNpmTasks('grunt-mocha');
grunt.initConfig({
appDir: appPath,
builtDir: buildPath,
@ -27,20 +28,20 @@ module.exports = function(grunt) {
removeCombined: true,
findNestedDependencies: true,
keepBuildDir: true,
inlineText: true,
inlineText: true,
optimize: 'none'
//paths: { "jquery": "empty:" }, //try to exclude
}
}
},
jshint: {
all: [
'Gruntfile.js',
'<%= appDir %>/**/*.js',
]
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %> */'
@ -51,7 +52,7 @@ module.exports = function(grunt) {
}
}
},
sass: {
dist: {
files: [{
@ -63,17 +64,17 @@ module.exports = function(grunt) {
}]
}
},
mocha: {
test: {
src: ['test/index.html'],
options: { log: true, },
},
},
connect: {
/*
app: {
dist: {
options: {
port: 8001,
open: {
@ -91,7 +92,34 @@ module.exports = function(grunt) {
}
}
},
bowercopy: {
options: {
srcPrefix: 'bower_components'
},
scripts: {
options: {
destPrefix: 'vendor'
},
files: {
'jquery/jquery.js' : 'jquery/dist/jquery.min.js',
'jquery-ui/jquery-ui-core.js' : 'jquery.ui/ui/core.js',
'jquery-ui/jquery-ui-mouse.js' : 'jquery.ui/ui/mouse.js',
'jquery-ui/jquery-ui-widget.js' : 'jquery.ui/ui/widget.js',
'jquery-ui/jquery-ui.js' : 'jquery.ui/ui/resizable.js',
'underscore/underscore.js' : 'underscore/underscore-min.js',
'backbone/backbone.js' : 'backbone/backbone-min.js',
'backbone-undo/backbone-undo.js' : 'Backbone.Undo/Backbone.Undo.js',
'keymaster/keymaster.js' : 'keymaster/keymaster.js',
'require/require.js' : 'requirejs/require.js',
'require-text/text.js' : 'requirejs-text/text.js',
'spectrum/spectrum.js' : 'spectrum/spectrum.js',
'codemirror' : 'codemirror',
'codemirror-formatting' : 'codemirror-formatting/formatting.js',
},
}
},
watch: {
script: {
files: [ '<%= appDir %>/**/*.js' ],
@ -102,17 +130,17 @@ module.exports = function(grunt) {
tasks: ['sass']
},
test: {
files: [ 'test/specs/**/*.js' ],
files: ['test/specs/**/*.js'],
tasks: ['mocha'],
options: { livereload: true }, //default port 35729
}
}
});
/**
* Need to copy require configs cause r.js will try to load them from the path indicated inside
* main.js file. This is the only way I have found to do it and only for the pleasure of using separate config
* main.js file. This is the only way I have found to do it and only for the pleasure of using separate config
* requirejs file.
* */
grunt.registerTask('before-requirejs', function() {
@ -121,17 +149,19 @@ module.exports = function(grunt) {
grunt.file.mkdir(buildPath);
grunt.file.copy(appPath + '/' + configPath, buildPath + '/' + appPath + '/' + configPath);
});
grunt.registerTask('after-requirejs', function() {
//grunt.file.copy(buildPath + '/main.js', buildPath + '/main.min.js');
});
grunt.registerTask('bower', ['bowercopy']);
grunt.registerTask('dev', ['connect', 'watch']);
grunt.registerTask('test', ['mocha']);
grunt.registerTask('deploy', ['jshint', 'before-requirejs', 'requirejs', 'after-requirejs', 'uglify']);
grunt.registerTask('default', ['dev']);
};

40
bower.json

@ -0,0 +1,40 @@
{
"name": "grapes",
"description": "Open source web template editor",
"version": "0.0.5",
"author": "Artur Arseniev",
"main": [
"dist/grapes.min.js"
],
"keywords": [
"grapes",
"wte",
"web template editor",
"site builder",
"newsletter builder",
"wysiwyg",
"template",
"editor"
],
"license": "BSD-3-Clause",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"backbone": "~1.2.3",
"Backbone.Undo": "~0.2.5",
"jquery": "~2.2.0",
"jquery.ui": "~1.11.4",
"keymaster": "~1.6.3",
"requirejs": "~2.1.22",
"requirejs-text": "~2.0.14",
"spectrum": "~1.8.0",
"underscore": "~1.8.3",
"codemirror": "~5.10.0",
"codemirror-formatting": "*"
}
}

5
index.html

@ -6,10 +6,11 @@
<link rel="stylesheet" href="styles/spectrum.css">
<link rel="stylesheet" href="styles/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/css/main.css">
<link rel="stylesheet" href="libs/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="vendor/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="vendor/codemirror/theme/hopscotch.css">
</head>
<body>
<div id="wte-app"></div>
<script data-main="src/demo" src="libs/require-min.js"></script>
<script data-main="src/demo" src="vendor/require/require.js"></script>
</body>
</html>

43
package.json

@ -1,30 +1,45 @@
{
"name": "grapes.js",
"name": "grapes",
"description": "Open source web template editor",
"version": "0.0.5",
"author": "Artur Arseniev",
"private": true,
"dependencies": {
"backbone": "1.2.0",
"backbone-undo": "0.2",
"backbone": "^1.2.3",
"backbone-undo": "^0.2.5",
"bootstrap-wysiwyg": "^1.0.4",
"codemirror": "^5.10.0",
"jquery": "^2.2.0",
"jquery-ui": "^1.10.5",
"keymaster": "^1.6.2",
"requirejs": "latest",
"spectrum-colorpicker": "1.7.1"
"requirejs": "^2.1.22",
"spectrum-colorpicker": "^1.8.0",
"text": "git://github.com/requirejs/text",
"underscore": "^1.8.3"
},
"devDependencies": {
"chai": "latest",
"grunt": "latest",
"chai": "^3.4.1",
"grunt": "^0.4.5",
"grunt-bowercopy": "^1.2.4",
"grunt-contrib-connect": "^0.11.2",
"grunt-contrib-jshint": "latest",
"grunt-contrib-requirejs": "latest",
"grunt-contrib-jshint": "^0.12.0",
"grunt-contrib-requirejs": "^0.4.4",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-testem": "^0.5.16",
"grunt-contrib-uglify": "^0.11.0",
"grunt-contrib-watch": "latest",
"grunt-mocha": "^0.4.15",
"grunt-testem": "^0.5.5",
"mocha": "latest"
"grunt-contrib-watch": "^0.6.1",
"grunt-mocha": "^0.4.15"
},
"license": "BSD-3-Clause",
"keywords": [
"grapes",
"wte",
"web template editor",
"site builder",
"newsletter builder",
"wysiwyg",
"template",
"editor"
],
"scripts": {
"grunt": "node_modules/.bin/grunt"
}

39
src/asset_manager/view/AssetImageView.js

@ -1,38 +1,39 @@
define(['./AssetView','text!./../template/assetImage.html'],
define(['./AssetView','text!./../template/assetImage.html'],
function (AssetView, assetTemplate) {
/**
/**
* @class AssetImageView
* */
return AssetView.extend({
events:{
'click' : 'selected',
'click' : 'selected',
'dblclick' : 'chosen',
},
template: _.template(assetTemplate),
initialize: function(o) {
AssetView.prototype.initialize.apply(this, arguments);
this.className += ' ' + this.pfx + 'asset-image';
this.events['click #' + this.pfx + 'close'] = 'removeItem';
this.delegateEvents();
},
/**
* Trigger when asset is been selected
*
*
* @return void
* */
selected: function(){
this.model.collection.trigger('deselectAll');
this.$el.addClass(this.pfx + 'highlight');
this.updateTarget(this.model.get('src'));
},
/**
* Trigger when asset is been chosen (double clicked)
*
*
* @return void
* */
chosen: function(){
@ -42,11 +43,11 @@ define(['./AssetView','text!./../template/assetImage.html'],
f(this.model);
}
},
/**
* Update target if exists
* @param {String} v Value
*
*
* @return void
* */
updateTarget: function(v){
@ -58,27 +59,27 @@ define(['./AssetView','text!./../template/assetImage.html'],
target.set('src', v );
}
},
/**
* Remove asset from collection
*
*
* @return void
* */
removeItem: function(e){
e.stopPropagation();
this.model.collection.remove(this.model);
},
render : function(){
var name = this.model.get('name'),
dim = this.model.get('width') && this.model.get('height') ?
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: name,
src: this.model.get('src'),
name: name,
src: this.model.get('src'),
dim: dim,
pfx: this.pfx
}));

51
src/asset_manager/view/FileUploader.js

@ -1,15 +1,15 @@
define(['backbone', 'text!./../template/fileUploader.html'],
define(['backbone', 'text!./../template/fileUploader.html'],
function (Backbone, fileUploaderTemplate) {
/**
/**
* @class FileUploader
* */
return Backbone.View.extend({
template: _.template(fileUploaderTemplate),
events: {},
initialize: function(o) {
this.options = o || {};
this.config = o.config || {};
@ -18,12 +18,13 @@ define(['backbone', 'text!./../template/fileUploader.html'],
this.uploadId = this.pfx + 'uploadFile';
this.disabled = this.config.disableUpload;
this.events['change #' + this.uploadId] = 'uploadFile';
this.delegateEvents();
},
/**
* Upload files
* @param {Object} e Event
*
*
* @return void
* */
uploadFile : function(e){
@ -33,10 +34,10 @@ define(['backbone', 'text!./../template/fileUploader.html'],
formData.append('files[]', files[i]);
}
var target = this.target;
$.ajax({
$.ajax({
url : this.config.urlUpload, //this.config.urlUpload
type : 'POST',
data : formData,
type : 'POST',
data : formData,
beforeSend : this.config.beforeSend,
complete : this.config.onComplete,
xhrFields : {
@ -49,17 +50,17 @@ define(['backbone', 'text!./../template/fileUploader.html'],
//progress.value = 100;
}
},
cache: false, contentType: false, processData: false
cache: false, contentType: false, processData: false
}).done(function(data){
target.add(data.data);
target.add(data.data);
}).always(function(){
//turnOff loading
});
},
/**
* Make input file droppable
*
*
* @return void
* */
initDrop: function(){
@ -68,27 +69,27 @@ define(['backbone', 'text!./../template/fileUploader.html'],
this.uploadForm = this.$el.find('form').get(0);
if( 'draggable' in this.uploadForm ){
var uploadFile = this.uploadFile;
this.uploadForm.ondragover = function(){
this.className = that.pfx + 'hover';
return false;
this.uploadForm.ondragover = function(){
this.className = that.pfx + 'hover';
return false;
};
this.uploadForm.ondragleave = function(){
this.className = '';
return false;
this.uploadForm.ondragleave = function(){
this.className = '';
return false;
};
this.uploadForm.ondrop = function(e){
this.className = '';
this.className = '';
e.preventDefault();
that.uploadFile(e);
return;
return;
};
}
}
},
render : function(){
this.$el.html( this.template({
title : this.config.uploadText,
title : this.config.uploadText,
uploadId : this.uploadId,
disabled : this.disabled,
pfx : this.pfx
@ -97,6 +98,6 @@ define(['backbone', 'text!./../template/fileUploader.html'],
this.$el.attr('class', this.pfx + 'file-uploader');
return this;
},
});
});

27
src/code_manager/model/CodeMirrorEditor.js

@ -1,16 +1,15 @@
define(['backbone',
'text!../../../libs/codemirror/lib/codemirror.css',
'../../../libs/codemirror/lib/codemirror',
'../../../libs/codemirror/mode/htmlmixed/htmlmixed',
'../../../libs/codemirror/mode/css/css',
'../../../libs/codemirror/lib/util/formatting'
'codemirror/lib/codemirror',
'codemirror/mode/htmlmixed/htmlmixed',
'codemirror/mode/css/css',
'formatting'
],
function(Backbone, CodeMirrorStyle, CodeMirror, htmlMode, cssMode, formatting ) {
/**
function(Backbone, CodeMirror, htmlMode, cssMode, formatting) {
/**
* @class CodeViewer
* */
return Backbone.Model.extend({
defaults: {
input : '',
label : '',
@ -19,13 +18,13 @@ define(['backbone',
readOnly : true,
lineNumbers : true,
},
/** @inheritdoc */
getId : function()
{
return 'CodeMirror';
return 'CodeMirror';
},
/** @inheritdoc */
init: function(el)
{
@ -36,10 +35,10 @@ define(['backbone',
mode : this.get('codeName'),
theme : this.get('theme'),
});
return this;
},
/** @inheritdoc */
setContent : function(v)
{
@ -52,6 +51,6 @@ define(['backbone',
CodeMirror.commands.goDocStart(this.editor);
}
},
});
});

40
src/commands/view/ExportTemplate.js

@ -1,9 +1,9 @@
define(function() {
/**
/**
* @class ExportTemplate
* */
return {
run: function(em, sender){
this.sender = sender;
this.components = em.get('Canvas').getWrapper().get('components');
@ -11,63 +11,63 @@ define(function() {
this.cm = em.get('CodeManager') || null;
this.enable();
},
/**
* Build editor
* @param {String} codeName
* @param {String} theme
* @param {String} label
*
*
* @return {Object} Editor
* */
buildEditor: function(codeName, theme, label)
{
if(!this.codeMirror)
this.codeMirror = this.cm.getEditor('CodeMirror');
var $input = $('<textarea>'),
editor = this.codeMirror.clone().set({
label : label,
codeName : codeName,
theme : theme,
input : $input[0],
input : $input[0],
}),
$editor = new this.cm.EditorView({
model : editor,
config : this.cm.config
$editor = new this.cm.EditorView({
model : editor,
config : this.cm.config
}).render().$el;
editor.init( $input[0] );
return { el: editor, $el: $editor };
},
enable: function()
{
if(!this.$editors){
var oHtmlEd = this.buildEditor('htmlmixed', 'codepen codepen-html', 'HTML2'),
oCsslEd = this.buildEditor('css', 'codepen codepen-css', 'CSS2');
var oHtmlEd = this.buildEditor('htmlmixed', 'hopscotch', 'HTML'),
oCsslEd = this.buildEditor('css', 'hopscotch', 'CSS');
this.htmlEditor = oHtmlEd.el;
this.cssEditor = oCsslEd.el;
this.$editors = $('<div>');
this.$editors.append(oHtmlEd.$el).append(oCsslEd.$el);
}
if(this.modal){
this.modal.setTitle('Export template');
this.modal.setContent(this.$editors);
this.modal.show();
}
this.htmlEditor.setContent( this.cm.getCode(this.components, 'html') );
this.cssEditor.setContent( this.cm.getCode(this.components, 'css') );
if(this.sender)
this.sender.set('active',false);
},
stop: function(){}
};
});

49
src/config/require-config.js

@ -1,7 +1,7 @@
require.config({
shim: {
underscore: {
exports: '_'
underscore: {
exports: '_'
},
backbone: {
deps: [ 'underscore', 'jquery' ],
@ -19,31 +19,34 @@ require.config({
exports: 'keymaster'
},
},
paths: {
jquery: '../libs/jquery',
jqueryUi: '../libs/jquery-ui.min',
underscore: '../libs/underscore',
backbone: '../libs/backbone',
backboneUndo: '../libs/backbone-undo-min',
keymaster: '../node_modules/keymaster/keymaster',
text: '../libs/require-text',
Spectrum: '../libs/spectrum',
rte: '../libs/wysiwyg',
config: 'config/config',
jquery: '../vendor/jquery/jquery',
core: '../vendor/jquery-ui/jquery-ui-core',
mouse: '../vendor/jquery-ui/jquery-ui-mouse',
widget: '../vendor/jquery-ui/jquery-ui-widget',
jqueryUi: '../vendor/jquery-ui/jquery-ui',
underscore: '../vendor/underscore/underscore',
backbone: '../vendor/backbone/backbone',
backboneUndo: '../vendor/backbone-undo/backbone-undo',
keymaster: '../vendor/keymaster/keymaster',
text: '../vendor/require-text/text',
Spectrum: '../vendor/spectrum/spectrum',
codemirror: '../vendor/codemirror',
formatting: '../vendor/codemirror-formatting/formatting',
},
packages : [
{ name: 'AssetManager', location: 'asset_manager', },
{ name: 'StyleManager', location: 'style_manager', },
{ name: 'AssetManager', location: 'asset_manager', },
{ name: 'StyleManager', location: 'style_manager', },
{ name: 'StorageManager', location: 'storage_manager', },
{ name: 'Navigator', location: 'navigator', },
{ name: 'Navigator', location: 'navigator', },
{ name: 'DomComponents', location: 'dom_components', },
{ name: 'RichTextEditor', location: 'rich_text_editor', },
{ name: 'ModalDialog', location: 'modal_dialog', },
{ name: 'CodeManager', location: 'code_manager', },
{ name: 'Commands', location: 'commands', },
{ name: 'Canvas', location: 'canvas', },
{ name: 'Panels', location: 'panels', }
{ name: 'RichTextEditor', location: 'rich_text_editor', },
{ name: 'ModalDialog', location: 'modal_dialog', },
{ name: 'CodeManager', location: 'code_manager', },
{ name: 'Commands', location: 'commands', },
{ name: 'Canvas', location: 'canvas', },
{ name: 'Panels', location: 'panels', }
]
});

50
src/demo.js

@ -1,12 +1,12 @@
require(['src/config/require-config.js'], function() {
require(['editor/main'],function (Grapes){
var grapes = new Grapes({
container : '#wte-app',
storageType: 'local',
remoteStorage: {
urlStore : 'http://test.localhost/wte/index.php',
urlLoad : 'http://test.localhost/wte/read.php',
@ -27,18 +27,18 @@ require(['src/config/require-config.js'], function() {
{ type: 'image', src : 'http://placehold.it/350x250/cc4360/fff/image7.jpg', date: '2015-02-01',height:350, width:250},
]
},
panels: {
defaults : [{
id : 'commands',
buttons : [{
id : 'select',
className : 'fa fa-mouse-pointer',
command : 'select-comp',
buttons : [{
id : 'select',
className : 'fa fa-mouse-pointer',
command : 'select-comp',
attributes : { title : 'Select' }
},{
id : 'create',
className : 'fa fa-plus-square-o',
},{
id : 'create',
className : 'fa fa-plus-square-o',
command : 'create-comp',
attributes : { title : 'Create' },
buttons : [
@ -46,10 +46,10 @@ require(['src/config/require-config.js'], function() {
{ id: 'box100', className: 'fa fa-square-o', command: 'insert-custom',
attributes : { title : 'Create all-width box' },
options: {
content : { style: { width: '100%', 'min-height': '75px'}},
terminateAfterInsert : false,
content : { style: { width: '100%', 'min-height': '75px'}},
terminateAfterInsert : false,
},},
]
]
},
{ id: 'remove', className: 'fa fa-trash-o', command: 'delete-comp', attributes : { title: 'Remove' }, },
{ id: 'move', className: 'fa fa-arrows', command: 'move-comp', attributes : { title: 'Move' }, },
@ -63,19 +63,19 @@ require(['src/config/require-config.js'], function() {
},{
id : 'options',
buttons : [
{ id: 'visibility', className: 'fa fa-eye', command: 'sw-visibility', active: true, context: 'sw-visibility', attributes: { title: 'View components' }, },
{ id: 'visibility', className: 'fa fa-eye', command: 'sw-visibility', active: true, context: 'sw-visibility', attributes: { title: 'View components' }, },
{ id: 'export', className: 'fa fa-code', command: 'export-template', attributes: { title: 'View code' }, },
],
},{
id : 'views',
buttons : [{ id: 'open-sm', className: 'fa fa-paint-brush', command: 'open-sm', active: true, attributes: { title: 'Open Style Manager' },},
buttons : [{ id: 'open-sm', className: 'fa fa-paint-brush', command: 'open-sm', active: true, attributes: { title: 'Open Style Manager' },},
{ id: 'open-layers', className: 'fa fa-bars', command: 'open-layers', attributes : { title: 'Open Layer Manager' }, },],
}],
},
styleManager : {
sectors: [{
name: 'General',
name: 'General',
properties:[{
name : 'Alignament',
property : 'float',
@ -156,8 +156,8 @@ require(['src/config/require-config.js'], function() {
units : ['px','%'],
defaults : '0',
}],
},{
name: 'Dimension',
},{
name: 'Dimension',
properties:[{
name : 'Width',
property : 'width',
@ -328,7 +328,7 @@ require(['src/config/require-config.js'], function() {
{ value : 'right', name : 'Right', className: 'fa fa-align-right'},
{ value : 'justify', name : 'Justify', className: 'fa fa-align-justify'},],
}],
},{
},{
name: 'Decorations',
properties: [{
name : 'Borders radius',
@ -555,12 +555,12 @@ require(['src/config/require-config.js'], function() {
}]
}
],
},
});
grapes.render();
});
});

30
src/dom_components/view/ComponentTextView.js

@ -1,15 +1,15 @@
define(['backbone', './ComponentView'],
define(['backbone', './ComponentView'],
function (Backbone, ComponentView) {
/**
* @class ComponentTextView
* */
return ComponentView.extend({
events: {
'dblclick' : 'enableEditing',
},
initialize: function(o){
ComponentView.prototype.initialize.apply(this, arguments);
_.bindAll(this,'disableEditing');
@ -18,8 +18,8 @@ define(['backbone', './ComponentView'],
this.rte = this.config.rte;
}
},
/**
/**
* Enable this component to be editable,
* load also the mini toolbar for quick editing
* @param Event
@ -31,12 +31,12 @@ define(['backbone', './ComponentView'],
this.$wrapper = $e.find('#'+this.config.wrapperId);
this.rte.bind(this, this.$wrapper);
}
$(document).on('mousedown', this.disableEditing); //Close edit mode
$(document).on('mousedown', this.disableEditing); //Close edit mode
this.$el.on('mousedown', this.disablePropagation); //Avoid closing edit mode on component click
},
/**
* Disable this component to be editable
/**
* Disable this component to be editable
* @param Event
* */
disableEditing: function(e){
@ -47,23 +47,23 @@ define(['backbone', './ComponentView'],
this.$el.off('mousedown',this.disablePropagation);
this.updateContents();
},
/** Isolate disable propagation method
* @param Event
* */
disablePropagation: function(e){
e.stopPropagation();
},
/**
/**
* Update contents of the element
*
*
* @return void
**/
updateContents : function(){
this.model.set('content', this.$el.html());
},
render: function() {
this.updateAttributes();
this.$el.html(this.model.get('content'));

14
src/editor/main.js

@ -2,7 +2,7 @@ define(function (require){
/**
* @class Grapes
* @param {Object} Configurations
*
*
* @return {Object}
* */
var Grapes = function(config)
@ -16,24 +16,24 @@ define(function (require){
if (!(name in c))
c[name] = defaults[name];
}
this.editor = new Editor(c);
var obj = {
model : this.editor,
config : c,
};
this.editorView = new EditorView(obj);
};
Grapes.prototype = {
render : function()
{
return this.editorView.render().$el;
}
};
return Grapes;
});

54
src/modal_dialog/view/ModalView.js

@ -1,14 +1,14 @@
define(['backbone', 'text!./../template/modal.html'],
define(['backbone', 'text!./../template/modal.html'],
function (Backbone, modalTemplate) {
/**
/**
* @class ModalView
* */
return Backbone.View.extend({
template: _.template(modalTemplate),
events : {},
initialize: function(o){
this.config = o.config || {};
this.pfx = this.config.stylePrefix;
@ -16,14 +16,16 @@ define(['backbone', 'text!./../template/modal.html'],
this.listenTo( this.model, 'change:title', this.updateTitle);
this.listenTo( this.model, 'change:content',this.updateContent);
this.events['click .'+this.pfx+'btn-close'] = 'hide';
if(this.config.backdrop)
this.events['click .'+this.pfx+'backlayer'] = 'hide';
this.delegateEvents();
},
/**
/**
* Update content
*
*
* @return void
* */
updateContent: function(){
@ -31,10 +33,10 @@ define(['backbone', 'text!./../template/modal.html'],
this.$content = this.$el.find('.'+this.pfx+'content #'+this.pfx+'c');
this.$content.html(this.model.get('content'));
},
/**
/**
* Update title
*
*
* @return void
* */
updateTitle: function(){
@ -42,10 +44,10 @@ define(['backbone', 'text!./../template/modal.html'],
this.$title = this.$el.find('.'+this.pfx+'title');
this.$title.html(this.model.get('title'));
},
/**
/**
* Update open
*
*
* @return void
* */
updateOpen: function(){
@ -54,56 +56,56 @@ define(['backbone', 'text!./../template/modal.html'],
else
this.$el.hide();
},
/**
* Hide modal
*
*
* @return void
* */
hide: function(){
this.model.set('open', 0);
},
/**
* Show modal
*
*
* @return void
* */
show: function(){
this.model.set('open', 1);
},
/**
* Set title
* @param {String} v Title
*
*
* @return this
* */
setTitle: function(v){
this.model.set('title',v);
return this;
},
/**
* Set content
* @param {String} v Title
*
*
* @return this
* */
setContent: function(v){
this.model.set('content',v);
return this;
},
render : function(){
var obj = this.model.toJSON();
obj.pfx = this.pfx;
this.$el.html( this.template(obj) );
this.$el.attr('class', this.pfx + 'container');
this.updateOpen();
return this;
},
});
});

56
src/navigator/view/ItemView.js

@ -1,13 +1,13 @@
define(['backbone', 'text!./../template/item.html','require'],
define(['backbone', 'text!./../template/item.html','require'],
function (Backbone, ItemTemplate, require) {
/**
/**
* @class ItemView
* */
return Backbone.View.extend({
template: _.template(ItemTemplate),
template: _.template(ItemTemplate),
initialize: function(o){
this.opt = o;
this.config = o.config;
@ -17,20 +17,22 @@ define(['backbone', 'text!./../template/item.html','require'],
this.model.set('open',false);
this.listenTo(this.model.components, 'remove add change reset', this.checkChildren);
this.listenTo(this.model, 'destroy remove', this.remove);
//this.listenTo(this.model, 'change:status', this.updateStatus);
this.listenTo(this.model, 'change:open', this.updateOpening);
this.className = this.pfx + 'item no-select';
this.events = {};
this.events['click > #'+this.pfx+'btn-eye'] = 'toggleVisibility';
this.events['click .'+this.pfx+'title'] = 'toggleOpening';
this.$el.data("model", this.model);
if(o.config.sortable)
this.events['mousedown > #'+this.pfx+'move'] = 'startSort';
this.events['mousedown > #'+this.pfx+'move'] = 'startSort';
this.delegateEvents();
},
/**
* Update item opening
*
*
* @return void
* */
updateOpening: function (){
@ -42,11 +44,11 @@ define(['backbone', 'text!./../template/item.html','require'],
this.$caret.removeClass('fa-chevron-down');
}
},
/**
* Toggle item opening
* @param {Object} e
*
*
* @return void
* */
toggleOpening: function(e){
@ -55,7 +57,7 @@ define(['backbone', 'text!./../template/item.html','require'],
return;
this.model.set('open', !this.model.get('open') );
},
/**
* Delegate to sorter
* @param Event
@ -64,7 +66,7 @@ define(['backbone', 'text!./../template/item.html','require'],
if(this.sorter)
this.sorter.startMove(this, e);
},
/**
* Freeze item
* @return void
@ -73,7 +75,7 @@ define(['backbone', 'text!./../template/item.html','require'],
this.$el.addClass(this.pfx + 'opac50');
this.model.set('open',0);
},
/**
* Unfreeze item
* @return void
@ -81,11 +83,11 @@ define(['backbone', 'text!./../template/item.html','require'],
unfreeze: function(){
this.$el.removeClass(this.pfx + 'opac50');
},
/**
* Update item on status change
* @param Event
*
*
* @return void
* */
updateStatus: function(e){
@ -106,17 +108,17 @@ define(['backbone', 'text!./../template/item.html','require'],
pr.set('status','');
}
},
/**
* Toggle visibility
* @param Event
*
*
* @return void
* */
toggleVisibility: function(e){
if(!this.$eye)
this.$eye = this.$el.find('> #'+this.pfx+'btn-eye');
var cCss = _.clone(this.model.get('style')),
hClass = this.pfx + 'hide';
if(this.isVisible()){
@ -130,10 +132,10 @@ define(['backbone', 'text!./../template/item.html','require'],
}
this.model.set('style', cCss);
},
/**
* Check if component is visible
*
*
* @return bool
* */
isVisible: function(){
@ -143,10 +145,10 @@ define(['backbone', 'text!./../template/item.html','require'],
return;
return 1;
},
/**
* Update item aspect after children changes
*
*
* @return void
* */
checkChildren: function(){
@ -163,7 +165,7 @@ define(['backbone', 'text!./../template/item.html','require'],
this.model.set('open',0);
}
},
render : function(){
var pfx = this.pfx,
vis = this.isVisible();
@ -177,7 +179,7 @@ define(['backbone', 'text!./../template/item.html','require'],
}));
if(typeof ItemsView == 'undefined')
ItemsView = require('./ItemsView');
this.$components = new ItemsView({
this.$components = new ItemsView({
collection : this.model.components,
config : this.config,
sorter : this.sorter,
@ -193,6 +195,6 @@ define(['backbone', 'text!./../template/item.html','require'],
this.$el.attr('class', _.result(this, 'className'));
return this;
},
});
});

67
src/rich_text_editor/main.js

@ -2,41 +2,40 @@ define(function(require) {
/**
* @class RichTextEditor
* @param {Object} Configurations
*
*
* @return {Object}
* */
function RichTextEditor(config)
{
var c = config || {},
rte = require('rte'),
defaults = require('./config/config'),
CommandButtons = require('./model/CommandButtons'),
var c = config || {},
defaults = require('./config/config'),
rte = require('./view/TextEditorView'),
CommandButtons = require('./model/CommandButtons'),
CommandButtonsView = require('./view/CommandButtonsView');
for (var name in defaults) {
if (!(name in c))
c[name] = defaults[name];
}
this.tlbPfx = c.stylePrefix;
this.commands = new CommandButtons(c.commands);
var obj = {
collection : this.commands,
config : c,
};
this.toolbar = new CommandButtonsView(obj);
this.$toolbar = this.toolbar.render().$el;
}
RichTextEditor.prototype = {
/**
* Bind rich text editor to element
* @param {Object} view
* @param {Object} container
*
* @return void
* @param {Object} view
* @param {Object} container
*
* */
bind : function(view, container){
if(!this.$contaniner){
@ -49,23 +48,22 @@ define(function(require) {
//Avoid closing edit mode clicking on toolbar
this.$toolbar.on('mousedown', this.disableProp);
},
/**
* Unbind rich text editor from element
* @param {Object} view
*
* @return void
* @param {Object} view
*
* */
unbind : function(view){
view.$el.wysiwyg('destroy');
this.hide();
this.$toolbar.off('mousedown', this.disableProp);
},
/**
* Bind toolbar to element
* @param {Object} view
*
* @param {Object} view
*
* @return this
* */
bindToolbar : function(view){
@ -78,12 +76,11 @@ define(function(require) {
this.toolbar.updateTarget('#' + id);
return this;
},
/**
* Update toolbar position
* @param {Object} $el Element
*
* @return void
* @param {Object} $el Element
*
*/
updatePosition: function($el){
var cOffset = this.$container.offset(),
@ -95,37 +92,35 @@ define(function(require) {
if(!this.tlbH)
this.tlbH = this.$toolbar.outerHeight();
this.$toolbar.css({
top : (rTop - this.tlbH - 5),
left : rLeft
top : (rTop - this.tlbH - 5),
left : rLeft
});
},
/**
* Show toolbar
*
* @return void
*
* */
show : function(){
this.$toolbar.show();
},
/**
* Hide toolbar
*
* @return void
*
* */
hide : function(){
this.$toolbar.hide();
},
/**
/**
* Isolate disable propagation method
* @param Event
*
* */
disableProp: function(e){
e.stopPropagation();
},
};
return RichTextEditor;
});

209
src/rich_text_editor/view/TextEditorView.js

@ -0,0 +1,209 @@
/*jslint browser:true*/
define(['jquery'],
function ($) {
var readFileIntoDataUrl = function (fileInfo) {
var loader = $.Deferred(),
fReader = new FileReader();
fReader.onload = function (e) {
loader.resolve(e.target.result);
};
fReader.onerror = loader.reject;
fReader.onprogress = loader.notify;
fReader.readAsDataURL(fileInfo);
return loader.promise();
};
$.fn.cleanHtml = function () {
var html = $(this).html();
return html && html.replace(/(<br>|\s|<div><br><\/div>|&nbsp;)*$/, '');
};
$.fn.wysiwyg = function (userOptions) {
var editor = this,
selectedRange,
options,
toolbarBtnSelector,
updateToolbar = function () {
if (options.activeToolbarClass) {
$(options.toolbarSelector).find(toolbarBtnSelector).each(function () {
var command = $(this).data(options.commandRole);
if (document.queryCommandState(command)) {
$(this).addClass(options.activeToolbarClass);
} else {
$(this).removeClass(options.activeToolbarClass);
}
});
}
},
execCommand = function (commandWithArgs, valueArg) {
var commandArr = commandWithArgs.split(' '),
command = commandArr.shift(),
args = commandArr.join(' ') + (valueArg || '');
document.execCommand(command, 0, args);
updateToolbar();
},
bindHotkeys = function (hotKeys) {
$.each(hotKeys, function (hotkey, command) {
editor.keydown(hotkey, function (e) {
if (editor.attr('contenteditable') && editor.is(':visible')) {
e.preventDefault();
e.stopPropagation();
execCommand(command);
}
}).keyup(hotkey, function (e) {
if (editor.attr('contenteditable') && editor.is(':visible')) {
e.preventDefault();
e.stopPropagation();
}
});
});
},
getCurrentRange = function () {
var sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
return sel.getRangeAt(0);
}
},
saveSelection = function () {
selectedRange = getCurrentRange();
},
restoreSelection = function () {
var selection = window.getSelection();
if (selectedRange) {
try {
selection.removeAllRanges();
} catch (ex) {
document.body.createTextRange().select();
document.selection.empty();
}
selection.addRange(selectedRange);
}
},
insertFiles = function (files) {
editor.focus();
$.each(files, function (idx, fileInfo) {
if (/^image\//.test(fileInfo.type)) {
$.when(readFileIntoDataUrl(fileInfo)).done(function (dataUrl) {
execCommand('insertimage', dataUrl);
}).fail(function (e) {
options.fileUploadError("file-reader", e);
});
} else {
options.fileUploadError("unsupported-file-type", fileInfo.type);
}
});
},
markSelection = function (input, color) {
restoreSelection();
if (document.queryCommandSupported('hiliteColor')) {
document.execCommand('hiliteColor', 0, color || 'transparent');
}
saveSelection();
input.data(options.selectionMarker, color);
},
bindToolbar = function (toolbar, options) {
toolbar.find(toolbarBtnSelector).click(function () {
restoreSelection();
editor.focus();
execCommand($(this).data(options.commandRole));
saveSelection();
});
toolbar.find('[data-toggle=dropdown]').click(restoreSelection);
toolbar.find('input[type=text][data-' + options.commandRole + ']').on('webkitspeechchange change', function () {
var newValue = this.value; /* ugly but prevents fake double-calls due to selection restoration */
this.value = '';
restoreSelection();
if (newValue) {
editor.focus();
execCommand($(this).data(options.commandRole), newValue);
}
saveSelection();
}).on('focus', function () {
var input = $(this);
if (!input.data(options.selectionMarker)) {
markSelection(input, options.selectionColor);
input.focus();
}
}).on('blur', function () {
var input = $(this);
if (input.data(options.selectionMarker)) {
markSelection(input, false);
}
});
toolbar.find('input[type=file][data-' + options.commandRole + ']').change(function () {
restoreSelection();
if (this.type === 'file' && this.files && this.files.length > 0) {
insertFiles(this.files);
}
saveSelection();
this.value = '';
});
},
initFileDrops = function () {
editor.on('dragenter dragover', false)
.on('drop', function (e) {
var dataTransfer = e.originalEvent.dataTransfer;
e.stopPropagation();
e.preventDefault();
if (dataTransfer && dataTransfer.files && dataTransfer.files.length > 0) {
insertFiles(dataTransfer.files);
}
});
};
/** Disable the editor
* @date 2015-03-19 */
if(typeof userOptions=='string' && userOptions=='destroy'){
editor.attr('contenteditable', false).unbind('mouseup keyup mouseout dragenter dragover');
$(window).unbind('touchend');
return this;
}
options = $.extend({}, $.fn.wysiwyg.defaults, userOptions);
toolbarBtnSelector = 'a[data-' + options.commandRole + '],button[data-' + options.commandRole + '],input[type=button][data-' + options.commandRole + ']';
bindHotkeys(options.hotKeys);
if (options.dragAndDropImages) {
initFileDrops();
}
bindToolbar($(options.toolbarSelector), options);
editor.attr('contenteditable', true)
.on('mouseup keyup mouseout', function () {
saveSelection();
updateToolbar();
});
$(window).bind('touchend', function (e) {
var isInside = (editor.is(e.target) || editor.has(e.target).length > 0),
currentRange = getCurrentRange(),
clear = currentRange && (currentRange.startContainer === currentRange.endContainer && currentRange.startOffset === currentRange.endOffset);
if (!clear || isInside) {
saveSelection();
updateToolbar();
}
});
return this;
};
$.fn.wysiwyg.defaults = {
hotKeys: {
'ctrl+b meta+b': 'bold',
'ctrl+i meta+i': 'italic',
'ctrl+u meta+u': 'underline',
'ctrl+z meta+z': 'undo',
'ctrl+y meta+y meta+shift+z': 'redo',
'ctrl+l meta+l': 'justifyleft',
'ctrl+r meta+r': 'justifyright',
'ctrl+e meta+e': 'justifycenter',
'ctrl+j meta+j': 'justifyfull',
'shift+tab': 'outdent',
'tab': 'indent'
},
toolbarSelector: '[data-role=editor-toolbar]',
commandRole: 'edit',
activeToolbarClass: 'btn-info',
selectionMarker: 'edit-focus-marker',
selectionColor: 'darkgrey',
dragAndDropImages: true,
fileUploadError: function (reason, detail) { console.log("File upload error", reason, detail); }
};
return $;
});

68
src/storage_manager/main.js

@ -2,7 +2,7 @@ define(function(require) {
/**
* @class StorageManager
* @param {Object} Configurations
*
*
* @return {Object}
* */
function StorageManager(config)
@ -12,72 +12,72 @@ define(function(require) {
LocalStorage = require('./model/LocalStorage'),
RemoteStorage = require('./model/RemoteStorage'),
StorageInterface = require('./model/StorageInterface');
for (var name in defaults){
if (!(name in c))
c[name] = defaults[name];
}
this.providers = {};
this.defaultProviders = {};
this.autosave = c.autosave;
this.currentProvider = c.storageType || null;
this.changesBeforeSave = c.changesBeforeSave;
this.si = new StorageInterface();
var Local = new LocalStorage(c.localStorage),
Remote = new RemoteStorage(c.remoteStorage);
this.defaultProviders[Local.getId()] = Local;
this.defaultProviders[Remote.getId()] = Remote;
}
StorageManager.prototype = {
/**
* Check if autosave enabled
*
*
* @return boolean
* */
isAutosave : function(){
return this.autosave;
},
/**
* Set autosave
* @param {Mixed} v Value
*
*
* @return this
* */
setAutosave : function(v){
this.autosave = v;
return this;
},
/**
* Returns value of changes required before save
*
*
* @return {Integer}
* */
getChangesBeforeSave : function(){
return this.changesBeforeSave;
},
/**
* Set changesBeforeSave value
* @param {Mixed} v Value
*
*
* @return this
* */
setChangesBeforeSave : function(v){
this.changesBeforeSave = v;
return this;
},
/**
* Add new storage provider
* @param {StorageInterface} provider
*
*
* @return self
* */
addProvider : function(provider) {
@ -85,17 +85,17 @@ define(function(require) {
for (var method in this.si)
if(!provider[method])
console.warn("addProvider: method '"+ method +"' was not found inside '"+ provider.getId() +"' object");
this.providers[provider.getId()] = provider;
if(!this.currentProvider)
this.currentProvider = provider.getId();
return this;
},
/**
* Returns storage provider
* @param {Integer} id Storage provider ID
*
*
* @return {StorageInterface}|null
* */
getProvider : function(id){
@ -104,19 +104,19 @@ define(function(require) {
provider = this.providers[id];
return provider;
},
/**
* Returns storage providers
*
*
* @return {Array}
* */
getProviders : function(){
return this.providers;
},
/**
* Get current provider
*
*
* @return {StorageInterface}
* */
getCurrentProvider : function() {
@ -124,21 +124,21 @@ define(function(require) {
this.loadDefaultProviders();
return this.getProvider(this.currentProvider);
},
/**
* Set current provider
* @param {Integer} id Storage provider ID
*
*
* @return this
* */
setCurrentProvider : function(id) {
this.currentProvider = id;
return this;
},
/**
* Load default providers
*
*
* @return this
* */
loadDefaultProviders : function() {
@ -147,38 +147,38 @@ define(function(require) {
}
return this;
},
/**
* Store resource
* @param {String} name Name of the resource
* @param {String} value Value of the resource
*
*
* @return {Object}|void
* */
store : function(name, value){
return this.getCurrentProvider().store(name, value);
},
/**
* Load resource
* @param {String} name Name of the resource
*
*
* @return {Object}|void
* */
load : function(name){
return this.getCurrentProvider().load(name);
},
/**
* Remove resource
* @param {String} name Name of the resource
*
*
* @return {Object}|void
* */
remove : function(name){
return this.getCurrentProvider().remove(name);
},
};
return StorageManager;
});

24
src/storage_manager/model/LocalStorage.js

@ -1,31 +1,29 @@
define(['backbone'],
define(['backbone'],
function (Backbone) {
/**
* @class LocalStorage
* */
return Backbone.Model.extend({
id: 'local',
defaults: {
checkSupport : true,
errorNoSupport : 'Error encountered while parsing JSON response',
},
/** @inheritdoc */
getId : function() {
return this.id;
return 'local';
},
/** @inheritdoc */
store : function(name, value) {
this.checkStorageEnvironment();
localStorage.setItem(name, value );
},
/** @inheritdoc */
load: function(name){
var result = null;
var result = null;
this.checkStorageEnvironment();
if(localStorage.getItem(name))
result = localStorage.getItem(name);
@ -38,14 +36,14 @@ define(['backbone'],
}
return result;
},
/** @inheritdoc */
remove : function(name) {
this.checkStorageEnvironment();
localStorage.removeItem(name);
},
/**
/**
* Check storage environment
* @return void
* */
@ -54,6 +52,6 @@ define(['backbone'],
if( !localStorage )
console.warn(this.get('errorNoSupport'));
},
});
});

28
src/storage_manager/model/RemoteStorage.js

@ -1,12 +1,10 @@
define(['backbone'],
define(['backbone'],
function (Backbone) {
/**
* @class RemoteStorage
* */
return Backbone.Model.extend({
id: 'remote',
defaults: {
urlLoad : 'http://localhost/load',
urlStore : 'http://localhost/store',
@ -16,12 +14,12 @@ define(['backbone'],
paramsLoad : {},
errorLoad : 'Response is not a valid JSON',
},
/** @inheritdoc */
getId : function() {
return this.id;
return 'remote';
},
/** @inheritdoc */
store : function(name, value) {
var fd = new FormData(),
@ -33,14 +31,14 @@ define(['backbone'],
$.ajax({
url: this.get('urlStore'),
beforeSend: this.get('beforeSend'),
complete: this.get('onComplete'),
complete: this.get('onComplete'),
type: 'POST',
processData: false,
contentType: false,
data: fd,
});
},
/** @inheritdoc */
load: function(name){
var result = null,
@ -58,23 +56,23 @@ define(['backbone'],
if(typeof d !== 'object')
throw prx + t.get('errorLoad');
result = d.data ? d.data[name] : d[name];
if(!result)
throw prx + ' Resource was not found';
}catch(err){
console.warn(err);
}
});
return result;
},
/** @inheritdoc */
remove : function(name) {
},
});
});

42
src/style_manager/view/LayerView.js

@ -1,16 +1,16 @@
define(['backbone', 'text!./../templates/layer.html'],
define(['backbone', 'text!./../templates/layer.html'],
function (Backbone, layerTemplate) {
/**
/**
* @class LayerView
* */
return Backbone.View.extend({
events:{
'click' : 'updateIndex',
},
template: _.template(layerTemplate),
initialize: function(o) {
this.stackModel = o.stackModel || {};
this.config = o.config;
@ -20,11 +20,11 @@ define(['backbone', 'text!./../templates/layer.html'],
this.listenTo( this.model, 'change:valuePreview', this.previewChanged );
this.listenTo( this.model, 'change:props', this.showProps );
this.events['click #' + this.pfx + 'close-layer'] = 'remove';
if( !this.model.get('preview') ){
this.$el.addClass(this.pfx + 'no-preview');
}
// Parse preview value if requested
var pPattern = this.model.get('patternPreview');
if(this.model.get('valuePreview') && pPattern){
@ -32,12 +32,14 @@ define(['backbone', 'text!./../templates/layer.html'],
var nV = this.formatPreviewValue(pPattern);
this.model.set({valuePreview: nV}, {silent: true});
}
this.delegateEvents();
},
/**
* Format preview value by pattern of property models
* @param Objects Property models
*
*
* @return string
* */
formatPreviewValue: function(props){
@ -60,10 +62,10 @@ define(['backbone', 'text!./../templates/layer.html'],
});
return nV;
},
/**
* Show inputs on this layer
*
*
* @return void
* */
showProps:function(){
@ -71,10 +73,10 @@ define(['backbone', 'text!./../templates/layer.html'],
this.$el.find('#' + this.pfx + 'inputs').html(this.$props.show());
this.model.set({ props: null },{ silent: true });
},
/**
* Triggered when the value for the preview is changed
*
*
* @return void
* */
previewChanged:function(){
@ -86,7 +88,7 @@ define(['backbone', 'text!./../templates/layer.html'],
this.$preview.css(property,this.model.get('valuePreview'));
}
},
/** @inheritdoc */
remove: function(e){
// Prevent from revoming all events on props
@ -98,11 +100,11 @@ define(['backbone', 'text!./../templates/layer.html'],
this.stackModel.trigger('refreshValue');
this.stackModel.set({stackIndex: null},{silent: true});
},
/**
* Update index
* @param Event
*
*
* @return void
* */
updateIndex: function(e){
@ -111,19 +113,19 @@ define(['backbone', 'text!./../templates/layer.html'],
this.model.collection.trigger('deselectAll');
this.$el.addClass(this.pfx + 'active');
},
render : function(){
var index = this.model.collection.indexOf(this.model);
var index = this.model.collection.indexOf(this.model);
this.$el.html( this.template({
label : 'Layer '+index,
name : this.model.get('name'),
vPreview : this.model.get('valuePreview'),
vPreview : this.model.get('valuePreview'),
pPreview : this.model.get('propertyPreview'),
pfx : this.pfx,
}));
this.$el.attr('class', this.className);
return this;
},
});
});

47
src/style_manager/view/PropertyFileView.js

@ -1,12 +1,12 @@
define(['backbone','./PropertyView', 'text!./../templates/propertyFile.html'],
define(['backbone','./PropertyView', 'text!./../templates/propertyFile.html'],
function (Backbone, PropertyView, propertyTemplate) {
/**
/**
* @class PropertyColorView
* */
return PropertyView.extend({
template: _.template(propertyTemplate),
initialize: function(options) {
PropertyView.prototype.initialize.apply(this, arguments);
this.assets = this.target.get('assets');
@ -15,35 +15,36 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyFile.html'],
this.className = this.className + ' '+ this.pfx +'file';
this.events['click #'+this.pfx+'close'] = 'removeFile';
this.events['click #'+this.pfx+'images'] = 'openAssetManager';
this.delegateEvents();
},
/** @inheritdoc */
renderInput: function() {
if(!this.$input){
this.$input = $('<input>', {placeholder: this.defaultValue, type: 'text' });
}
if(!this.$preview){
this.$preview = this.$el.find('#' + this.pfx + 'preview-file');
}
if(!this.$previewBox){
this.$previewBox = this.$el.find('#' + this.pfx + 'preview-box');
}
if(!this.componentValue || this.componentValue == this.defaultValue)
this.setPreviewView(0);
else
this.setPreviewView(1);
this.setValue(this.componentValue,0);
},
/**
* Change visibility of the preview box
* @param bool Visibility
*
*
* @return void
* */
setPreviewView: function(v){
@ -54,18 +55,18 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyFile.html'],
else
this.$previewBox.removeClass(this.pfx + 'show');
},
/**
* Spread url
* @param string Url
*
*
* @return void
* */
spreadUrl: function(url){
this.setValue('url("'+url+'")');
this.setPreviewView(1);
},
/**
* Shows file preview
* @param string Value
@ -74,13 +75,13 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyFile.html'],
if(this.$preview)
this.$preview.css('background-image',v);
},
/** @inheritdoc */
setValue: function(value, f){
PropertyView.prototype.setValue.apply(this, arguments);
this.setPreview(value);
},
/** @inheritdoc */
renderTemplate: function(){
this.$el.append( this.template({
@ -89,16 +90,16 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyFile.html'],
pfx : this.pfx
}));
},
/** @inheritdoc */
cleanValue: function(){
this.setPreviewView(0);
this.model.set({value: ''},{silent: true});
},
/**
* Remove file from input
*
*
* @return void
* */
removeFile:function(){
@ -106,11 +107,11 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyFile.html'],
PropertyView.prototype.cleanValue.apply(this, arguments);
this.setPreviewView(0);
},
/**
* Open dialog for image selecting
* @param {Object} e Event
*
*
* @return void
* */
openAssetManager: function(e){
@ -127,7 +128,7 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyFile.html'],
});
}
},
});
});

49
src/style_manager/view/PropertyIntegerView.js

@ -1,24 +1,25 @@
define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html'],
define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html'],
function (Backbone, PropertyView, propertyTemplate) {
/**
/**
* @class PropertyIntegerView
* */
return PropertyView.extend({
template: _.template(propertyTemplate),
initialize: function(options) {
PropertyView.prototype.initialize.apply(this, arguments);
_.bindAll(this, 'moveIncrement', 'upIncrement');
this.events['click .'+this.pfx+'u-arrow'] = 'upArrowClick';
this.events['click .'+this.pfx+'d-arrow'] = 'downArrowClick';
this.events['mousedown .'+this.pfx+'int-arrows'] = 'downIncrement';
this.delegateEvents();
},
/**
/**
* Invoked when the up arrow is clicked
* @param Event
*
*
* @return void
* */
upArrowClick: function(e){
@ -27,11 +28,11 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
value = value > this.max ? this.max : value;
this.model.set('value',value);
},
/**
/**
* Invoked when the down arrow is clicked
* @param Event
*
*
* @return void
* */
downArrowClick: function(e){
@ -40,11 +41,11 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
value = value < this.min ? this.min : value;
this.model.set('value',value);
},
/**
/**
* Change easily integer input value with click&drag method
* @param Event
*
*
* @return void
* */
downIncrement: function(e) {
@ -56,10 +57,10 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
$(document).mouseup(current, this.upIncrement);
$(document).mousemove(current, this.moveIncrement);
},
/** While the increment is clicked, moving the mouse will update input value
* @param Object
*
*
* @return bool
* */
moveIncrement: function (ev) {
@ -68,21 +69,21 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
this.model.set( 'value', this.prValue, { avoidStore: 1 });
return false;
},
/**
/**
* Stop moveIncrement method
* @param Object
*
*
* @return void
* */
upIncrement: function (e) {
$(document).off('mouseup', this.upIncrement);
$(document).off('mousemove', this.moveIncrement);
if(this.prValue && this.moved)
this.model.set('value', this.prValue - 1, {silent:1}).set('value', this.prValue + 1);
},
/** @inheritdoc */
renderInput: function() {
var pfx = this.pfx;
@ -104,12 +105,12 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
}
this.setValue(this.componentValue);
},
/** @inheritdoc */
setValue: function(value){
var u = this.unit,
v = this.model.get('value') || this.defaultValue;
if(value){
v = parseInt(value, 10);
v = !isNaN(v) ? v : this.defaultValue;
@ -117,13 +118,13 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyInteger.html']
if(_.indexOf(this.units, uN) > -1)
u = uN;
}
if(this.$input)
this.$input.val(v);
if(this.$unit)
this.$unit.val(u);
this.model.set({value: v, unit: u,},{silent: true});
},
});
});

66
src/style_manager/view/PropertyStackView.js

@ -1,12 +1,12 @@
define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack.html','./../model/Layers','./LayersView'],
define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack.html','./../model/Layers','./LayersView'],
function (Backbone, PropertyCompositeView, propertyTemplate, Layers, LayersView) {
/**
/**
* @class PropertyStackView
* */
return PropertyCompositeView.extend({
template: _.template(propertyTemplate),
initialize: function(o) {
PropertyCompositeView.prototype.initialize.apply(this, arguments);
this.model.set('stackIndex', null);
@ -14,23 +14,25 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack
this.listenTo( this.model ,'refreshValue', this.refreshValue);
this.className = this.pfx + 'property '+ this.pfx +'stack';
this.events['click #'+this.pfx+'add'] = 'addLayer';
if(!this.layers){
this.layers = new Layers();
this.model.set('layers', this.layers);
this.$layers = new LayersView({
this.$layers = new LayersView({
collection : this.layers,
stackModel : this.model,
preview : this.model.get('preview'),
config : o.config
});
}
this.delegateEvents();
},
/**
* Triggered when another layer has been selected
* @param Event
*
*
* @return Object
* */
indexChanged: function(e){
@ -38,10 +40,10 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack
layer.set('props', this.$props);
this.target.trigger('change:selectedComponent');
},
/**
* Get array of values from layers
*
*
* @return Array
* */
getStackValues: function(){
@ -51,18 +53,18 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack
});
return a;
},
/**
* Extract string from composite value
* @param integer Index
*
*
* @return string
* */
valueOnIndex: function(index){
var result = null;
var aStack = this.getStackValues();
var strVar = aStack[this.model.get('stackIndex')];
if(!strVar)
return;
var a = strVar.split(' ');
@ -71,7 +73,7 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack
}
return result;
},
/** @inheritdoc */
build: function(selectedEl, propertyModel){
if(this.model.get('stackIndex') === null)
@ -89,14 +91,14 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack
model.set('propertyPreview', this.property);
model.set('valuePreview',result);
}
return this.createValue();
},
/**
* Change preview value. Limited integer values
* @param Models
*
*
* @return string
* */
onPreview: function(properties){
@ -110,14 +112,14 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack
}
str += v + p.get('unit')+' ';
});
return str;
},
/**
* Add layer
* @param Event
*
*
* @return Object
* */
addLayer: function(e){
@ -130,16 +132,16 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack
return layer;
}
},
/**
* Refresh value
*
*
* @return void
* */
refreshValue: function(){
this.model.set('value', this.createValue());
},
/**
* Create value by layers
* @return string
@ -147,10 +149,10 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack
createValue: function(){
return this.getStackValues().join(', ');
},
/**
* Render layers
*
*
* @return self
* */
renderLayers: function() {
@ -158,16 +160,16 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack
this.$props.hide();
return this;
},
/** @inheritdoc */
renderInput: function() {
PropertyCompositeView.prototype.renderInput.apply(this, arguments);
this.refreshLayers();
},
/**
* Refresh layers
*
*
* @return void
* */
refreshLayers: function(){
@ -176,10 +178,10 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack
if(v){
var a = v.split(', ');
_.each(a,function(e){
n.push({ value: e,
valuePreview: e,
n.push({ value: e,
valuePreview: e,
propertyPreview: this.property,
patternPreview: this.props
patternPreview: this.props
});
},this);
}
@ -188,7 +190,7 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack
this.refreshValue();
this.model.set({stackIndex: null},{silent: true});
},
/** @inheritdoc */
render : function(){
this.renderLabel();

35
src/style_manager/view/SectorView.js

@ -1,40 +1,41 @@
define(['backbone','./PropertiesView'],
define(['backbone','./PropertiesView'],
function (Backbone,PropertiesView) {
/**
/**
* @class SectorView
* */
return Backbone.View.extend({
events:{},
initialize: function(o) {
this.config = o.config;
this.pfx = this.config.stylePrefix;
this.target = o.target || {};
this.open = this.model.get('open');
this.events['click .' + this.pfx + 'title'] = 'toggle';
this.delegateEvents();
},
/**
* Show the content of the sector
/**
* Show the content of the sector
* */
show : function(){
this.$el.addClass(this.pfx + "open");
this.$el.find('.' + this.pfx + 'properties').show();
this.open = true;
},
/**
* Hide the content of the sector
/**
* Hide the content of the sector
* */
hide : function(){
this.$el.removeClass(this.pfx + "open");
this.$el.find('.' + this.pfx + 'properties').hide();
this.open = false;
},
/**
* Toggle visibility of the content
/**
* Toggle visibility of the content
* */
toggle: function(){
if(this.open)
@ -42,7 +43,7 @@ define(['backbone','./PropertiesView'],
else
this.show();
},
render : function(){
if(this.open)
this.show();
@ -53,13 +54,13 @@ define(['backbone','./PropertiesView'],
this.$el.attr('class', this.pfx + 'sector no-select');
return this;
},
renderProperties: function(){
var objs = this.model.get('properties');
if(objs){
var view = new PropertiesView({
collection : objs,
collection : objs,
target : this.target,
config : this.config,
});

2
styles/css/main.css

@ -769,7 +769,7 @@ div.wte-com-hover-move {
.wte-cm-editor#wte-cm-css #wte-cm-title {
color: #ddca7e; }
.wte-cm-editor #wte-cm-title {
background-color: #353535;
background-color: #3a3a3a;
font-size: 12px;
padding: 5px 10px 3px;
text-align: right; }

2
styles/css/main.css.map

File diff suppressed because one or more lines are too long

166
styles/scss/main.scss

@ -71,13 +71,13 @@ html,body,#wte-app, .#{$app-prefix}editor{ height: 100%; }
@include user-select(none);
}
#wte-app{
height: 100%;
height: 100%;
min-width: 1250px;
}
.#{$app-prefix}editor{
position:relative;
border: 3px solid $mainColor;
border-left:none;
border-left:none;
border-right:none;
box-sizing: border-box;
}
@ -89,7 +89,7 @@ html,body,#wte-app, .#{$app-prefix}editor{ height: 100%; }
top: 0; left: 3.5%;
overflow: auto;
z-index:1;
> div {
height: 100%;
overflow: auto;
@ -128,8 +128,8 @@ html,body,#wte-app, .#{$app-prefix}editor{ height: 100%; }
/*********TEST**********/
body.dragging, body.dragging * { cursor: move !important;}
.dragged {
position: absolute;
.dragged {
position: absolute;
@include opacity(0.50);
z-index: 2000;}
ol.example li.placeholder {position: relative;}
@ -142,7 +142,7 @@ ol.example li.placeholder:before {position: absolute;}
/********* COMMANDS **********/
.#{$com-prefix}dashed div {
outline: 1px dashed #888;
outline: 1px dashed #888;
outline-offset: -2px;
box-sizing: border-box;
}
@ -162,7 +162,7 @@ div.#{$com-prefix}hover-move{
}
.#{$com-prefix}badge{
pointer-events: none;
background-color: $colorBlue;
background-color: $colorBlue;
color: #fff;
padding: 2px 5px;
position: absolute; z-index: 1;
@ -170,11 +170,11 @@ div.#{$com-prefix}hover-move{
}
.#{$com-prefix}badge-red{
@extend .#{$com-prefix}badge;
background-color: $colorRed;
background-color: $colorRed;
}
.#{$com-prefix}badge-yellow{
@extend .#{$com-prefix}badge;
background-color: $colorYell;
background-color: $colorYell;
}
.#{$com-prefix}placeholder{
position: absolute;
@ -198,26 +198,26 @@ $leftWidth: 16.5%;
box-sizing: border-box;
text-align: center;
z-index:3;
&##{$pn-prefix}commands{
min-width: 35px;
height: 100%;
width: 3.5%; left:0;
}
&##{$pn-prefix}options{
@extend ##{$pn-prefix}commands;
bottom: 0;
height: auto;
}
&##{$pn-prefix}views{
border-bottom: 2px solid darken($mainColor, 3%);
right: 0;
width: $leftWidth;
z-index: 4;
}
&##{$pn-prefix}views-container{
height: 100%;
padding: 50px 0 0;
@ -240,19 +240,19 @@ $leftWidth: 16.5%;
cursor: pointer;
padding: 0 5px;
position: relative;
&.#{$pn-prefix}active{
background-color: $mainDkColor;
box-shadow: 0 0 3px darken($mainDkColor,5%) inset;
}
> .#{$pn-prefix}arrow-rd {
border-bottom: 5px solid $fontColor;
border-left: 5px solid transparent;
bottom: 2px; right: 2px;
position: absolute;
}
> .#{$pn-prefix}buttons{
background-color: $mainColor;
border-radius: 2px;
@ -261,9 +261,9 @@ $leftWidth: 16.5%;
left: 50px;
top: 0;
padding: 5px;
&.#{$pn-prefix}visible{ display: block; }
> .#{$pn-prefix}arrow-l {
border-bottom: 5px solid transparent;
border-right: 5px solid $mainColor;
@ -326,7 +326,7 @@ $leftWidth: 16.5%;
padding: 7px 10px 7px 30px;
}
.#{$nv-prefix}item ##{$nv-prefix}caret {
font-size: 7px;
font-size: 7px;
width: 8px;
}
}
@ -340,8 +340,8 @@ $leftWidth: 16.5%;
border-top: 1px solid lighten($mainDkColor,3%);/*#414141*/
cursor:pointer;
}
.#{$nv-prefix}item .#{$nv-prefix}children .#{$nv-prefix}title{
border-left: 1px solid lighten($mainDkColor,2%);
.#{$nv-prefix}item .#{$nv-prefix}children .#{$nv-prefix}title{
border-left: 1px solid lighten($mainDkColor,2%);
}
.#{$nv-prefix}item > .#{$nv-prefix}children {
margin-left: 15px;
@ -372,7 +372,7 @@ $leftWidth: 16.5%;
border: 2px dashed #ccc;
outline:none !important;
position: absolute; z-index: 55;
opacity:0.55;
opacity:0.55;
filter: alpha(opacity=55);
}
@ -389,7 +389,7 @@ $leftWidth: 16.5%;
text-align: center;
font-size: $imageCompDim/3;
cursor: pointer;
&.fa-picture-o::after{
content: "\f03e";
}
@ -406,23 +406,23 @@ $inputFontColor: darken($fontColor,10%); /*#d5d5d5*/
$arrowColor: darken($fontColor,24%); /*b1b1b1*/
.#{$sm-prefix}close-btn{
display:block;
display:block;
font-size: 23px;
position: absolute;
cursor: pointer;
right: 5px;
top: 0;
@include opacity(0.2);
&:hover{ @include opacity(0.7); }
}
.#{$sm-prefix}sector {
clear:both;
clear:both;
border-bottom: 1px solid $darkBorder;
color: $fontColor;
font-weight: lighter;
text-align:left;
.#{$sm-prefix}title{
background-color: $mainDkColor;
font-size: 13px;
@ -433,15 +433,15 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
border-top: 1px solid $lightBorder;
cursor:pointer;
}
.#{$sm-prefix}label {
.#{$sm-prefix}label {
margin: 5px 5px 2px 0;
}
/*------------------Field--------------------*/
.#{$sm-prefix}field {
width: 100%;
position:relative;
input {
box-sizing: border-box;
color: $inputFontColor;
@ -449,20 +449,20 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
padding: 3px 21px 3px 0;
width: 100%;
}
select {
background: none; border: none;
color: $inputFontColor;
color: $inputFontColor;
color: transparent;
width: 100%; padding: 2px 0;
text-shadow: 0 0 0 $inputFontColor;
position: relative;
position: relative;
z-index:1;
@include appearance(none);
&::-ms-expand { display: none;}
}
.#{$sm-prefix}unit {
position: absolute;
right: 10px; top: 3px;
@ -470,7 +470,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
color: $arrowColor;
cursor:pointer;
}
.#{$sm-prefix}int-arrows, .#{$sm-prefix}sel-arrow{
height: 100%; width: 9px;
position: absolute;
@ -478,7 +478,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
cursor: ns-resize;
}
.#{$sm-prefix}sel-arrow{ cursor:pointer }
.#{$sm-prefix}u-arrow, .#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow{
position: absolute;
height: 0; width: 0;
@ -486,7 +486,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
border-right: 4px solid transparent;
cursor:pointer;
}
.#{$sm-prefix}u-arrow {
border-bottom: 4px solid $arrowColor;
top: 4px;
@ -514,11 +514,11 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
border: 1px solid darken($mainDkColor, 2.5%);
}
&.#{$sm-prefix}list{
width:auto;
width:auto;
padding:0;
overflow: hidden;
float:left;
input{ display:none; }
label{ cursor:pointer; padding: 5px; display:block;}
.#{$sm-prefix}radio:checked + label{
@ -532,33 +532,33 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
//padding: 5px 19px;
}
}
&.#{$sm-prefix}integer select{ width:auto; padding: 0; color: transparent;}
}
/*------------------END Field--------------------*/
.#{$sm-prefix}list .#{$sm-prefix}el{
float:left;
border-left: 1px solid $darkTextShadow;
text-shadow: 0 1px 0 darken($mainDkColor, 9%);/*232323*/
&:first-child{border:none}
&:hover{background: $mainDkColor; }
}
.#{$sm-prefix}properties {
font-size: 11px;
padding: 10px 5px;
}
/*------------------Property--------------------*/
.#{$sm-prefix}property{
box-sizing: border-box;
float:left; width:50%;
margin-bottom: 5px;
padding: 0 5px;
&.#{$sm-prefix}file, &.#{$sm-prefix}composite, &.#{$sm-prefix}stack, &.#{$sm-prefix}list{
width:100%;
}
@ -568,7 +568,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
box-shadow: 1px 1px 0 lighten($mainDkColor, 2%), 1px 1px 0 lighten($mainDkColor, 17%) inset;
padding: 5px;
position: relative;
text-align: center;
text-align: center;
height: auto; width: 100%;
cursor: pointer;
color: $fontColor;
@ -583,14 +583,14 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
width: 100%;
padding: 0 5px;
}
&.#{$sm-prefix}file ##{$sm-prefix}preview-box {
background-color: $lightBorder;
border-radius: 2px;
margin-top: 5px;
position:relative;
overflow: hidden;
&.#{$sm-prefix}show{
border: 1px solid darken($lightBorder,1%);
padding: 3px 5px;
@ -606,7 +606,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
background-repeat: no-repeat;
background-position: center center;
}
.#{$sm-prefix}layers {
background-color: $mainDkColor;
border: 1px solid darken($mainDkColor, 2.5%);
@ -615,7 +615,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
margin-top: 5px;
min-height: 30px;
}
.#{$sm-prefix}layer {
background-color: lighten($mainDkColor, 4.5%);
border-radius: 2px;
@ -624,7 +624,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
padding: 7px;
position: relative;
cursor: pointer;
> ##{$sm-prefix}preview-box {
@extend .checker-bg;
height: 15px;
@ -637,7 +637,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
border-radius:2px;
}
##{$sm-prefix}close-layer{
display:block;
display:block;
font-size: 23px;
position: absolute;
cursor: pointer;
@ -659,9 +659,9 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
}
}
/*------------------END Property--------------------*/
.#{$sm-prefix}stack .#{$sm-prefix}properties{padding-top: 5px;}
.#{$sm-prefix}stack ##{$sm-prefix}add {
background: none;
border: none;
@ -672,10 +672,10 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
position: absolute;
right: 0; top: -20px;
opacity: 0.75;
&:hover{ @include opacity(1); }
}
.#{$sm-prefix}color-picker {
background-color: $fontColor;
border: 2px solid lighten($mainDkColor, 11.5%);
@ -685,7 +685,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
position: absolute;
right: 0; top: 0;
}
.#{$sm-prefix}btn-upload ##{$sm-prefix}upload {
left: 0; top: 0;
position: absolute;
@ -694,7 +694,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
cursor: pointer;
}
.#{$sm-prefix}btn-upload ##{$sm-prefix}label { padding: 2px 0;}
}
/********* END Style Manager **********/
@ -727,7 +727,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
font-weight: lighter;
position:relative;
z-index: 2;
.#{$mdl-prefix}btn-close {
@extend .btn-cl;
position: absolute;
@ -736,7 +736,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
}
.#{$mdl-prefix}header, .#{$mdl-prefix}content{
padding:10px 15px;
padding:10px 15px;
clear: both;
}
.#{$mdl-prefix}header{
@ -755,20 +755,20 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
border-radius: 3px;
box-sizing: border-box;
padding: 10px;
width: 45%;
width: 45%;
float:right;
height: 325px;
overflow: auto;
.#{$am-prefix}highlight { background-color: $mainColor; }
.#{$am-prefix}asset {
border-bottom: 1px solid darken($mainDkColor, 3%);
padding: 5px;
cursor:pointer;
position: relative;
&:hover ##{$am-prefix}close { display: block;}
##{$am-prefix}preview{
height: 70px; width: 30%;
background-position: center center;
@ -786,7 +786,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
top: 0;
display: none;
}
##{$am-prefix}meta {
width: 70%;
float: left;
@ -807,9 +807,9 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
$uploadPadding: 150px 10px;
.#{$am-prefix}file-uploader {
width: 55%;
width: 55%;
float:left;
> form {
background-color: $mainDkColor;
border: 2px dashed #999999;
@ -817,16 +817,16 @@ $uploadPadding: 150px 10px;
position: relative;
text-align: center;
margin-bottom: 15px;
&.#{$am-prefix}hover {
border: 2px solid $colorGreen;
color: lighten($colorGreen, 5%); /*#7ee07e*/
}
&.#{$am-prefix}disabled{
border-color: red;
}
##{$am-prefix}uploadFile{
@include opacity(0);
padding: $uploadPadding;
@ -834,7 +834,7 @@ $uploadPadding: 150px 10px;
box-sizing: border-box;
}
}
##{$am-prefix}title {
position: absolute;
padding: $uploadPadding;
@ -852,19 +852,19 @@ $uploadPadding: 150px 10px;
}
.#{$cm-prefix}editor{
font-size: 12px;
&##{$cm-prefix}htmlmixed {
padding-right: 10px;
&##{$cm-prefix}htmlmixed {
padding-right: 10px;
border-right: 1px solid $mainDkColor;
##{$cm-prefix}title { color: #a97d44;}
}
&##{$cm-prefix}css {
padding-left: 10px;
padding-left: 10px;
border-left: 1px solid $mainLhColor;
##{$cm-prefix}title { color: #ddca7e;}
}
##{$cm-prefix}title {
background-color: #353535;
background-color: $mainDkColor;
font-size: 12px;
padding: 5px 10px 3px;
text-align: right;
@ -880,7 +880,7 @@ $uploadPadding: 150px 10px;
border-radius: 3px;
overflow: hidden;
z-index: 5;
.#{$rte-prefix}btn {
color: $fontColor;
padding: 5px;
@ -888,7 +888,7 @@ $uploadPadding: 150px 10px;
border-right: 1px solid #353535;
text-align: center;
cursor: pointer;
&:last-child{ border-right:none; }
&.btn-info{ background-color: darken($mainDkColor,3%); }
&:hover { background-color: $mainLhColor;}
@ -933,12 +933,12 @@ $uploadPadding: 150px 10px;
}
.sp-dragger{background:transparent; box-shadow: 0 0 0 1px #111;}
.sp-button-container{
float: none;
width: 100%;
float: none;
width: 100%;
position: relative;
text-align: right;
}
.sp-container button, .sp-container button:hover, .sp-container button:active{
.sp-container button, .sp-container button:hover, .sp-container button:active{
background: #333;
border-color: #292929;
color: #757575;

Loading…
Cancel
Save