Skip to content

Instantly share code, notes, and snippets.

/align-widget.js Secret

Created March 26, 2016 13:41
Show Gist options
  • Save anonymous/d3046224d6b68ae6f88d to your computer and use it in GitHub Desktop.
Save anonymous/d3046224d6b68ae6f88d to your computer and use it in GitHub Desktop.
align widget for silex
/*
reflexion about how silex widgets should "look" like
*/
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;
},
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment