Skip to content

Commit

Permalink
Merge pull request #390 from lexoyo/develop
Browse files Browse the repository at this point in the history 
WIP mobile editor
  • Loading branch information
@lexoyo
lexoyo committed Feb 23, 2016
2 parents 5cd6340 + 761ab08 commit 7a12f92
Show file tree
Hide file tree
Showing 9 changed files with 84 additions and 85 deletions.
6 changes: 3 additions & 3 deletions dist/client/creation-template.html
View file
Expand Up @@ -25,17 +25,17 @@
top: 5px;
left: 154px;
width: 960px;
height: 600px;
min-height: 600px;
}
.silex-id-1442914589168-2 {
height: 50px;
min-height: 50px;
width: 400px;
top: 635px;
left: 6px;
background-color: transparent;
}
.silex-id-1442914737143-3 {
height: 28px;
min-height: 28px;
width: 250px;
top: 13px;
left: 80px;
Expand Down
2 changes: 1 addition & 1 deletion dist/server/server.js
View file
Expand Up @@ -143,7 +143,7 @@ catch(e) {
}

// use unifile as a middleware
app.use('/api', unifile.middleware(express, app, silexConfig));
app.use(silexConfig.apiRoot, unifile.middleware(express, app, silexConfig));

var port = process.env.PORT || 6805; // 6805 is the date of sexual revolution started in paris france 8-)
http.createServer(app).listen(port, function() {
Expand Down
2 changes: 1 addition & 1 deletion src/js/controller/controller-base.js
View file
Expand Up @@ -232,7 +232,7 @@ silex.controller.ControllerBase.prototype.browseAndAddImage = function() {
goog.bind(function(element, imgElement) {
// update element size
this.model.element.setStyle(element, 'width', Math.max(silex.model.Element.MIN_WIDTH, imgElement.naturalWidth) + 'px');
this.model.element.setStyle(element, 'height', Math.max(silex.model.Element.MIN_HEIGHT, imgElement.naturalHeight) + 'px');
this.model.element.setStyle(element, 'minHeight', Math.max(silex.model.Element.MIN_HEIGHT, imgElement.naturalHeight) + 'px');
this.tracker.trackAction('controller-events', 'success', 'insert.image', 1);
}, this),
goog.bind(function(element, message) {
Expand Down
2 changes: 1 addition & 1 deletion src/js/model/element.js
View file
Expand Up @@ -603,7 +603,7 @@ silex.model.Element.prototype.createElement = function(type) {
var offsetY = 100 + this.view.stage.getScrollY();
// default style
var styleObject = {
height: '100px',
minHeight: '100px',
width: '100px',
top: offsetY + 'px',
left: offsetX + 'px'
Expand Down
12 changes: 10 additions & 2 deletions src/js/model/property.js
View file
Expand Up @@ -243,6 +243,13 @@ silex.model.Property.prototype.initStyles = function(doc) {
silex.model.Property.prototype.setStyle = function(element, style, opt_isMobile) {
var elementId = /** @type {string} */ (this.getSilexId(element));
var isMobile = opt_isMobile != null ? opt_isMobile : this.view.workspace.getMobileEditor()
// to selector case
for(let key in style) {
let camel = goog.string.toCamelCase(key);
let val = style[key];
style[key] = undefined;
style[camel] = val;
}
// store in JSON
if (isMobile) {
this.mobileStylesObj[elementId] = style;
Expand Down Expand Up @@ -387,7 +394,8 @@ silex.model.Property.prototype.getBoundingBox = function(elements) {
'top': '',
'left': '',
'width': '',
'height': ''
'height': '',
'minHeight': ''
};
}
else {
Expand All @@ -410,7 +418,7 @@ silex.model.Property.prototype.getBoundingBox = function(elements) {
var elementMinWidth = elementStyle.minWidth ? parseFloat(elementStyle.minWidth.substr(0, elementStyle.minWidth.indexOf('px'))) : null;
var elementWidth = Math.max(elementMinWidth || 0, parseFloat(elementStyle.width.substr(0, elementStyle.width.indexOf('px'))));
var elementMinHeight = elementStyle.minHeight ? parseFloat(elementStyle.minHeight.substr(0, elementStyle.minHeight.indexOf('px'))) : null;
var elementHeight = Math.max(elementMinHeight || 0, parseFloat(elementStyle.height.substr(0, elementStyle.height.indexOf('px'))));
var elementHeight = Math.max(elementMinHeight || 0, parseFloat(elementStyle.height.substr(0, elementStyle.height.indexOf('px'))) || 0);
var elementTop = parseFloat(elementStyle.top.substr(0, elementStyle.top.indexOf('px')));
var elementLeft = parseFloat(elementStyle.left.substr(0, elementStyle.left.indexOf('px')));
var elementRight = (elementLeft || 0) + elementWidth;
Expand Down
4 changes: 2 additions & 2 deletions src/js/view/pane/property-pane.js
View file
Expand Up @@ -123,7 +123,7 @@ silex.view.pane.PropertyPane.prototype.buildUi = function() {
false,
this);
this.heightInput = goog.dom.getElementByClass('height-input');
this.heightInput.setAttribute('data-style-name', 'height');
this.heightInput.setAttribute('data-style-name', 'minHeight');
goog.events.listen(this.heightInput,
goog.events.EventType.INPUT,
this.onPositionChanged,
Expand Down Expand Up @@ -163,7 +163,7 @@ silex.view.pane.PropertyPane.prototype.onPositionChanged =
if (name === 'width' && value < silex.model.Element.MIN_WIDTH) {
value = silex.model.Element.MIN_WIDTH;
}
if (name === 'height' && value < silex.model.Element.MIN_HEIGHT) {
if (name === 'minHeight' && value < silex.model.Element.MIN_HEIGHT) {
value = silex.model.Element.MIN_HEIGHT;
}
// get the old value
Expand Down
70 changes: 1 addition & 69 deletions src/js/view/stage.js
View file
Expand Up @@ -225,59 +225,6 @@ silex.view.Stage.prototype.onPreventBackSwipe = function(event) {
};


/**
* Resize the iframe body to the size of its content
* This is to always keep space between the elements (main container etc)
* and the stage border
* @param {?Event=} event
*/
silex.view.Stage.prototype.bodyElementSizeToContent = function(event) {
if (this.bodyElement) {
let containers = [];
goog.array.forEach(this.bodyElement.children, (element) => {
if (element.classList.contains(silex.model.Body.EDITABLE_CLASS_NAME)) {
containers.push(element);
}
});
if (containers && containers.length > 0) {
let bb = this.model.property.getBoundingBox(containers);
let viewportSize = this.viewport.getSize();
let desiredBodyWidth = bb.width + 100;
if (desiredBodyWidth < viewportSize.width) {
// let the css handle a body of the size of the stage
goog.style.setStyle(this.bodyElement, 'minWidth', '');
}
else {
// we want the body to be this size
// we use minWidth/minHeight in order to leave width/height to the user
goog.style.setStyle(
this.bodyElement,
'minWidth',
desiredBodyWidth + 'px');
}
let desiredBodyHeight = bb.height + 100;
if (desiredBodyHeight < viewportSize.height) {
// let the css handle a body of the size of the stage
goog.style.setStyle(this.bodyElement, 'minHeight', '');
}
else {
// we want the body to be this size
// we use minWidth/minHeight in order to leave width/height to the user
goog.style.setStyle(
this.bodyElement,
'minHeight',
desiredBodyHeight + 'px');
}
}
}
// else {
// could not resize body to match content because
// this.bodyElement is undefined
// this happens at startup
//}
};


/**
* remove stage event listeners
* @param {Element} bodyElement the element which contains the body of the site
Expand All @@ -300,16 +247,6 @@ silex.view.Stage.prototype.initEvents = function(contentWindow) {
this.contentDocument = contentWindow.document;
this.contentWindow = contentWindow;

// handle resize and the iframe body size
if (this.viewport) {
goog.events.removeAll(this.viewport);
}
this.viewport = new goog.dom.ViewportSizeMonitor(contentWindow);
goog.events.listen(this.viewport, goog.events.EventType.RESIZE,
this.bodyElementSizeToContent, false, this);
// init iframe body size
this.bodyElementSizeToContent();

// listen on body instead of element because user can release
// on the tool boxes
goog.events.listen(this.bodyElement, 'mouseup', function(event) {
Expand Down Expand Up @@ -367,7 +304,6 @@ silex.view.Stage.prototype.redraw =
this.resetFocus();
// remember selection
this.selectedElements = selectedElements;
this.bodyElementSizeToContent();
this.currentPageName = currentPageName;
};

Expand Down Expand Up @@ -567,10 +503,6 @@ silex.view.Stage.prototype.onMouseMove = function(target, x, y, shiftKey) {
goog.dom.classlist.add(this.bodyElement, silex.model.Body.DRAGGING_CLASS_NAME);
}
}
else {
// keep the body size while dragging or resizing
this.bodyElementSizeToContent();
}

// update multiple selection according the the dragged element
this.multipleDragged(x, y, shiftKey);
Expand Down Expand Up @@ -874,7 +806,7 @@ silex.view.Stage.prototype.followElementSize =
this.controller.stageController.styleChanged('left', Math.round(offsetPosX) + 'px', [follower], false);
// apply the new size
this.controller.stageController.styleChanged('width', Math.round(newSizeW) + 'px', [follower], false);
this.controller.stageController.styleChanged('height', Math.round(newSizeH) + 'px', [follower], false);
this.controller.stageController.styleChanged('minHeight', Math.round(newSizeH) + 'px', [follower], false);
}
}, this);
};
Expand Down
15 changes: 9 additions & 6 deletions static/2.6/front-end.css
View file
Expand Up @@ -5,8 +5,8 @@
/* the body covers the whole available space */
/* the body is resized to its content size when needed in front-end.js */
body{
min-width: 99%;
min-height: 99%;
width: 100%;
height: 100%;
position: absolute;
padding: 5px;
}
Expand All @@ -25,6 +25,8 @@ body{
.silex-element-content{
overflow: hidden;
border-radius: inherit;
width: 100%;
height: 100%;
}
/* background */
.background{
Expand All @@ -35,6 +37,10 @@ body{
margin-right: auto;
z-index: 1;
}
/* resize */
.editable-style.image-element .silex-element-content{
position: absolute;
}
/* links default formatting */
.editable-style[data-silex-href]{
cursor: pointer;
Expand All @@ -51,10 +57,6 @@ body{
because of normalize.css */
a:focus{ outline: none;}

.silex-element-content {
width: 100%;
height: 100%;
}
.silex-pages .menu-button {
display: none;
}
Expand Down Expand Up @@ -130,6 +132,7 @@ a:focus{ outline: none;}
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
padding: 10px;
}
body.enable-mobile .editable-style.hide-on-mobile {
display: none;
Expand Down
56 changes: 56 additions & 0 deletions static/2.6/front-end.js
View file
Expand Up @@ -78,4 +78,60 @@ $(function() {
$(document.body).removeClass('show-mobile-menu');
e.preventDefault();
});

/**
* Returns a function, that, as long as it continues to be invoked, will not
* be triggered. The function will be called after it stops being called for
* N milliseconds. If `immediate` is passed, trigger the function on the
* leading edge, instead of the trailing.
*/
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};

/**
* resize body to the size of its content
* this is needed since the content has absolute position
* so it is not automatic with css
*/
var resizeBody = debounce(function (event){
var width = 0;
var height = 0;
var bodyEl = $('body');
$('body > *').each(function (index) {
var el = $('this');
// take elements visible on the current page
if(el.hasClass('editable-style') && (!el.hasClass('paged-element') || el.hasClass(bodyEl.pageable('option').currentPage))) {
var position = el.position();
var right = position.left + el.width();
var bottom = position.top + el.height();
if (width < right) width = right;
if (height < bottom) height = bottom;
}
});
bodyEl.css({
"min-width": width + "px",
"min-height": height + "px"
});
}, 500);

// resize body at start
resizeBody();

// resize body on window resize
$(window).resize(resizeBody);

// resize on page change (size will vary)
$('body').on('pageChanged', resizeBody);
});

0 comments on commit 7a12f92

Please sign in to comment.