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

Merge branch 'new-panels' into dev

pull/202/head
Artur Arseniev 9 years ago
parent
899bd0810a f9598aa43d
commit
d5b7e6548a
7 changed files with 158 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      dist/css/grapes.min.css
  2. 79
      index.html
  3. 10
      src/commands/view/Resize.js
  4. 52
      src/panels/view/PanelView.js
  5. 25
      src/panels/view/PanelsView.js
  6. 25
      src/styles/scss/_gjs_canvas.scss
  7. 40
      src/utils/Resizer.js

2
dist/css/grapes.min.css
View File

File diff suppressed because one or more lines are too long

79
index.html
View File

@ -12,8 +12,7 @@
body, html{ height: 100%; margin: 0;} body, html{ height: 100%; margin: 0;}
</style> </style>
<body> <body>
<div id="gjs" style="height:0px; overflow:hidden;">
<div id="gjs" style="height:0px; overflow:hidden">
<header class="header-banner"> <header class="header-banner">
<div class="container-width"> <div class="container-width">
<div class="logo-container"> <div class="logo-container">
@ -870,33 +869,33 @@
*/ */
commands: { commands: {
defaults : [{ defaults: [{
id: 'open-github', id: 'open-github',
run: function(editor, sender){ run: function(editor, sender){
sender.set('active',false); sender.set('active',false);
window.open('https://github.com/artf/grapesjs','_blank'); window.open('https://github.com/artf/grapesjs','_blank');
} }
},{ },{
id: 'undo', id: 'undo',
run: function(editor, sender){ run: function(editor, sender){
sender.set('active',false); sender.set('active',false);
editor.UndoManager.undo(true); editor.UndoManager.undo(true);
} }
},{ },{
id: 'redo', id: 'redo',
run: function(editor, sender){ run: function(editor, sender){
sender.set('active',false); sender.set('active',false);
editor.UndoManager.redo(true); editor.UndoManager.redo(true);
} }
},{ },{
id: 'clean-all', id: 'clean-all',
run: function(editor, sender){ run: function(editor, sender){
sender.set('active',false); sender.set('active',false);
if(confirm('Are you sure to clean the canvas?')){ if(confirm('Are you sure to clean the canvas?')){
var comps = editor.DomComponents.clear(); var comps = editor.DomComponents.clear();
} }
} }
}], }],
}, },
assetManager: { assetManager: {
@ -904,17 +903,17 @@
storeOnChange : true, storeOnChange : true,
storeAfterUpload : true, storeAfterUpload : true,
assets : [ assets : [
{ type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg', height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg', height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/c5d647/fff/image4.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/c5d647/fff/image4.jpg', height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/f28c33/fff/image5.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/f28c33/fff/image5.jpg', height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/e868a2/fff/image6.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/e868a2/fff/image6.jpg', height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/cc4360/fff/image7.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/cc4360/fff/image7.jpg', height:350, width:250},
{ type: 'image', src : './img/work-desk.jpg', date: '2015-02-01',height:1080, width:1728}, { type: 'image', src : './img/work-desk.jpg', date: '2015-02-01',height:1080, width:1728},
{ type: 'image', src : './img/phone-app.png', date: '2015-02-01',height:650, width:320}, { type: 'image', src : './img/phone-app.png', date: '2015-02-01',height:650, width:320},
{ type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728}, { type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728},
] ]
}, },

10
src/commands/view/Resize.js
View File

@ -1,14 +1,15 @@
module.exports = { module.exports = {
run(editor, sender, opts) { run(editor, sender, opts) {
var el = (opts && opts.el) || ''; var opt = opts || {};
var el = opt.el || '';
var canvas = editor.Canvas; var canvas = editor.Canvas;
var canvasResizer = this.canvasResizer; var canvasResizer = this.canvasResizer;
var options = opts.options || {}; var options = opt.options || {};
var canvasView = canvas.getCanvasView();
// Create the resizer for the canvas if not yet created // Create the resizer for the canvas if not yet created
if(!canvasResizer) { if(!canvasResizer || opt.forceNew) {
var canvasView = canvas.getCanvasView();
options.ratioDefault = 1; options.ratioDefault = 1;
options.appendTo = canvas.getResizerEl(); options.appendTo = canvas.getResizerEl();
options.prefix = editor.getConfig().stylePrefix; options.prefix = editor.getConfig().stylePrefix;
@ -20,6 +21,7 @@ module.exports = {
canvasResizer.setOptions(options); canvasResizer.setOptions(options);
canvasResizer.focus(el); canvasResizer.focus(el);
return canvasResizer;
}, },
stop() { stop() {

52
src/panels/view/PanelView.js
View File

@ -27,20 +27,68 @@ module.exports = Backbone.View.extend({
this.$el.html(this.model.get('content')); this.$el.html(this.model.get('content'));
}, },
initResize() {
const em = this.config.em;
const editor = em ? em.get('Editor') : '';
const resizable = this.model.get('resizable');
if (editor && resizable) {
var resz = resizable === true ? [1, 1, 1, 1] : resizable;
var resLen = resz.length;
var tc, cr, bc, cl = 0;
// Choose which sides of the panel are resizable
if (resLen == 2) {
tc = resz[0];
bc = resz[0];
cr = resz[1];
cl = resz[1];
} else if (resLen == 4) {
tc = resz[0];
cr = resz[1];
bc = resz[2];
cl = resz[3];
}
var resizer = editor.Utils.Resizer.init({
tc,
cr,
bc,
cl,
tl: 0,
tr: 0,
bl: 0,
br: 0,
appendTo: this.el,
prefix: editor.getConfig().stylePrefix,
posFetcher: (el) => {
var rect = el.getBoundingClientRect();
return {
left: 0, top: 0,
width: rect.width,
height: rect.height
};
}
});
resizer.blur = () => {};
resizer.focus(this.el);
}
},
render() { render() {
this.$el.attr('class', _.result(this, 'className')); this.$el.attr('class', this.className);
if(this.id) if(this.id)
this.$el.attr('id', this.id); this.$el.attr('id', this.id);
if(this.buttons.length){ if (this.buttons.length) {
var buttons = new ButtonsView({ var buttons = new ButtonsView({
collection: this.buttons, collection: this.buttons,
config: this.config, config: this.config,
}); });
this.$el.append(buttons.render().el); this.$el.append(buttons.render().el);
} }
this.$el.append(this.model.get('content')); this.$el.append(this.model.get('content'));
return this; return this;
}, },

25
src/panels/view/PanelsView.js
View File

@ -7,8 +7,8 @@ module.exports = Backbone.View.extend({
this.opt = o || {}; this.opt = o || {};
this.config = this.opt.config || {}; this.config = this.opt.config || {};
this.pfx = this.config.stylePrefix || ''; this.pfx = this.config.stylePrefix || '';
this.listenTo( this.collection, 'add', this.addTo ); this.listenTo(this.collection, 'add', this.addTo );
this.listenTo( this.collection, 'reset', this.render ); this.listenTo(this.collection, 'reset', this.render );
this.className = this.pfx + 'panels'; this.className = this.pfx + 'panels';
}, },
@ -34,20 +34,25 @@ module.exports = Backbone.View.extend({
* */ * */
addToCollection(model, fragmentEl) { addToCollection(model, fragmentEl) {
var fragment = fragmentEl || null; var fragment = fragmentEl || null;
var viewObject = PanelView; var view = new PanelView({
var view = new viewObject({
model, model,
config: this.config, config: this.config,
}); });
var rendered = view.render().el; var rendered = view.render().el;
var appendTo = model.get('appendTo');
if(fragment){ if (appendTo) {
fragment.appendChild(rendered); var appendEl = document.querySelector(appendTo);
}else{ appendEl.appendChild(rendered);
this.$el.append(rendered); } else {
if (fragment) {
fragment.appendChild(rendered);
} else {
this.$el.append(rendered);
}
} }
view.initResize();
return rendered; return rendered;
}, },
@ -60,7 +65,7 @@ module.exports = Backbone.View.extend({
}, this); }, this);
this.$el.append(fragment); this.$el.append(fragment);
this.$el.attr('class', _.result(this, 'className')); this.$el.attr('class', this.className);
return this; return this;
} }
}); });

25
src/styles/scss/_gjs_canvas.scss
View File

@ -185,6 +185,31 @@ $hndlMargin: -5px;
cursor: nwse-resize; cursor: nwse-resize;
} }
.#{$pn-prefix}panel {
.#{$app-prefix}resizer-h {
background-color: rgba(0, 0, 0, 0.2);
border: none;
opacity: 0;
transition: opacity 0.25s;
&:hover {
opacity: 1;
}
}
.#{$app-prefix}resizer-h-tc,
.#{$app-prefix}resizer-h-bc {
margin: 0 auto;
width: 100%;
}
.#{$app-prefix}resizer-h-cr,
.#{$app-prefix}resizer-h-cl {
margin: auto 0;
height: 100%;
}
}
.#{$app-prefix}resizing .#{$app-prefix}highlighter, .#{$app-prefix}resizing .#{$app-prefix}highlighter,
.#{$app-prefix}resizing .#{$app-prefix}badge { .#{$app-prefix}resizing .#{$app-prefix}badge {
display: none !important; display: none !important;

40
src/utils/Resizer.js
View File

@ -38,14 +38,13 @@ var getBoundingRect = (el, win) => {
}; };
}; };
module.exports = { class Resizer {
/** /**
* Init the Resizer with options * Init the Resizer with options
* @param {Object} options * @param {Object} options
*/ */
init(options) { constructor(opts = {}) {
var opts = options || {};
var pfx = opts.prefix || ''; var pfx = opts.prefix || '';
var appendTo = opts.appendTo || document.body; var appendTo = opts.appendTo || document.body;
@ -90,7 +89,7 @@ module.exports = {
this.onEnd = opts.onEnd; this.onEnd = opts.onEnd;
return this; return this;
}, }
/** /**
* Update options * Update options
@ -104,7 +103,7 @@ module.exports = {
this[opt] = opts[opt]; this[opt] = opts[opt];
} }
} }
}, }
/** /**
* Detects if the passed element is a resize handler * Detects if the passed element is a resize handler
@ -119,7 +118,7 @@ module.exports = {
} }
return false; return false;
}, }
/** /**
* Returns the focused element * Returns the focused element
@ -127,7 +126,7 @@ module.exports = {
*/ */
getFocusedEl() { getFocusedEl() {
return this.el; return this.el;
}, }
/** /**
* Returns documents * Returns documents
@ -137,7 +136,7 @@ module.exports = {
this.$doc = $([this.el.ownerDocument, document]); this.$doc = $([this.el.ownerDocument, document]);
} }
return this.$doc; return this.$doc;
}, }
/** /**
* Return element position * Return element position
@ -147,7 +146,7 @@ module.exports = {
getElementPos(el) { getElementPos(el) {
var posFetcher = this.posFetcher || ''; var posFetcher = this.posFetcher || '';
return posFetcher ? posFetcher(el) : getBoundingRect(el); return posFetcher ? posFetcher(el) : getBoundingRect(el);
}, }
/** /**
* Focus resizer on the element, attaches handlers to it * Focus resizer on the element, attaches handlers to it
@ -171,7 +170,7 @@ module.exports = {
this.container.style.display = 'block'; this.container.style.display = 'block';
this.getDocumentEl().on('mousedown', this.handleMouseDown); this.getDocumentEl().on('mousedown', this.handleMouseDown);
}, }
/** /**
* Blur from element * Blur from element
@ -183,7 +182,7 @@ module.exports = {
this.getDocumentEl().off('mousedown', this.handleMouseDown); this.getDocumentEl().off('mousedown', this.handleMouseDown);
this.el = null; this.el = null;
} }
}, }
/** /**
* Start resizing * Start resizing
@ -229,7 +228,7 @@ module.exports = {
if(typeof this.onStart === 'function') { if(typeof this.onStart === 'function') {
this.onStart(e, {docs: doc}); this.onStart(e, {docs: doc});
} }
}, }
/** /**
* While resizing * While resizing
@ -266,7 +265,7 @@ module.exports = {
if (e.which === 0) { if (e.which === 0) {
this.stop(e); this.stop(e);
} }
}, }
/** /**
* Stop resizing * Stop resizing
@ -283,7 +282,7 @@ module.exports = {
if(typeof this.onEnd === 'function') { if(typeof this.onEnd === 'function') {
this.onEnd(e, {docs: doc}); this.onEnd(e, {docs: doc});
} }
}, }
/** /**
* Update rect * Update rect
@ -309,7 +308,7 @@ module.exports = {
conStyle.top = rectEl.top + unit; conStyle.top = rectEl.top + unit;
conStyle.width = rectEl.width + unit; conStyle.width = rectEl.width + unit;
conStyle.height = rectEl.height + unit; conStyle.height = rectEl.height + unit;
}, }
/** /**
* Handle ESC key * Handle ESC key
@ -321,7 +320,7 @@ module.exports = {
this.rectDim = this.startDim; this.rectDim = this.startDim;
this.stop(e); this.stop(e);
} }
}, }
/** /**
* Handle mousedown to check if it's possible to start resizing * Handle mousedown to check if it's possible to start resizing
@ -334,7 +333,7 @@ module.exports = {
}else if(el !== this.el){ }else if(el !== this.el){
this.blur(); this.blur();
} }
}, }
/** /**
* All positioning logic * All positioning logic
@ -386,6 +385,11 @@ module.exports = {
} }
return box; return box;
}, }
}
module.exports = {
init(opts) {
return new Resizer(opts);
}
}; };

Write Preview
Loading…
Cancel
Save