Skip to content

Instantly share code, notes, and snippets.

@lexoyo
Forked from anonymous/align-widget.js
Last active March 26, 2016 13:47
Show Gist options
  • Save lexoyo/2269d25739dc96dbe70d to your computer and use it in GitHub Desktop.
Save lexoyo/2269d25739dc96dbe70d to your computer and use it in GitHub Desktop.
align widget for silex
silex.model.Widget.register(function(model, view, controller) {
return {
title: 'Align tool',
description: 'This widget displays buttons to align selected elements.',
selection: [],
buildUi: function() {
function createButton(buttonName, cssClass, onClick) {
var button = document.createElement('button');
button.value = buttonName;
button.classList.add(cssClass);
button.classList.add('align-button');
button.onclick = onClick;
adminTool.appendChild(button);
}
var adminTool = document.createElement('div');
createButton('left', 'align-left', function() {
var val = selection
.map(function(el) {
return parseInt(contentWindow.getComputedStyle(el).getPropertyValue('offsetX'));
})
.reduce(function(val1, val2) {
return Math.min(val1, val2)
});
selection.forEach(function(el) {
el.left = val + 'px';
});
});
createButton('right', 'align-right', function() {
var val = selection
.map(function(el) {
var styles = contentWindow.getComputedStyle(el);
return parseInt(styles.getPropertyValue('offsetX')) + parseInt(styles.getPropertyValue('width'));
})
.reduce(function(val1, val2) {
return Math.max(val1, val2)
});
selection.forEach(function(el) {
el.left = (val - parseInt(contentWindow.getComputedStyle(el).getPropertyValue('width'))) + 'px';
});
});
createButton('center', 'align-center', function() {
var val = selection
.map(function(el) {
var styles = contentWindow.getComputedStyle(el);
return parseInt(styles.getPropertyValue('offsetX')) + (parseInt(styles.getPropertyValue('width') / 2));
})
.reduce(function(val1, val2) {
return val1 + val2;
}) / selection.length;
selection.forEach(function(el) {
el.left = (val - (parseInt(contentWindow.getComputedStyle(el).getPropertyValue('width') / 2))) + 'px';
});
});
document.querySelector('.silex-property-tool .position-editor').appendChild(adminTool);
},
redraw: function(elements) {
selection = elements;
},
}
});
silex.model.Widget.register(function(model, view, controller) {
return {
title: 'RSS Widget',
description: 'This widget loads an RSS feed and displays it in a container.',
selection: [],
rssFeed: 'https://www.silexlabs.org/feed/',
stageDocument = null,
stageWindow = null,
$ = null,
buildUi: function() {
stageDocument = model.view.stage.contentDocument;
stageWindow = model.view.stage.contentWindow;
$ = stageWindow.$;
var panel = document.createElement('div');
var rssFeedInput = document.createElement('input');
rssFeedInput.onchange = updateRssFeed;
view.propertyTool.element.appendChild(panel);
var menuItem = document.createElement('div');
menuItem.onclick = clickMenu;
view.contextMenu.element.appendChild(contextMenu);
},
redraw: function(elements) {
selection = elements;
},
clickMenu: function(selection) {
var ul = stageDocument.createElement('ul');
$.get()
var el = model.element.createElement(silex.model.Element.CONTAINER_ELEMENT);
el.appendChild();
},
updateRssFeed: function(e) {
rssFeed = e.target.value;
selection.forEach(function(el) {
generateHtml(el);
});
},
generateHtml: function(el) {
},
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment