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
Split 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;}
</style>
<body>
<div id="gjs" style="height:0px; overflow:hidden">
<div id="gjs" style="height:0px; overflow:hidden;">
<header class="header-banner">
<div class="container-width">
<div class="logo-container">
@ -870,33 +869,33 @@
*/
commands: {
defaults : [{
id: 'open-github',
run: function(editor, sender){
sender.set('active',false);
window.open('https://github.com/artf/grapesjs','_blank');
}
},{
id: 'undo',
run: function(editor, sender){
sender.set('active',false);
editor.UndoManager.undo(true);
}
},{
id: 'redo',
run: function(editor, sender){
sender.set('active',false);
editor.UndoManager.redo(true);
}
},{
id: 'clean-all',
run: function(editor, sender){
sender.set('active',false);
if(confirm('Are you sure to clean the canvas?')){
var comps = editor.DomComponents.clear();
}
}
}],
defaults: [{
id: 'open-github',
run: function(editor, sender){
sender.set('active',false);
window.open('https://github.com/artf/grapesjs','_blank');
}
},{
id: 'undo',
run: function(editor, sender){
sender.set('active',false);
editor.UndoManager.undo(true);
}
},{
id: 'redo',
run: function(editor, sender){
sender.set('active',false);
editor.UndoManager.redo(true);
}
},{
id: 'clean-all',
run: function(editor, sender){
sender.set('active',false);
if(confirm('Are you sure to clean the canvas?')){
var comps = editor.DomComponents.clear();
}
}
}],
},
assetManager: {
@ -904,17 +903,17 @@
storeOnChange : true,
storeAfterUpload : true,
assets : [
{ 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/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/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/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/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 : '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/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/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/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/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},
]
},

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

@ -1,14 +1,15 @@
module.exports = {
run(editor, sender, opts) {
var el = (opts && opts.el) || '';
var opt = opts || {};
var el = opt.el || '';
var canvas = editor.Canvas;
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
if(!canvasResizer) {
var canvasView = canvas.getCanvasView();
if(!canvasResizer || opt.forceNew) {
options.ratioDefault = 1;
options.appendTo = canvas.getResizerEl();
options.prefix = editor.getConfig().stylePrefix;
@ -20,6 +21,7 @@ module.exports = {
canvasResizer.setOptions(options);
canvasResizer.focus(el);
return canvasResizer;
},
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'));
},
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() {
this.$el.attr('class', _.result(this, 'className'));
this.$el.attr('class', this.className);
if(this.id)
this.$el.attr('id', this.id);
if(this.buttons.length){
if (this.buttons.length) {
var buttons = new ButtonsView({
collection: this.buttons,
config: this.config,
});
this.$el.append(buttons.render().el);
}
this.$el.append(this.model.get('content'));
return this;
},

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

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

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

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

Write Preview
Loading…
Cancel
Save