mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
10 years ago
17 changed files with 805 additions and 101 deletions
@ -0,0 +1,31 @@ |
|||||
|
define(function() { |
||||
|
return { |
||||
|
|
||||
|
run: function(editor, sender, opts) { |
||||
|
var el = (opts && opts.el) || ''; |
||||
|
var canvas = editor.Canvas; |
||||
|
var canvasResizer = this.canvasResizer; |
||||
|
var options = opts.options || {}; |
||||
|
|
||||
|
// Create the resizer for the canvas if not yet created
|
||||
|
if(!canvasResizer) { |
||||
|
var canvasView = canvas.getCanvasView(); |
||||
|
options.prefix = editor.getConfig().stylePrefix; |
||||
|
options.appendTo = canvas.getResizerEl(); |
||||
|
options.posFetcher = canvasView.getElementPos.bind(canvasView); |
||||
|
options.mousePosFetcher = canvas.getMouseRelativePos; |
||||
|
this.canvasResizer = editor.Utils.Resizer.init(options); |
||||
|
canvasResizer = this.canvasResizer; |
||||
|
} |
||||
|
|
||||
|
canvasResizer.setOptions(options); |
||||
|
canvasResizer.focus(el); |
||||
|
}, |
||||
|
|
||||
|
stop: function() { |
||||
|
if(this.canvasResizer) |
||||
|
this.canvasResizer.blur(); |
||||
|
}, |
||||
|
|
||||
|
}; |
||||
|
}); |
||||
@ -0,0 +1,392 @@ |
|||||
|
define(function(require) { |
||||
|
|
||||
|
var defaults = { |
||||
|
// Function which returns custom X and Y coordinates of the mouse
|
||||
|
mousePosFetcher: null, |
||||
|
// Indicates custom target updating strategy
|
||||
|
updateTarget: null, |
||||
|
// Function which gets HTMLElement as an arg and returns it relative position
|
||||
|
posFetcher: null, |
||||
|
onStart: null, |
||||
|
onMove: null, |
||||
|
onEnd: null, |
||||
|
tl: 1, |
||||
|
tc: 1, |
||||
|
tr: 1, |
||||
|
cl: 1, |
||||
|
cr: 1, |
||||
|
bl: 1, |
||||
|
bc: 1, |
||||
|
br: 1, |
||||
|
}; |
||||
|
|
||||
|
var createHandler = function (name, opts) { |
||||
|
var pfx = opts.prefix || ''; |
||||
|
var el = this.document.createElement('i'); |
||||
|
el.className = pfx + 'resizer-h ' + pfx + 'resizer-h-' + name; |
||||
|
el.setAttribute('data-' + pfx + 'handler', name); |
||||
|
return el; |
||||
|
}; |
||||
|
|
||||
|
var getBoundingRect = function(el, win) { |
||||
|
var w = win || window; |
||||
|
var rect = el.getBoundingClientRect(); |
||||
|
return { |
||||
|
left: rect.left + w.pageXOffset, |
||||
|
top: rect.top + w.pageYOffset, |
||||
|
width: rect.width, |
||||
|
height: rect.height |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
return { |
||||
|
|
||||
|
/** |
||||
|
* Init the Resizer with options |
||||
|
* @param {Object} options |
||||
|
*/ |
||||
|
init: function(options) { |
||||
|
var opts = options || {}; |
||||
|
var pfx = opts.prefix || ''; |
||||
|
var appendTo = opts.appendTo || document.body; |
||||
|
|
||||
|
for (var name in defaults) { |
||||
|
if (!(name in opts)) |
||||
|
opts[name] = defaults[name]; |
||||
|
} |
||||
|
|
||||
|
var container = document.createElement('div'); |
||||
|
container.className = pfx + 'resizer-c'; |
||||
|
appendTo.appendChild(container); |
||||
|
|
||||
|
// Create handlers
|
||||
|
var handlers = { |
||||
|
tl: opts.tl ? createHandler('tl', opts) : '', |
||||
|
tc: opts.tc ? createHandler('tc', opts) : '', |
||||
|
tr: opts.tr ? createHandler('tr', opts) : '', |
||||
|
cl: opts.cl ? createHandler('cl', opts) : '', |
||||
|
cr: opts.cr ? createHandler('cr', opts) : '', |
||||
|
bl: opts.bl ? createHandler('bl', opts) : '', |
||||
|
bc: opts.bc ? createHandler('bc', opts) : '', |
||||
|
br: opts.br ? createHandler('br', opts) : '', |
||||
|
}; |
||||
|
|
||||
|
for (var n in handlers) { |
||||
|
if(handlers[n]) |
||||
|
container.appendChild(handlers[n]); |
||||
|
} |
||||
|
|
||||
|
this.container = container; |
||||
|
this.handlers = handlers; |
||||
|
this.opts = opts; |
||||
|
this.handleKeyDown = this.handleKeyDown.bind(this); |
||||
|
this.handleMouseDown = this.handleMouseDown.bind(this); |
||||
|
this.move = this.move.bind(this); |
||||
|
this.stop = this.stop.bind(this); |
||||
|
this.mousePosFetcher = opts.mousePosFetcher; |
||||
|
this.updateTarget = opts.updateTarget; |
||||
|
this.posFetcher = opts.posFetcher; |
||||
|
this.onStart = opts.onStart; |
||||
|
this.onMove = opts.onMove; |
||||
|
this.onEnd = opts.onEnd; |
||||
|
|
||||
|
return this; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Update options |
||||
|
* @param {Object} options |
||||
|
*/ |
||||
|
setOptions: function (options) { |
||||
|
var opts = options || {}; |
||||
|
|
||||
|
for (var opt in opts) { |
||||
|
if(opt in defaults) { |
||||
|
this[opt] = opts[opt]; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Detects if the passed element is a resize handler |
||||
|
* @param {HTMLElement} el |
||||
|
* @return {Boolean} |
||||
|
*/ |
||||
|
isHandler: function(el) { |
||||
|
var handlers = this.handlers; |
||||
|
|
||||
|
for (var n in handlers) { |
||||
|
if (handlers[n] === el) return true; |
||||
|
} |
||||
|
|
||||
|
return false; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Returns the focused element |
||||
|
* @return {HTMLElement} |
||||
|
*/ |
||||
|
getFocusedEl: function() { |
||||
|
return this.el; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Returns documents |
||||
|
*/ |
||||
|
getDocumentEl: function() { |
||||
|
if (!this.$doc) { |
||||
|
this.$doc = $([this.el.ownerDocument, document]); |
||||
|
} |
||||
|
return this.$doc; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Return element position |
||||
|
* @param {HTMLElement} el |
||||
|
* @return {Object} |
||||
|
*/ |
||||
|
getElementPos: function (el) { |
||||
|
var posFetcher = this.posFetcher || ''; |
||||
|
return posFetcher ? posFetcher(el) : getBoundingRect(el); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Focus resizer on the element, attaches handlers to it |
||||
|
* @param {HTMLElement} el |
||||
|
*/ |
||||
|
focus: function(el) { |
||||
|
// Avoid focusing on already focused element
|
||||
|
if (el && el === this.el) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.el = el; |
||||
|
var rect = this.getElementPos(el); |
||||
|
var container = this.container; |
||||
|
var contStyle = container.style; |
||||
|
var unit = 'px'; |
||||
|
contStyle.left = rect.left + unit; |
||||
|
contStyle.top = rect.top + unit; |
||||
|
contStyle.width = rect.width + unit; |
||||
|
contStyle.height = rect.height + unit; |
||||
|
this.container.style.display = 'block'; |
||||
|
|
||||
|
this.getDocumentEl().on('mousedown', this.handleMouseDown); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Blur from element |
||||
|
*/ |
||||
|
blur: function () { |
||||
|
this.container.style.display = 'none'; |
||||
|
if(this.el) { |
||||
|
var doc = $([this.el.ownerDocument, document]); |
||||
|
this.getDocumentEl().off('mousedown', this.handleMouseDown); |
||||
|
this.el = null; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Start resizing |
||||
|
* @param {Event} e |
||||
|
*/ |
||||
|
start: function(e) { |
||||
|
//Right or middel click
|
||||
|
if (e.button !== 0) { |
||||
|
return; |
||||
|
} |
||||
|
e.preventDefault(); |
||||
|
e.stopPropagation(); |
||||
|
var opts = this.opts || {}; |
||||
|
var attrName = 'data-' + opts.prefix + 'handler'; |
||||
|
var rect = this.getElementPos(this.el); |
||||
|
this.handlerAttr = e.target.getAttribute(attrName); |
||||
|
this.clickedHandler = e.target; |
||||
|
this.startDim = { |
||||
|
t: rect.top, |
||||
|
l: rect.left, |
||||
|
w: rect.width, |
||||
|
h: rect.height, |
||||
|
}; |
||||
|
this.rectDim = { |
||||
|
t: rect.top, |
||||
|
l: rect.left, |
||||
|
w: rect.width, |
||||
|
h: rect.height, |
||||
|
}; |
||||
|
this.startPos = { |
||||
|
x: e.clientX, |
||||
|
y: e.clientY |
||||
|
}; |
||||
|
|
||||
|
// Listen events
|
||||
|
var doc = this.getDocumentEl(); |
||||
|
doc.on('mousemove', this.move); |
||||
|
doc.on('keydown', this.handleKeyDown); |
||||
|
doc.on('mouseup', this.stop); |
||||
|
this.move(e); |
||||
|
|
||||
|
// Start callback
|
||||
|
if(typeof this.onStart === 'function') { |
||||
|
this.onStart(e); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* While resizing |
||||
|
* @param {Event} e |
||||
|
*/ |
||||
|
move: function(e) { |
||||
|
var mouseFetch = this.mousePosFetcher; |
||||
|
var currentPos = mouseFetch ? mouseFetch(e) : { |
||||
|
x: e.clientX, |
||||
|
y: e.clientY |
||||
|
}; |
||||
|
|
||||
|
this.currentPos = currentPos; |
||||
|
this.delta = { |
||||
|
x: currentPos.x - this.startPos.x, |
||||
|
y: currentPos.y - this.startPos.y |
||||
|
}; |
||||
|
this.keys = { |
||||
|
shift: e.shiftKey, |
||||
|
ctrl: e.ctrlKey, |
||||
|
alt: e.altKey |
||||
|
}; |
||||
|
//console.log('move resizer ', this.currentPos);
|
||||
|
|
||||
|
this.rectDim = this.calc(this); |
||||
|
this.updateRect(0); |
||||
|
|
||||
|
// Move callback
|
||||
|
if(typeof this.onMove === 'function') { |
||||
|
this.onMove(e); |
||||
|
} |
||||
|
|
||||
|
// In case the mouse button was released outside of the window
|
||||
|
if (e.which === 0) { |
||||
|
this.stop(e); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Stop resizing |
||||
|
* @param {Event} e |
||||
|
*/ |
||||
|
stop: function(e) { |
||||
|
var doc = this.getDocumentEl(); |
||||
|
doc.off('mousemove', this.move); |
||||
|
doc.off('keydown', this.handleKeyDown); |
||||
|
doc.off('mouseup', this.stop); |
||||
|
this.updateRect(1); |
||||
|
|
||||
|
// Stop callback
|
||||
|
if(typeof this.onEnd === 'function') { |
||||
|
this.onEnd(e); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Update rect |
||||
|
*/ |
||||
|
updateRect: function(store) { |
||||
|
var elStyle = this.el.style; |
||||
|
var conStyle = this.container.style; |
||||
|
var rect = this.rectDim; |
||||
|
|
||||
|
// Use custom updating strategy if requested
|
||||
|
if (typeof this.updateTarget === 'function') { |
||||
|
this.updateTarget(this.el, rect, store); |
||||
|
} else { |
||||
|
elStyle.width = rect.w + 'px'; |
||||
|
elStyle.height = rect.h + 'px'; |
||||
|
//elStyle.top = rect.top + 'px';
|
||||
|
//elStyle.left = rect.left + 'px';
|
||||
|
} |
||||
|
|
||||
|
var rectEl = this.getElementPos(this.el); |
||||
|
var unit = 'px'; |
||||
|
conStyle.left = rectEl.left + unit; |
||||
|
conStyle.top = rectEl.top + unit; |
||||
|
conStyle.width = rectEl.width + unit; |
||||
|
conStyle.height = rectEl.height + unit; |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Handle ESC key |
||||
|
* @param {Event} e |
||||
|
*/ |
||||
|
handleKeyDown: function (e) { |
||||
|
if (e.keyCode === 27) { |
||||
|
// Rollback to initial dimensions
|
||||
|
this.rectDim = this.startDim; |
||||
|
this.stop(e); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* Handle mousedown to check if it's possible to start resizing |
||||
|
* @param {Event} e |
||||
|
*/ |
||||
|
handleMouseDown: function(e) { |
||||
|
var el = e.target; |
||||
|
if (this.isHandler(el)) { |
||||
|
this.start(e); |
||||
|
}else if(el !== this.el){ |
||||
|
this.blur(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* All positioning logic |
||||
|
* @return {Object} |
||||
|
*/ |
||||
|
calc: function(data) { |
||||
|
var startDim = this.startDim; |
||||
|
var box = { |
||||
|
t: 0, |
||||
|
l: 0, |
||||
|
w: startDim.w, |
||||
|
h: startDim.h |
||||
|
}; |
||||
|
|
||||
|
if (!data) |
||||
|
return; |
||||
|
|
||||
|
var attr = data.handlerAttr; |
||||
|
if (~attr.indexOf('r')) { |
||||
|
box.w = Math.max(32, startDim.w + data.delta.x); |
||||
|
} |
||||
|
if (~attr.indexOf('b')) { |
||||
|
box.h = Math.max(32, startDim.h + data.delta.y); |
||||
|
} |
||||
|
if (~attr.indexOf('l')) { |
||||
|
box.w = Math.max(32, startDim.w - data.delta.x); |
||||
|
} |
||||
|
if (~attr.indexOf('t')) { |
||||
|
box.h = Math.max(32, startDim.h - data.delta.y); |
||||
|
} |
||||
|
|
||||
|
// Enforce aspect ratio (unless shift key is being held)
|
||||
|
if (attr.indexOf('c') < 0 && data.keys.shift) { |
||||
|
var ratio = startDim.w / startDim.h; |
||||
|
if (box.w / box.h > ratio) { |
||||
|
box.h = Math.round(box.w / ratio); |
||||
|
} else { |
||||
|
box.w = Math.round(box.h * ratio); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (~attr.indexOf('l')) { |
||||
|
box.l = startDim.w - box.w; |
||||
|
} |
||||
|
if (~attr.indexOf('t')) { |
||||
|
box.t = startDim.h - box.h; |
||||
|
} |
||||
|
|
||||
|
return box; |
||||
|
}, |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
}); |
||||
@ -0,0 +1,168 @@ |
|||||
|
.#{$cv-prefix}canvas { |
||||
|
background-color: rgba(0, 0, 0, 0.15); |
||||
|
box-sizing: border-box; |
||||
|
position: absolute; |
||||
|
width: (100% - $leftWidth); |
||||
|
height: 100%; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
overflow: hidden; |
||||
|
padding-top: 40px; |
||||
|
z-index: 1; |
||||
|
|
||||
|
> iframe { |
||||
|
height: 100%; |
||||
|
outline: medium none; |
||||
|
width: 100%; |
||||
|
border: none; |
||||
|
margin: 0 auto; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}ghost { |
||||
|
display: none; |
||||
|
pointer-events: none; |
||||
|
background-color: #5b5b5b; |
||||
|
border: 2px dashed #ccc; |
||||
|
position: absolute; |
||||
|
z-index: 10; |
||||
|
|
||||
|
@include opacity(0.55); |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}highlighter, |
||||
|
.#{$app-prefix}highlighter-sel { |
||||
|
position: absolute; |
||||
|
outline: 1px solid $colorBlue; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}highlighter-warning { |
||||
|
outline: 3px solid $colorYell; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}highlighter-sel { |
||||
|
outline: 3px solid $colorBlue; |
||||
|
} |
||||
|
|
||||
|
##{$app-prefix}tools { |
||||
|
width: 100%; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
/* This simulate body behaviour */ |
||||
|
> div:first-child { |
||||
|
background-color: #fff; |
||||
|
position: relative; |
||||
|
height: 100%; |
||||
|
overflow: auto; |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.#{$cv-prefix}canvas * { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}frame { |
||||
|
transition: width 0.35s ease; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}toolbar { |
||||
|
position: absolute; |
||||
|
background-color: $colorBlue; |
||||
|
color: white; |
||||
|
z-index: 10; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}toolbar-item { |
||||
|
padding: 5px 7px; |
||||
|
font-size: 0.8rem; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}resizer-c { |
||||
|
@extend .#{$app-prefix}no-pointer-events; |
||||
|
|
||||
|
position: absolute; |
||||
|
z-index: 9; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}resizer-h { |
||||
|
pointer-events: all; |
||||
|
position: absolute; |
||||
|
border: 3px solid $colorBlue; |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
background-color: white; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}resizer-h-tl { |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
cursor: nwse-resize; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}resizer-h-tr { |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
cursor: nesw-resize; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}resizer-h-tc { |
||||
|
top: 0; |
||||
|
margin: 0 auto; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
cursor: ns-resize; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}resizer-h-cl { |
||||
|
left: 0; |
||||
|
margin: auto 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
cursor: ew-resize; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}resizer-h-cr { |
||||
|
margin: auto 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
cursor: ew-resize; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}resizer-h-bl { |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
cursor: nesw-resize; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}resizer-h-bc { |
||||
|
bottom: 0; |
||||
|
margin: 0 auto; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
cursor: ns-resize; |
||||
|
} |
||||
|
|
||||
|
.#{$app-prefix}resizer-h-br { |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
cursor: nwse-resize; |
||||
|
} |
||||
|
|
||||
|
.btn-cl { |
||||
|
@include opacity(0.3); |
||||
|
|
||||
|
font-size: 25px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
@include opacity(0.7); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue