align widget for silex

align-widget.js

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

  }
});

rss-widget.js

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) {
    },


  }
});