@dualbox/editor 1.0.1 → 1.0.3

package/js/src/v/templates/main.js

@@ -0,0 +1,511 @@
+const swal = require('sweetalert2');
+var CodeMirror = require('../../libs/CodeMirror.js');
+
+var TemplateBinds = function(view, div) {
+    // instanciate main settings first
+    view.setMainMenu();
+
+    var getOptions = () => {
+        return {
+            profiler : div.find('.run-profiler').is(':checked'),
+            logLevel : div.find('.run-loglevel').val(),
+            options : {
+                noVersionCheck: div.find('.run-noversioncheck').is(':checked'),
+                debug: {
+                    removeTryCatch: div.find('.run-removetrycatch').is(':checked'),
+                    makeSynchrone: div.find('.run-makesynchrone').is(':checked'),
+                    record: div.find('.run-record').is(':checked'),
+                }
+            }
+        }
+    }
+
+    // Resize horizontally
+    div.find('.dragbar').mousedown(function(e){
+        e.preventDefault();
+        $(document).mouseup(function(e){
+            $(document).unbind('mousemove');
+        });
+        $(document).mousemove(function(e){
+            $('.code-panel').css('width', e.pageX + "px");
+            $('.application-container').css('width', ($(".main").width() - e.pageX - 5) + "px");
+        })
+    });
+
+    // bind the app load
+    div.find('.load-app').click(function(e) {
+        // create a fake input and click it to select a file
+        var input = $('<input/>', { "type": "file", "class": "upload", "accept" : ".json" });
+        input.change( function(e) {
+            // if we're not here, go to 1st tab
+            $("a[data-toggle='tab'][href='#1']").click();
+
+            // parse the file JSON and load it
+            var files = e.target.files; // FileList object
+            var r = new FileReader();
+            r.onload = function(e) {
+                var contents = e.target.result;
+                var json = JSON.parse(contents);
+                view.e.setApp(json);
+            };
+
+            r.readAsText(files[0]);
+        });
+        input.click();
+    });
+
+    // bind the app load
+    div.find('.save-app').click(function(e) {
+        var app = view.m.getCleanJson();
+        var text = JSON.stringify(app, null, 2);
+        var blob = new Blob([text], { "type" : "application/octet-stream" });
+
+        var a = document.createElement('a');
+        a.href = window.URL.createObjectURL(blob);
+        a.download = "app.json";
+
+        // simulate a click on the link
+        if (document.createEvent) {
+            var event = document.createEvent("MouseEvents");
+            event.initEvent("click", true, true);
+            a.dispatchEvent(event);
+        } else {
+            a.click();
+        }
+    });
+
+    div.find('.add-metabox').click(function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        swal({
+            input: 'text',
+            title: 'Choose a name for the metabox',
+        }).then(function(result) {
+            if( result.value ) {
+                view.e.c.addNewMetabox(result.value);
+            }
+        });
+    });
+
+    div.find('.add-input').click(function(e) {
+        view.c.createInput();
+    });
+
+    div.find('.add-output').click(function(e) {
+        view.c.createOutput();
+    });
+
+    div.find('.import-metabox').click(async function(e) {
+        /*
+        swal({
+            title: "Pick your metabox file",
+            html: "<input type='file' id='fileToUploadAlert' accept='application/json' />",
+            showCancelButton: true,
+            confirmButtonColor: "#07A803",
+            confirmButtonText: "Upload",
+            closeOnConfirm: false,
+            showLoaderOnConfirm: true
+        }, function () {
+            var files = $('input#fileToUploadAlert').prop('files');
+            if (files.length === 0) {
+                swal.showInputError("You need to upload a file!");
+                return false
+            }
+
+            console.log(files[0]);
+        });
+        */
+
+        const { value: file } = await swal({
+            title: 'Select your metabox file',
+            input: 'file',
+            inputAttributes: {
+                'accept': 'application/json',
+                'aria-label': 'Select your metabox file'
+            }
+        })
+
+        if (file) {
+            const reader = new FileReader()
+            reader.onload = (e) => {
+                var json = JSON.parse(e.target.result);
+
+                view.e.loadPackages(json).then(async () => {
+                    const { value: name } = await swal({
+                        title: 'Choose a name for your metabox',
+                        input: 'text',
+                        showCancelButton: true,
+                        inputValidator: (value) => {
+                          return !value && 'You need to write something!'
+                        }
+                    });
+
+                    view.c.addNewMetabox(name, json);
+                });
+            }
+            reader.readAsText(file)
+        }
+    });
+
+    div.find('.btn-goto-topleft').click(function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        view.translater.gotoTopLeft();
+    });
+    div.find('.btn-goto-topright').click(function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        view.translater.gotoTopRight();
+    });
+    div.find('.btn-goto-bottomleft').click(function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        view.translater.gotoBottomLeft();
+    });
+    div.find('.btn-goto-bottomright').click(function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        view.translater.gotoBottomRight();
+    });
+
+    div.find("a[data-toggle='tab']").on("shown.bs.tab", function(e) {
+        var target = $(e.target).attr("href") // activated tab
+        if( target == "#1" ) {
+            view.killApp();
+        }
+        else if( target == "#2" ) {
+            view.htmlCode.refresh();
+            view.cssCode.refresh();
+            view.runApp( getOptions() );
+        }
+    });
+
+    // instanciate codemirror for html and css
+    if( !view.htmlCode ) {
+        view.htmlCode = CodeMirror.fromTextArea( div.find(".code-html")[0], {
+            lineNumbers: true,
+            mode : "htmlmixed",
+            lineWrapping: true
+        });
+    }
+    if( !view.cssCode ) {
+        view.cssCode = CodeMirror.fromTextArea( div.find(".code-css")[0], {
+            lineNumbers: true,
+            mode : "css",
+            lineWrapping: true
+        });
+    }
+
+    // bind the interface buttons
+    // Load the interface HTML when selected
+    div.find(".app-interface-select").change( function(e) {
+        var uiName = $(this).val();
+        if( uiName !== "" && uiName !== "Load UI..." ) {
+            var interface = view.m.data.root.interface;
+            var htmlString = htmltool.json2html(interface[uiName]);
+            var prettyString = htmltool.htmlPrettyPrint(htmlString);
+            view.htmlCode.setValue(prettyString);
+        }
+        else {
+            view.htmlCode.setValue("");
+        }
+    });
+
+    div.find(".btn-save-interface-element").click( function(e) {
+        var currentInterface = div.find('.app-interface-select').val();
+        if( currentInterface !== "" ) {
+            var currentHTML = view.htmlCode.getValue();
+
+            // save html code into app
+            view.m.data.root.interface[currentInterface] = htmltool.html2json(currentHTML);
+        }
+
+        // save css code into app
+        view.m.data.root.css = view.cssCode.getValue();
+    });
+
+    // Buttons for adding and remove interface
+    div.find('.btn-add-interface').click(function(e) {
+        swal.mixin({
+            confirmButtonText: 'Next &rarr;',
+            showCancelButton: true,
+            progressSteps: ['1', '2', '3']
+        }).queue([
+            {
+                input: 'text',
+                title: 'Choose a name',
+                text: 'Enter a name for the new interface'
+            },
+            {
+                input: 'select',
+                title: 'Choose the type',
+                text : 'Is it a viewer panel or a control panel?',
+                inputOptions: {
+                  'control': 'A control panel',
+                  'viewer': 'A viewer',
+                },
+            },
+            {
+                input: 'select',
+                title: 'Choose the position',
+                text : 'Where do you want to position your panel?',
+                inputOptions: {
+                  'top-left': 'At the top-left',
+                  'top-center': 'At the top-center',
+                  'top-right': 'At the top-right',
+                  'center-left': 'At the center-left',
+                  'center': 'At the center',
+                  'center-right': 'At the center-right',
+                  'bottom-left': 'At the bottom-left',
+                  'bottom-center': 'At the bottom-center',
+                  'bottom-right': 'At the bottom-right',
+                  'whole-screen': 'I want my panel in full-screen',
+                },
+            }
+        ]).then((result) => {
+            if (result.value) {
+                var name = result.value[0];
+                var type = result.value[1];
+                var position = result.value[2];
+
+                if (name === "") {
+                    swal.showInputError("the name is empty!");
+                    return false
+                }
+
+                var appInterface = view.m.data.root.interface;
+                if( appInterface[name] ) {
+                  swal.showInputError("Interface " + name + " already exists!");
+                  return false
+                }
+                else {
+                    var style={};
+                    switch(position) {
+                    case 'top-left':      style={ 'position': 'absolute', 'top': 0, 'left': 0, 'margin': '15px' }; break;
+                    case 'top-center':    style={ 'position': 'absolute', 'top': 0, 'margin': '15px auto' }; break;
+                    case 'top-right':     style={ 'position': 'absolute', 'top': 0, 'right': 0, 'margin': '15px' }; break;
+                    case 'center-left':   style={ 'position': 'absolute', 'top': 0, 'bottom': 0, 'left': 0, 'margin': 'auto 15px' }; break;
+                    case 'center':        style={ 'position': 'absolute', 'top': 0, 'bottom': 0, 'left': 0, 'right': 0, 'margin': 'auto' }; break;
+                    case 'center-right':  style={ 'position': 'absolute', 'top': 0, 'bottom': 0, 'right': 0, 'margin': 'auto 15px' }; break;
+                    case 'bottom-left':   style={ 'position': 'absolute', 'bottom': 0, 'left': 0, 'margin': '15px' }; break;
+                    case 'bottom-center': style={ 'position': 'absolute', 'bottom': 0, 'left': 0, 'right': 0, 'margin': '15px auto' }; break;
+                    case 'bottom-right':  style={ 'position': 'absolute', 'bottom': 0, 'right': 0, 'margin': '15px' }; break;
+                    case 'whole-screen':  style={ 'position': 'absolute', 'top': 0, 'left': 0 }; break;
+                    }
+
+                    // some prefilled data
+                    style['width'] = "300px";
+                    style['padding'] = "15px";
+                    style['border'] = "1px solid #ccc";
+                    style['border-radius'] = "4px";
+                    style['background'] = "white";
+                    if( position.startsWith("center") ) {
+                        style['height'] = "60px"; // must define height
+                    }
+                    else {
+                        style['height'] = "auto";
+                    }
+
+                    // add a basic control
+                    appInterface[name] = {
+                        type: "Element",
+                        tagName: "div",
+                        attributes: {
+                            className: [
+                              "dualbox",
+                              "dualbox-container",
+                              "dualbox-container-" + name,
+                              type=="viewer" ? "dualbox-viewer" : "dualbox-controls"
+                            ],
+                            style: style,
+                        },
+                        children: []
+                    }
+
+                    // add the value to our select, and load it
+                    div.find(".app-interface-select").append(
+                        $("<option/>", { "value" : name }).append(name)
+                    );
+                    $(document).ready(function() {
+                        div.find('.app-interface-select').val(name).change();
+                    });
+
+                    view.runApp( getOptions() );
+                }
+            }
+        })
+    });
+
+    div.find('.btn-remove-interface').click(function(e) {
+        var name = $('.app-interface-select').val();
+
+        swal({
+            title: "Confirm deleting " + name + " ?",
+            type: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#DD6B55",
+            confirmButtonText: "Yes, delete it!",
+            closeOnConfirm: true,
+            closeOnCancel: true
+        }).then((result) => {
+            if( result.value ) {
+                // set the interface back to first value
+                div.find(".app-interface-select option[value='" + name + "']").remove();
+                div.find(".app-interface-select").change();
+                delete view.m.data.root.interface[name];
+                view.htmlCode.setValue("");
+                view.runApp( getOptions() );
+            }
+        });
+    });
+
+
+    div.find('.btn-edit-panel-description').click(function(e) {
+        var name = $('.app-interface-select').val();
+
+        swal({
+            title: "Enter a description for this panel!",
+            input: "textarea",
+            inputValue: view.m.data.root.interface[name].description || "",
+            showCancelButton: true,
+            closeOnConfirm: false,
+            showLoaderOnConfirm: true,
+            animation: "slide-from-top",
+            inputPlaceholder: "Write something"
+        }).then( (result) => {
+            if (result.value === "") {
+              swal.showInputError("You need to write something!");
+              return false
+            }
+            else {
+                view.m.data.root.interface[name].description = result.value;
+            }
+        });
+    });
+
+    div.bind('expandSettings', function(e) {
+        // expand
+        div.find('.dualbox-graph-left-section').css('margin-left', '0');
+        div.find('.dualbox-graph-main').addClass('left-panel-expanded');
+        div.find('.btn-toggle-left-window').data('expanded', true).find('i')
+            .removeClass('fa-angle-double-right')
+            .addClass('fa-angle-double-left')
+            .attr('title', 'shrink window');
+    });
+
+    div.bind('shrinkSettings', function(e) {
+        // shrink
+        div.find('.dualbox-graph-left-section').css('margin-left', '-465px');
+        div.find('.dualbox-graph-main').removeClass('left-panel-expanded');
+        div.find('.btn-toggle-left-window').data('expanded', false).find('i')
+            .removeClass('fa-angle-double-left')
+            .addClass('fa-angle-double-right')
+            .attr('title', 'expand window');
+    });
+
+    div.bind('expandDebug', function(e) {
+        // expand
+        div.find('.dualbox-graph-right-section').css('margin-right', '0');
+        div.find('.dualbox-graph-main').addClass('right-panel-expanded');
+        div.find('.btn-toggle-right-window').data('expanded', true).find('i')
+            .removeClass('fa-angle-double-left')
+            .addClass('fa-angle-double-right')
+            .attr('title', 'shrink window');
+    });
+
+    div.bind('shrinkDebug', function(e) {
+        // shrink
+        div.find('.dualbox-graph-right-section').css('margin-right', '-465px');
+        div.find('.dualbox-graph-main').removeClass('right-panel-expanded');
+        div.find('.btn-toggle-right-window').data('expanded', false).find('i')
+            .removeClass('fa-angle-double-right')
+            .addClass('fa-angle-double-left')
+            .attr('title', 'expand window');
+    });
+
+    div.find('.btn-toggle-left-window').click(function(e) {
+        var expanded = $(this).data('expanded');
+        if( expanded ) {
+            div.trigger('shrinkSettings');
+        }
+        else {
+            div.trigger('expandSettings');
+        }
+    });
+
+    div.find('.btn-toggle-right-window').click(function(e) {
+        var expanded = $(this).data('expanded');
+        if( expanded ) {
+            div.trigger('shrinkDebug');
+        }
+        else {
+            div.trigger('expandDebug');
+        }
+    });
+
+    div.find('.show-events').change(function(e) {
+        view.setEventsVisibility( $(this).is(':checked') );
+    });
+
+    div.find('.btn-run').click(function(e) {
+        view.runApp( getOptions() );
+    });
+
+    div.find('.btn-snapshot').click(function(e) {
+        view.takeAndLoadSnapshot();
+    });
+
+    div.find('.btn-undo').click(function(e) {
+        view.c.undo();
+    });
+
+    div.find('.btn-redo').click(function(e) {
+        view.c.redo();
+    });
+
+    div.find('.dualbox-remove-selection').click(function(e) {
+        view.c.deleteSelection();
+    });
+
+    div.find('.dualbox-merge-selection').click(function(e) {
+        view.c.mergeSelection();
+    });
+
+    div.find('.dualbox-graph-main').click(function(e) {
+        view.setMainMenu();
+    });
+
+    // autofocus editor when the div is clicked (allow to use keydown)
+    $(document).keydown(function(e) {
+        // Ensure event is not null
+        e = e || window.event;
+
+        if ((e.which == 90 || e.keyCode == 90) && e.ctrlKey) { // ctrl + z
+            if( div.find('.dualbox-graph-container').is(':hover') ) {
+                view.c.undo();
+            }
+        }
+        else if((e.which == 89 || e.keyCode == 89) && e.ctrlKey) { // ctrl + y
+            if( div.find('.dualbox-graph-container').is(':hover') ) {
+                view.c.redo();
+            }
+        }
+        else if((e.which == 46 || e.keyCode == 46)) { // suppr: delete selection
+            // idk why this doesnt work when binded directly to .dualbox-graph-container
+            if( div.find('.dualbox-graph-container').is(':hover') ) {
+                view.c.deleteSelection();
+            }
+        }
+    });
+
+    /*
+    // capture right click in order to prevent unintended behaviors
+    div.contextmenu(function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    });
+    */
+}
+
+module.exports = TemplateBinds;

