align widget for silex

align-widget.js

/*
  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;
		},

	}
});