[CCSDK-28] populated the seed code for dgbuilder
[ccsdk/distribution.git] / dgbuilder / public / red / ui / library.js
diff --git a/dgbuilder/public/red/ui/library.js b/dgbuilder/public/red/ui/library.js
new file mode 100644 (file)
index 0000000..0c803bf
--- /dev/null
@@ -0,0 +1,370 @@
+/**
+ * Copyright 2013 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+RED.library = (function() {
+    
+    
+    function loadFlowLibrary() {
+        $.getJSON("library/flows",function(data) {
+            //console.log(data);
+
+            var buildMenu = function(data,root) {
+                var i;
+                var li;
+                var a;
+                var ul = document.createElement("ul");
+                ul.id = "btn-import-library-submenu";
+                ul.className = "dropdown-menu";
+                if (data.d) {
+                    for (i in data.d) {
+                        if (data.d.hasOwnProperty(i)) {
+                            li = document.createElement("li");
+                            li.className = "dropdown-submenu pull-left";
+                            a = document.createElement("a");
+                            a.href="#";
+                            a.innerHTML = i;
+                            li.appendChild(a);
+                            li.appendChild(buildMenu(data.d[i],root+(root!==""?"/":"")+i));
+                            ul.appendChild(li);
+                        }
+                    }
+                }
+                if (data.f) {
+                    for (i in data.f) {
+                        if (data.f.hasOwnProperty(i)) {
+                            li = document.createElement("li");
+                            a = document.createElement("a");
+                            a.href="#";
+                            a.innerHTML = data.f[i];
+                            a.flowName = root+(root!==""?"/":"")+data.f[i];
+                            a.onclick = function() {
+                                $.get('library/flows/'+this.flowName, function(data) {
+                                        RED.view.importNodes(data);
+                                });
+                            };
+                            li.appendChild(a);
+                            ul.appendChild(li);
+                        }
+                    }
+                }
+                return ul;
+            };
+            var menu = buildMenu(data,"");
+            //TODO: need an api in RED.menu for this
+            $("#btn-import-library-submenu").replaceWith(menu);
+        });
+    }
+    loadFlowLibrary();
+
+
+    
+    function createUI(options) {
+        var libraryData = {};
+        var selectedLibraryItem = null;
+        var libraryEditor = null;
+        
+        function buildFileListItem(item) {
+            var li = document.createElement("li");
+            li.onmouseover = function(e) { $(this).addClass("list-hover"); };
+            li.onmouseout = function(e) { $(this).removeClass("list-hover"); };
+            return li;
+        }
+        
+        function buildFileList(root,data) {
+            var ul = document.createElement("ul");
+            var li;
+            for (var i=0;i<data.length;i++) {
+                var v = data[i];
+                if (typeof v === "string") {
+                    // directory
+                    li = buildFileListItem(v);
+                    li.onclick = (function () {
+                        var dirName = v;
+                        return function(e) {
+                            var bcli = $('<li class="active"><span class="divider">/</span> <a href="#">'+dirName+'</a></li>');
+                            $("a",bcli).click(function(e) { 
+                                $(this).parent().nextAll().remove();
+                                $.getJSON("library/"+options.url+root+dirName,function(data) {
+                                    $("#node-select-library").children().first().replaceWith(buildFileList(root+dirName+"/",data));
+                                });
+                                e.stopPropagation();
+                            });
+                            var bc = $("#node-dialog-library-breadcrumbs");
+                            $(".active",bc).removeClass("active");
+                            bc.append(bcli);
+                            $.getJSON("library/"+options.url+root+dirName,function(data) {
+                                    $("#node-select-library").children().first().replaceWith(buildFileList(root+dirName+"/",data));
+                            });
+                        }
+                    })();
+                    li.innerHTML = '<i class="fa fa-folder"></i> '+v+"</i>";
+                    ul.appendChild(li);
+                } else {
+                    // file
+                   li = buildFileListItem(v);
+                   li.innerHTML = v.name;
+                   li.onclick = (function() {
+                       var item = v;
+                       return function(e) {
+                           $(".list-selected",ul).removeClass("list-selected");
+                           $(this).addClass("list-selected");
+                           $.get("library/"+options.url+root+item.fn, function(data) {
+                                   selectedLibraryItem = item;
+                                   libraryEditor.setText(data);
+                           });
+                       }
+                   })();
+                   ul.appendChild(li);
+                }
+            }
+            return ul;
+        }
+    
+/*
+//Commented this portion as is not used by the DGBuilder application
+        $('#node-input-name').addClass('input-append-left').css("width","65%").after(
+            '<div class="btn-group" style="margin-left: 0px;">'+
+            '<button id="node-input-'+options.type+'-lookup" class="btn input-append-right" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></button>'+
+            '<ul class="dropdown-menu pull-right" role="menu">'+
+            '<li><a id="node-input-'+options.type+'-menu-open-library" tabindex="-1" href="#">Open Library...</a></li>'+
+            '<li><a id="node-input-'+options.type+'-menu-save-library" tabindex="-1" href="#">Save to Library...</a></li>'+
+            '</ul></div>'
+        );
+    
+        
+        
+        $('#node-input-'+options.type+'-menu-open-library').click(function(e) {
+            $("#node-select-library").children().remove();
+            var bc = $("#node-dialog-library-breadcrumbs");
+            bc.children().first().nextAll().remove();
+            libraryEditor.setText('');
+            
+            $.getJSON("library/"+options.url,function(data) {
+                $("#node-select-library").append(buildFileList("/",data));
+                $("#node-dialog-library-breadcrumbs a").click(function(e) {
+                    $(this).parent().nextAll().remove();
+                    $("#node-select-library").children().first().replaceWith(buildFileList("/",data));
+                    e.stopPropagation();
+                });
+                $( "#node-dialog-library-lookup" ).dialog( "open" );
+            });
+            
+            e.preventDefault();
+        });
+    
+        $('#node-input-'+options.type+'-menu-save-library').click(function(e) {
+            //var found = false;
+            var name = $("#node-input-name").val().replace(/(^\s*)|(\s*$)/g,"");
+
+            //var buildPathList = function(data,root) {
+            //    var paths = [];
+            //    if (data.d) {
+            //        for (var i in data.d) {
+            //            var dn = root+(root==""?"":"/")+i;
+            //            var d = {
+            //                label:dn,
+            //                files:[]
+            //            };
+            //            for (var f in data.d[i].f) {
+            //                d.files.push(data.d[i].f[f].fn.split("/").slice(-1)[0]);
+            //            }
+            //            paths.push(d);
+            //            paths = paths.concat(buildPathList(data.d[i],root+(root==""?"":"/")+i));
+            //        }
+            //    }
+            //    return paths;
+            //};
+            $("#node-dialog-library-save-folder").attr("value","");
+
+            var filename = name.replace(/[^\w-]/g,"-");
+            if (filename === "") {
+                filename = "unnamed-"+options.type;
+            }
+            $("#node-dialog-library-save-filename").attr("value",filename+".js");
+
+            //var paths = buildPathList(libraryData,"");
+            //$("#node-dialog-library-save-folder").autocomplete({
+            //        minLength: 0,
+            //        source: paths,
+            //        select: function( event, ui ) {
+            //            $("#node-dialog-library-save-filename").autocomplete({
+            //                    minLength: 0,
+            //                    source: ui.item.files
+            //            });
+            //        }
+            //});
+
+            $( "#node-dialog-library-save" ).dialog( "open" );
+            e.preventDefault();
+        });
+        require(["orion/editor/edit"], function(edit) {
+            libraryEditor = edit({
+                parent:document.getElementById('node-select-library-text'),
+                lang:"js",
+                readonly: true
+            });
+        });
+    
+        
+        $( "#node-dialog-library-lookup" ).dialog({
+            title: options.type+" library",
+            modal: true,
+            autoOpen: false,
+            width: 800,
+            height: 450,
+            buttons: [
+                {
+                    text: "Ok",
+                    click: function() {
+                        if (selectedLibraryItem) {
+                            for (var i=0;i<options.fields.length;i++) {
+                                var field = options.fields[i];
+                                $("#node-input-"+field).val(selectedLibraryItem[field]);
+                            }
+                            options.editor.setText(libraryEditor.getText());
+                        }
+                        $( this ).dialog( "close" );
+                    }
+                },
+                {
+                    text: "Cancel",
+                    click: function() {
+                        $( this ).dialog( "close" );
+                    }
+                }
+            ],
+            open: function(e) {
+                var form = $("form",this);
+                form.height(form.parent().height()-30);
+                $("#node-select-library-text").height("100%");
+                $(".form-row:last-child",form).children().height(form.height()-60);
+            },
+            resize: function(e) {
+                var form = $("form",this);
+                form.height(form.parent().height()-30);
+                $(".form-row:last-child",form).children().height(form.height()-60);
+            }
+        });
+        
+   */ 
+        function saveToLibrary(overwrite) {
+            var name = $("#node-input-name").val().replace(/(^\s*)|(\s*$)/g,"");
+            if (name === "") {
+                name = "Unnamed "+options.type;
+            }
+            var filename = $("#node-dialog-library-save-filename").val().replace(/(^\s*)|(\s*$)/g,"");
+            var pathname = $("#node-dialog-library-save-folder").val().replace(/(^\s*)|(\s*$)/g,"");
+            if (filename === "" || !/.+\.js$/.test(filename)) {
+                RED.notify("Invalid filename","warning");
+                return;
+            }
+            var fullpath = pathname+(pathname===""?"":"/")+filename;
+            if (!overwrite) {
+                //var pathnameParts = pathname.split("/");
+                //var exists = false;
+                //var ds = libraryData;
+                //for (var pnp in pathnameParts) {
+                //    if (ds.d && pathnameParts[pnp] in ds.d) {
+                //        ds = ds.d[pathnameParts[pnp]];
+                //    } else {
+                //        ds = null;
+                //        break;
+                //    }
+                //}
+                //if (ds && ds.f) {
+                //    for (var f in ds.f) {
+                //        if (ds.f[f].fn == fullpath) {
+                //            exists = true;
+                //            break;
+                //        }
+                //    }
+                //}
+                //if (exists) {
+                //    $("#node-dialog-library-save-type").html(options.type);
+                //    $("#node-dialog-library-save-name").html(fullpath);
+                //    $("#node-dialog-library-save-confirm").dialog( "open" );
+                //    return;
+                //}
+            }
+            var queryArgs = [];
+            for (var i=0;i<options.fields.length;i++) {
+                var field = options.fields[i];
+                if (field == "name") {
+                    queryArgs.push("name="+encodeURIComponent(name));
+                } else {
+                    queryArgs.push(encodeURIComponent(field)+"="+encodeURIComponent($("#node-input-"+field).val()));
+                }
+            }
+            var queryString = queryArgs.join("&");
+            
+            var text = options.editor.getText();
+            $.post("library/"+options.url+'/'+fullpath+"?"+queryString,text,function() {
+                    RED.notify("Saved "+options.type,"success");
+            });
+        }
+        $( "#node-dialog-library-save-confirm" ).dialog({
+            title: "Save to library",
+            modal: true,
+            autoOpen: false,
+            width: 530,
+            height: 230,
+            buttons: [
+                {
+                    text: "Ok",
+                    click: function() {
+                        saveToLibrary(true);
+                        $( this ).dialog( "close" );
+                    }
+                },
+                {
+                    text: "Cancel",
+                    click: function() {
+                        $( this ).dialog( "close" );
+                    }
+                }
+            ]
+        });
+        $( "#node-dialog-library-save" ).dialog({
+            title: "Save to library",
+            modal: true,
+            autoOpen: false,
+            width: 530,
+            height: 230,
+            buttons: [
+                {
+                    text: "Ok",
+                    click: function() {
+                        saveToLibrary(false);
+                        $( this ).dialog( "close" );
+                    }
+                },
+                {
+                    text: "Cancel",
+                    click: function() {
+                        $( this ).dialog( "close" );
+                    }
+                }
+            ]
+        });
+
+    }
+    
+    return {
+        create: createUI,
+        loadFlowLibrary: loadFlowLibrary
+    }
+})();
+
+