package/js/src/v/templates/searchResults.css

@@ -0,0 +1,50 @@
+.node-result {
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    padding-top: 10px;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-bottom: 5px;
+    cursor: pointer;
+}
+
+.node-result:hover {
+    background-color: #eee;
+}
+
+.node-result.selected {
+    background-color: #ddd;
+}
+
+.node-result.selected {
+    background-color: #eee;
+}
+
+.node-name {
+    display: block;
+    width: 100%;
+    margin: 0;
+}
+
+.node-desc {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    display: inline-block;
+    max-width: 100%;
+}
+
+.search-nodes-results {
+    max-height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    padding-right: 15px;
+}
+
+.badge-node {
+    width: 70px;
+    text-align: center;
+}
+
+.noselect {
+    pointer-events: none;
+}

package/js/src/v/templates/searchResults.html

@@ -0,0 +1,46 @@
+@!(attrs)
+@if (attrs.err) {
+    <div class="text-danger">@(attrs.err)</p>
+}
+else {
+    <div>
+    @for(var i=0; i<attrs.results.length; i++) {
+        @{m = attrs.results[i]}
+
+        @if( isNotLibrary(m.name) ) {
+            <div class="row node-result" data-package="@m.name" data-short-name="@displayName(m.name)">
+                <div class="col noselect">
+                    <p class="node-name" style="margin: 0;">
+                        <span>@displayType(m.name)</span>
+                        <b>@displayName(m.name)</b>
+                    </p>
+                    <small class="node-desc"><i>@m.description</i></small>
+                </div>
+            </div>
+        }
+    }
+    </div>
+}
+
+@function displayName( str ) {
+    @{str = str.replace('@dualbox/', '')}
+    @{str = str.replace('dualbox-core-', '')}
+    @{str = str.replace('dualbox-lib-', '')}
+    @{str = str.replace('dualbox-ui-', '')}
+    @{str = str.replace('dualbox-module-', '')}
+    @str
+}
+
+@function displayType( name ) {
+    @{str = name.replace('@dualbox/', '')}
+    @if( str.indexOf("dualbox-core") !== -1 || str.indexOf("dualbox-module") !== -1 ) {
+        <span class="badge badge-secondary">compute</span>
+    }
+    else if( str.indexOf("dualbox-ui") !== -1 ) {
+        <span class="badge badge-success">ui</span>
+    }
+}
+
+@function isNotLibrary( name ) {
+    @{ return name.indexOf('dualbox-lib-') === -1; }
+}