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

Add showOffsetsSelected option 

This option allows showing offsets on selected components
pull/67/head v0.4.25
Artur Arseniev 9 years ago
parent
477006a983
commit
229e648852
6 changed files with 353 additions and 345 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
      bower.json
  2. 12
      dist/grapes.min.js
  3. 2
      package.json
  4. 404
      src/commands/view/SelectComponent.js
  5. 275
      src/demo.js
  6. 3
      src/editor/config/config.js

2
bower.json
View File

@ -1,7 +1,7 @@
{
"name": "grapesjs",
"description": "Open source Web Template Editor",
"version": "0.4.24",
"version": "0.4.25",
"author": "Artur Arseniev",
"homepage": "http://grapesjs.com",
"main": [

12
dist/grapes.min.js
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "grapesjs",
"description": "Open source Web Template Editor",
"version": "0.4.24",
"version": "0.4.25",
"author": "Artur Arseniev",
"license": "BSD-3-Clause",
"homepage": "http://grapesjs.com",

404
src/commands/view/SelectComponent.js
View File

@ -1,71 +1,71 @@
define(function(require) {
/**
* @class SelectComponent
* @private
* */
var ToolbarView = require('DomComponents/view/ToolbarView');
var Toolbar = require('DomComponents/model/Toolbar');
/**
* @class SelectComponent
* @private
* */
var ToolbarView = require('DomComponents/view/ToolbarView');
var Toolbar = require('DomComponents/model/Toolbar');
return {
return {
init: function(o){
_.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress');
},
init: function(o){
_.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress');
},
enable: function() {
_.bindAll(this, 'copyComp', 'pasteComp', 'onFrameScroll');
this.frameOff = this.canvasOff = this.adjScroll = null;
var config = this.config.em.get('Config');
this.startSelectComponent();
this.toggleClipboard(config.copyPaste);
var em = this.config.em;
enable: function() {
_.bindAll(this, 'copyComp', 'pasteComp', 'onFrameScroll');
this.frameOff = this.canvasOff = this.adjScroll = null;
var config = this.config.em.get('Config');
this.startSelectComponent();
this.toggleClipboard(config.copyPaste);
var em = this.config.em;
em.on('component:update', this.updateAttached, this);
em.on('change:canvasOffset', this.updateAttached, this);
em.on('change:selectedComponent', this.updateToolbar, this);
},
/**
* Toggle clipboard function
* @param {Boolean} active
* @return {this}
* @private
*/
toggleClipboard: function(active){
var en = active || 0;
if(en){
key('⌘+c, ctrl+c', this.copyComp);
key('⌘+v, ctrl+v', this.pasteComp);
}else{
key.unbind('⌘+c, ctrl+c');
key.unbind('⌘+v, ctrl+v');
}
},
/**
* Copy component to the clipboard
* @private
*/
copyComp: function() {
var el = this.editorModel.get('selectedComponent');
if(el && el.get('copyable'))
this.editorModel.set('clipboard', el);
},
/**
* Paste component from clipboard
* @private
*/
pasteComp: function() {
var clp = this.editorModel.get('clipboard'),
sel = this.editorModel.get('selectedComponent');
if(clp && sel && sel.collection){
var index = sel.collection.indexOf(sel),
clone = clp.clone();
sel.collection.add(clone, { at: index + 1 });
}
},
em.on('change:canvasOffset', this.updateAttached, this);
em.on('change:selectedComponent', this.updateToolbar, this);
},
/**
* Toggle clipboard function
* @param {Boolean} active
* @return {this}
* @private
*/
toggleClipboard: function(active){
var en = active || 0;
if(en){
key('⌘+c, ctrl+c', this.copyComp);
key('⌘+v, ctrl+v', this.pasteComp);
}else{
key.unbind('⌘+c, ctrl+c');
key.unbind('⌘+v, ctrl+v');
}
},
/**
* Copy component to the clipboard
* @private
*/
copyComp: function() {
var el = this.editorModel.get('selectedComponent');
if(el && el.get('copyable'))
this.editorModel.set('clipboard', el);
},
/**
* Paste component from clipboard
* @private
*/
pasteComp: function() {
var clp = this.editorModel.get('clipboard'),
sel = this.editorModel.get('selectedComponent');
if(clp && sel && sel.collection){
var index = sel.collection.indexOf(sel),
clone = clp.clone();
sel.collection.add(clone, { at: index + 1 });
}
},
/**
* Returns canavs body el
@ -110,35 +110,35 @@ define(function(require) {
cw[method]('keydown', this.onKeyPress);
},
/**
* On key press event
* @private
* */
onKeyPress: function(e) {
var key = e.which || e.keyCode;
var comp = this.editorModel.get('selectedComponent');
var focused = this.frameEl.contentDocument.activeElement.tagName !== 'BODY';
// On CANC (46) or Backspace (8)
if(key == 8 || key == 46) {
if(!focused)
e.preventDefault();
if(comp && !focused) {
if(!comp.get('removable'))
return;
comp.set('status','');
comp.destroy();
this.hideBadge();
this.clean();
this.hideHighlighter();
this.editorModel.set('selectedComponent', null);
}
}
},
/**
* On key press event
* @private
* */
onKeyPress: function(e) {
var key = e.which || e.keyCode;
var comp = this.editorModel.get('selectedComponent');
var focused = this.frameEl.contentDocument.activeElement.tagName !== 'BODY';
// On CANC (46) or Backspace (8)
if(key == 8 || key == 46) {
if(!focused)
e.preventDefault();
if(comp && !focused) {
if(!comp.get('removable'))
return;
comp.set('status','');
comp.destroy();
this.hideBadge();
this.clean();
this.hideHighlighter();
this.editorModel.set('selectedComponent', null);
}
}
},
/**
* Hover command
* @param {Object} e
* @param {Object} e
* @private
*/
onHover: function(e) {
@ -147,8 +147,8 @@ define(function(require) {
// Adjust tools scroll top
if(!this.adjScroll){
this.adjScroll = 1;
this.onFrameScroll(e);
this.adjScroll = 1;
this.onFrameScroll(e);
this.updateAttached();
}
@ -160,7 +160,7 @@ define(function(require) {
/**
* Out command
* @param {Object} e
* @param {Object} e
* @private
*/
onOut: function(e) {
@ -172,7 +172,7 @@ define(function(require) {
/**
* Show element offset viewer
* @param {HTMLElement} el
* @param {HTMLElement} el
* @param {Object} pos
*/
showElementOffset: function(el, pos) {
@ -189,7 +189,7 @@ define(function(require) {
/**
* Hide element offset viewer
* @param {HTMLElement} el
* @param {HTMLElement} el
* @param {Object} pos
*/
hideElementOffset: function(el, pos) {
@ -198,7 +198,7 @@ define(function(require) {
/**
* Show fixed element offset viewer
* @param {HTMLElement} el
* @param {HTMLElement} el
* @param {Object} pos
*/
showFixedElementOffset: function(el, pos) {
@ -211,7 +211,7 @@ define(function(require) {
/**
* Hide fixed element offset viewer
* @param {HTMLElement} el
* @param {HTMLElement} el
* @param {Object} pos
*/
hideFixedElementOffset: function(el, pos) {
@ -219,106 +219,110 @@ define(function(require) {
this.editor.stopCommand('show-offset', {state: 'Fixed'});
},
/**
* Hide Highlighter element
*/
hideHighlighter: function () {
this.canvas.getHighlighter().style.display = 'none';
},
/**
* Hover command
* @param {Object} e
* @private
*/
onClick: function(e) {
var m = $(e.target).data('model');
if(!m)
return;
var s = m.get('stylable');
if(!(s instanceof Array) && !s)
return;
this.onSelect(e, e.target);
},
/**
* Update badge for the component
* @param {Object} Component
* @param {Object} pos Position object
* @private
* */
updateBadge: function(el, pos) {
var $el = $(el);
this.cacheEl = el;
var model = $el.data("model");
if(!model || !model.get('badgable'))
return;
var badge = this.getBadge();
badge.innerHTML = model.getName();
var bStyle = badge.style;
var u = 'px';
bStyle.display = 'block';
var canvasPos = this.canvas.getCanvasView().getPosition();
var badgeH = badge ? badge.offsetHeight : 0;
var badgeW = badge ? badge.offsetWidth : 0;
var top = pos.top - badgeH < canvasPos.top ? canvasPos.top : pos.top - badgeH;
var left = pos.left + badgeW < canvasPos.left ? canvasPos.left : pos.left;
bStyle.top = top + u;
bStyle.left = left + u;
},
/**
* Update highlighter element
* @param {HTMLElement} el
* @param {Object} pos Position object
* @private
*/
updateHighlighter: function(el, pos) {
var hlEl = this.canvas.getHighlighter();
var hlStyle = hlEl.style;
var unit = 'px';
hlStyle.left = pos.left + unit;
hlStyle.top = pos.top + unit;
hlStyle.height = pos.height + unit;
hlStyle.width = pos.width + unit;
hlStyle.display = 'block';
},
/**
* Say what to do after the component was selected
* @param {Object} e
* @param {Object} el
* @private
* */
onSelect: function(e, el) {
e.stopPropagation();
var md = this.editorModel.get('selectedComponent');
this.cleanPrevious(md);
var $el = $(el);
var nMd = $el.data('model');
if(nMd){
var mirror = nMd.get('mirror');
nMd = mirror ? mirror : nMd;
// Close all opened components inside Navigator
var opened = this.em.get('opened');
for (var cid in opened){
var m = opened[cid];
m.set('open', 0);
}
var parent = nMd.collection ? nMd.collection.parent : null;
while(parent) {
parent.set('open', 1);
opened[parent.cid] = parent;
parent = parent.collection ? parent.collection.parent : null;
}
this.editorModel.set('selectedComponent', nMd);
nMd.set('status','selected');
this.showFixedElementOffset(el);
/**
* Hide Highlighter element
*/
hideHighlighter: function () {
this.canvas.getHighlighter().style.display = 'none';
},
/**
* Hover command
* @param {Object} e
* @private
*/
onClick: function(e) {
var m = $(e.target).data('model');
if(!m)
return;
var s = m.get('stylable');
if(!(s instanceof Array) && !s)
return;
this.onSelect(e, e.target);
},
/**
* Update badge for the component
* @param {Object} Component
* @param {Object} pos Position object
* @private
* */
updateBadge: function(el, pos) {
var $el = $(el);
this.cacheEl = el;
var model = $el.data("model");
if(!model || !model.get('badgable'))
return;
var badge = this.getBadge();
badge.innerHTML = model.getName();
var bStyle = badge.style;
var u = 'px';
bStyle.display = 'block';
var canvasPos = this.canvas.getCanvasView().getPosition();
var badgeH = badge ? badge.offsetHeight : 0;
var badgeW = badge ? badge.offsetWidth : 0;
var top = pos.top - badgeH < canvasPos.top ? canvasPos.top : pos.top - badgeH;
var left = pos.left + badgeW < canvasPos.left ? canvasPos.left : pos.left;
bStyle.top = top + u;
bStyle.left = left + u;
},
/**
* Update highlighter element
* @param {HTMLElement} el
* @param {Object} pos Position object
* @private
*/
updateHighlighter: function(el, pos) {
var hlEl = this.canvas.getHighlighter();
var hlStyle = hlEl.style;
var unit = 'px';
hlStyle.left = pos.left + unit;
hlStyle.top = pos.top + unit;
hlStyle.height = pos.height + unit;
hlStyle.width = pos.width + unit;
hlStyle.display = 'block';
},
/**
* Say what to do after the component was selected
* @param {Object} e
* @param {Object} el
* @private
* */
onSelect: function(e, el) {
e.stopPropagation();
var md = this.editorModel.get('selectedComponent');
this.cleanPrevious(md);
var $el = $(el);
var nMd = $el.data('model');
if(nMd){
var em = this.em;
var config = em.get('Config');
var mirror = nMd.get('mirror');
nMd = mirror ? mirror : nMd;
// Close all opened components inside Navigator
var opened = em.get('opened');
for (var cid in opened){
var m = opened[cid];
m.set('open', 0);
}
var parent = nMd.collection ? nMd.collection.parent : null;
while(parent) {
parent.set('open', 1);
opened[parent.cid] = parent;
parent = parent.collection ? parent.collection.parent : null;
}
this.editorModel.set('selectedComponent', nMd);
nMd.set('status','selected');
if(config.showOffsetsSelected) {
this.showFixedElementOffset(el);
}
this.hideElementOffset();
}
},
}
},
/**
* Update toolbar if the component has one
@ -377,13 +381,13 @@ define(function(require) {
toolbarStyle.left = leftPos + unit;
},
/**
* Return canvas dimensions and positions
* @return {Object}
*/
getCanvasPosition: function () {
return this.canvas.getCanvasView().getPosition();
},
/**
* Return canvas dimensions and positions
* @return {Object}
*/
getCanvasPosition: function () {
return this.canvas.getCanvasView().getPosition();
},
/**
* Removes all highlighting effects on components

275
src/demo.js
View File

@ -1,130 +1,131 @@
require(['config/require-config'], function() {
require(['grapesjs/main'],function (grapesjs){
require(['grapesjs/main'],function (grapesjs){
var editor = grapesjs.init(
var editor = grapesjs.init(
{
allowScripts: 1,
autorender: 0,
{
allowScripts: 1,
showOffsets: 1,
autorender: 0,
noticeOnUnload: 0,
container : '#gjs',
height: '100%',
fromElement: true,
/*
components: [{
type: 'text',
style:{
width:'100px',
height:'100px',
margin: '50px auto',
},
traits: ['title'],
components: [{
type: 'textnode',
content: 'text node row',
},{
type: 'textnode',
content: ', another text node',
},{
type: 'link',
content: 'someLink',
},{
type: 'textnode',
content: " More text node --- ",
}],
}],*/
container : '#gjs',
height: '100%',
fromElement: true,
/*
components: [{
type: 'text',
style:{
width:'100px',
height:'100px',
margin: '50px auto',
},
traits: ['title'],
components: [{
type: 'textnode',
content: 'text node row',
},{
type: 'textnode',
content: ', another text node',
},{
type: 'link',
content: 'someLink',
},{
type: 'textnode',
content: " More text node --- ",
}],
}],*/
storageManager:{
autoload: 0,
storeComponents: 1,
storeStyles: 1,
},
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();
}
}
}],
},
storageManager:{
autoload: 0,
storeComponents: 1,
storeStyles: 1,
},
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();
}
}
}],
},
assetManager: {
storageType : '',
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},
]
},
assetManager: {
storageType : '',
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},
]
},
styleManager : {
sectors: [{
name: 'General',
open: false,
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
},{
name: 'Dimension',
open: false,
buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
},{
name: 'Typography',
open: false,
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-shadow'],
properties: [{
property: 'text-align',
list : [
{value: 'left', className: 'fa fa-align-left'},
{value: 'center', className: 'fa fa-align-center' },
{value: 'right', className: 'fa fa-align-right'},
{value: 'justify', className: 'fa fa-align-justify'}
],
}]
},{
name: 'Decorations',
open: false,
buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
},{
name: 'Extra',
open: false,
buildProps: ['transition', 'perspective', 'transform'],
},{
name: 'Dimension',
open: false,
buildProps: ['margin'],
properties:[{
styleManager : {
sectors: [{
name: 'General',
open: false,
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
},{
name: 'Dimension',
open: false,
buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
},{
name: 'Typography',
open: false,
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-shadow'],
properties: [{
property: 'text-align',
list : [
{value: 'left', className: 'fa fa-align-left'},
{value: 'center', className: 'fa fa-align-center' },
{value: 'right', className: 'fa fa-align-right'},
{value: 'justify', className: 'fa fa-align-justify'}
],
}]
},{
name: 'Decorations',
open: false,
buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
},{
name: 'Extra',
open: false,
buildProps: ['transition', 'perspective', 'transform'],
},{
name: 'Dimension',
open: false,
buildProps: ['margin'],
properties:[{
name: 'Marginnnn',
property: 'margin',
type: 'composite',
@ -142,19 +143,19 @@ require(['config/require-config'], function() {
property: 'margin-left',
},],
}/*{
name : 'Center blocksss',
property : 'margins',
type : 'select',
defaults : '0',
list : [{
value : '0',
name : 'Normal',
},{
value : '0 auto',
name : 'Center',
}],
}*/],
},{
name : 'Center blocksss',
property : 'margins',
type : 'select',
defaults : '0',
list : [{
value : '0',
name : 'Normal',
},{
value : '0 auto',
name : 'Center',
}],
}*/],
},{
name: 'Flex',
open: false,
properties: [{
@ -199,7 +200,7 @@ require(['config/require-config'], function() {
className : 'icons-flex icon-dir-col-rev',
}],
},{
name : 'Wrap',
name : 'Wrap',
property : 'flex-wrap',
type : 'radio',
defaults : 'nowrap',
@ -322,17 +323,17 @@ require(['config/require-config'], function() {
}]
}
],
],
},
}
},
}
);
);
window.editor = editor;
editor.render();
});
editor.render();
});
});

3
src/editor/config/config.js
View File

@ -20,6 +20,9 @@ define(function () {
// Show paddings and margins
showOffsets: false,
// Show paddings and margins on selected component
showOffsetsSelected: false,
// Height for the editor container
height: '900px',

Write Preview
Loading…
Cancel
Save