daxvena/elemeld - Change OQDFFOFENHOGPMR6DWAIEYUKRKBVQHJNVTDVWFUTZTVMOJECWKSQC

Implemented basic drag and drop interface for ui

Created by daxvena on March 10, 2016

OQDFFOFENHOGPMR6DWAIEYUKRKBVQHJNVTDVWFUTZTVMOJECWKSQC

In channels

main

Change contents

File addition: web-ui (drwxr-xr-x)
[1.0]
File addition: css (drwxr-xr-x)
[0.9]

File addition: core.css (-rw-r--r--)

[0.16]

body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: 'Lato', sans-serif;
}
.title {
    text-align: center;
    text-transform: capitalize;
    background-color: #2196f3;
    border-bottom: 5px solid #1976d2;
    color: #ffffff;
    margin: 0;
    padding: 15px;
}
.canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.screen {
    box-sizing: border-box;
    position: absolute;
    background-color: #8BC34A;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    border: 5px solid #689f38;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out, box-shadow 0.2s ease-out;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}
.screen-name {
    text-align: center;
}
.drag {
    transform: scale(1.10);
    box-shadow: 0px 0px 20px rgba(5,0,0,0.50);
    opacity: 0.75;
}

File addition: index.html (-rw-r--r--)

[0.9]

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Elemeld</title>
    <link rel="stylesheet" type="text/css" href="css/core.css"/>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1 class="title">Cluster Configuration</h1>
    <div class="canvas"></div>
    <script src="js/element.js"></script>
    <script src="js/core.js"></script>
  </body>
</html>

File addition: js (drwxr-xr-x)
[0.9]

File addition: core.js (-rw-r--r--)

[0.1390]

(function(window, document, E) {
    function Canvas(elem) {
        var screens = [];
        var focuses = {};
        function localizePoint(x, y) {
            var rect = elem.getBoundingClientRect();
            console.log(rect);
            return {
                x: x - rect.left,
                y: y - rect.top,
            };
        }
        
        function dragStart(target, id, x, y) {
            if (focuses[id]) {
                return;
            }
            while (target != elem && !target.classList.contains('dragabble')) {
                target = target.parentElement;
            }
            if (target == elem) {
                var rel = localizePoint(x, y);
                var screen = new Screen(rel.x, rel.y);
                screens.push(screen);
                target = screen.elem;
            }
            
            target.classList.add('drag');
            elem.appendChild(target);
            focuses[id] = {
                target: target,
                lastX: x,
                lastY: y,
            };
        }
        function dragMove(id, x, y) {
            let focus = focuses[id];
            if (!focus) {
                return;
            }
            var dx = x - focus.lastX;
            var dy = y - focus.lastY;
            focus.target.style.left = (parseInt(focus.target.style.left) || 0) + dx + 'px';
            focus.target.style.top = (parseInt(focus.target.style.top) || 0) + dy + 'px';
            focus.lastX = x;
            focus.lastY = y;
        }
        function dragEnd(id, x, y) {
            let focus = focuses[id];
            if (!focus) {
                return
            }
            
            focus.target.classList.remove('drag');
            delete focuses[id];
        }
        
        // Mouse
        elem.addEventListener('mousedown', function(e) {
            dragStart(e.target, null, e.clientX, e.clientY);
        }, false);
        window.addEventListener('mousemove', function(e) {
            dragMove(null, e.clientX, e.clientY);
        }, false);
        
        window.addEventListener('mouseup', function(e) {
            dragEnd(null, e.clientX, e.clientY);
        }, false);
        // Touch
        elem.addEventListener('touchstart', function(e) {
            for (var i = 0; i < e.changedTouches.length; i++) {
                var touch = e.changedTouches[i];
                dragStart(touch.target, touch.identifier, touch.clientX, touch.clientY);
            }
            e.preventDefault();
        }, false);
        elem.addEventListener('touchmove', function(e) {
            for (var i = 0; i < e.changedTouches.length; i++) {
                var touch = e.changedTouches[i];
                dragMove(touch.identifier, touch.clientX, touch.clientY);
            }
            e.preventDefault();
        }, false);
        
        elem.addEventListener('touchend', function(e) {
            for (var i = 0; i < e.changedTouches.length; i++) {
                var touch = e.changedTouches[i];
                dragEnd(touch.identifier, touch.clientX, touch.clientY);
            }
            e.preventDefault();
        }, false);
    }
    function Screen(x, y) {
        var width = 160;
        var height = 100;
        this.elem = E('div', {
            className: 'screen dragabble',
            style: {
                width: width + 'px',
                height: height + 'px',
                left: x - width / 2 + 'px',
                top: y - height / 2 + 'px',
            },
            children: [E('h3', {
                className: 'screen-name',
                textContent: 'gallifrey',
            })]
        });
    }
    
    Canvas(document.querySelector('.canvas'));
})(window, document, element.html)

File addition: element.js (-rw-r--r--)

[0.1390]

'use strict';
var element = (function(window, document) {
  var element = {};
  element.html = function(tagName, params) {
    var elem = document.createElement(tagName);
    loadParams(elem, params);
    return elem;
  };
  element.svg = function(tagName, params) {
    var elem = document.createElementNS('http://www.w3.org/2000/svg', tagName);
    loadParams(elem, params);
    return elem;
  };
  function loadParams(elem, params) {
    if (!params) return;
    if (params.parent) {
      params.parent.appendChild(elem);
      delete params.parent;
    }
    if (params.children) {
      var fragment = document.createDocumentFragment();
      params.children.forEach(function(child) {
        if (!(child instanceof Node)) {
          child = document.createTextNode(child);
        }
        fragment.appendChild(child);
      });
      elem.appendChild(fragment);
      delete params.children;
    }
    if (params.className) {
      var className;
      if (params.className instanceof Array) {
        var classList = [];
        params.className.forEach(function(className) {
          if (className instanceof Array) {
            classList.concat(className);
          } else {
            classList.push(className);
          }
        });
        className = classList.join(' ').trim();
      } else {
        className = params.className;
      }
      elem.setAttribute('class', className);
      delete params.className;
    }
    if (params.attributes) {
      for (var attribute in params.attributes) {
        if (params.attributes[attribute] !== undefined) {
          elem.setAttribute(attribute, params.attributes[attribute]);
        }
      }
      delete params.attributes;
    }
    if (params.style) {
      for (var key in params.style) {
        var val = params.style[key];
        if (val !== undefined) {
          elem.style[key] = val;
        }
      }
      delete params.style;
    }
    for (var key in params) {
      var val = params[key];
      if (val !== undefined) {
        elem[key] = val;
      }
    }
  }
  return element;
})(window, document);

Implemented basic drag and drop interface for ui

In channels

Change contents

File addition: web-ui (drwxr-xr-x)

File addition: css (drwxr-xr-x)

File addition: core.css (-rw-r--r--)

File addition: index.html (-rw-r--r--)

File addition: js (drwxr-xr-x)

File addition: core.js (-rw-r--r--)

File addition: element.js (-rw-r--r--)