ResearchTools - Editor - UI v1

by PhilQ

HTML

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<section id="top">
    <div id="top-wrapper">
        <div id="logo">ResearchTools</div>
        <div id="login"><a href=""><img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAH2SURBVDjLjZNLTxNRGIaJv6ZNWeBwkZFLQtGAC4l/wKULV+7YILeSYukEUhJoSASVuCI0hpAYDSUQCJBSoAaC0wbBUi4aWphpO52Zlpa+nnOqCAptJ3k3M3me73LOlAAoyZfDqQdOEvyO89/vRcGZ5HeWmySFYdWHVOQN0vE58jrLJMFJ82hewVU4+bMfqdPxP9VBn+A4D88wP59PwFqmsH7UgeTJEMlsTuIyI5uRsDfCMcmtAtoyhVmOu5kkHZuFsiNA3XuEi+QCdhxluL0D/SvpoO+vhIksiItNiPqqyXgfIL403gjfoTsIL70gQBdim3VQvz2FFnwOxf8E8kYF0rIVYqcRM70Vgf/Pe/ohwsutOJdcpBpP4Mek+jPEfbWQVzkG+7tNcNsqt68tkcLZTIzM6YZ21IbolgHq9j1o+z04nKhHRnlH2p6A32LCvFD55fIYr960VHgSSqCFVDJBEeugh+zw2jnpc0/5rthuRMBaioWBqrVrFylXOUpankIi0AjJY0DC3wD9oA9rAnc2bat+n++2UkH8XHaTZfGQlg3QdlsIbIVX4KSPAv+60L+SO/PECmJiI1lYM9SQBR7b3einfn6kEMwEIZd5Q48sQQt1Qv/xFqt2Tp5x3B8sBmYC71h926az6njdUR6hMy8O17wqFqb5Bd2o/0SFzIZrAAAAAElFTkSuQmCC" />Login</a></div>
        <div id="toolbar">
            <a href="#" onclick="return false;"><img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAB3RJTUUH3gIQDwQfLAFczAAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAACpSURBVHja7ZbvCYAgEMWtCRypERylEdqg0RzBERrBTjEQ8bo/Rp98IIHce79ThM6YRjFGBytEvk5Y1khUIBp5Eaw6STI6onZXwyqTY9Ru6pM91YIb0F3jRyAa9iEov8a6dmmNeRPEBF3wQTtHc6Qn6vjTAznInFFQybC/gLCcdTSUqwmaoAmaICaI8yvHxPJKhpOO15YpypeM8NqNfNJC5ajOpANkq9CD3E7aLKSJzoDDAAAAAElFTkSuQmCC" /></a>
            <a href="#" onclick="return false;"><img alt=""...

CSS

@font-face {
  font-family: "FontAwesome";
  src: url('http://demo.hongkiat.com/jquery-ui-sortable/font/fontawesome-webfont.eot');
  src: url('http://demo.hongkiat.com/jquery-ui-sortable/font/fontawesome-webfont.eot?#iefix') format('eot'), 
  	   url('http://demo.hongkiat.com/jquery-ui-sortable/font/fontawesome-webfont.woff') format('woff'), 
  	   url('http://demo.hongkiat.com/jquery-ui-sortable/font/fontawesome-webfont.ttf') format('truetype'), 
  	   url('http://demo.hongkiat.com/jquery-ui-sortable/font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}
html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    background-color: #393939;
    background-image:...

JavaScript

/* TO DO:
    - content elements of main
*/

var dropWidget = function(i) {
    return i.replaceWith($('<div class="widget" />').html(i.html()));
};

var delWidget = function() {
};

var addWidget = function() {
};

var saveWidget = function() {
}

var updatePagePic = function(pNr) {
    $("#widget-add").hide();
    var content = $("#widget-elements");
    var picture = $(".widget-pagepreview").first();
    var scaleP = ($(picture).width() / $(content).width());
    html2canvas(content, {
        background: undefined,
        onrendered: function(canvas) {
            $("#widget-add").show();
            // canvas is the final rendered <canvas> element
            var h = ($(canvas).attr('height') * scaleP);
            $(picture).html(canvas);
            $(canvas).css({
                '-webkit-transform': "scale("+scaleP+")",
                '-webkit-transform-origin': "top left",
                '-moz-transform':    "scale("+scaleP+")",
                '-moz-transform-origin':    "top left",
                '-ms-transform':     "scale("+scaleP+")",
                '-ms-transform-origin':     "top left",
                '-o-transform':      "scale("+scaleP+")",
                '-o-transform-origin':      "top left",
                'transform':         "scale("+scaleP+")",
                'transform-origin':         "top left"
            });
            $(picture).css({height: h+"px"});
        }
    });
    return false;
}

$(document).ready(function() {
    /* === Toolbar buttons init === */
    $( "#saveBut" ).click(function( event ) {
        event.preventDefault();
        updatePagePic(1);
    });
    
    /* === sortables init === */
    $( "#widget-elements" ).sortable({
        placeholder: "placeholder",
        helper: "clone",
        cursor: "move",
        cursorAt: false,
        receive: function(event, ui) {
            draggedItem = dropWidget(draggedItem);
        },
        sort: function(event, ui) {
            // ui.helper.css({width:...