dgbuilder/public/red/ui/palette.js

   1 /**
   2  * Copyright 2013 IBM Corp.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  **/
  16
  17 RED.palette = (function() {
  18
  19     var exclusion = ['config','unknown','deprecated'];
  20     //var core = ['input', 'output', 'function', 'social', 'storage', 'analysis', 'advanced'];
  21     var core = ['DGEmain','DGEoutcome','DGEreturn','DGElogic'];
  22     function createCategoryContainer(category){
  23         var escapedCategory = category.replace(" ","_");
  24         $("#palette-container").append('<div class="palette-category">'+
  25             '<div id="header-'+category+'" class="palette-header"><i class="expanded fa fa-caret-down"></i><span>'+category.replace("_"," ")+'</span></div>'+
  26             '<div class="palette-content" id="palette-base-category-'+category+'">'+
  27             '<div id="palette-'+category+'-input"></div>'+
  28             '<div id="palette-'+category+'-output"></div>'+
  29             '<div id="palette-'+category+'-function"></div>'+
  30             '</div>'+
  31             '</div>');
  32
  33         $("#header-"+category).on('click', function(e) {
  34             $(this).next().slideToggle();
  35             $(this).children("i").toggleClass("expanded");
  36         });
  37     }
  38
  39     core.forEach(createCategoryContainer);
  40
  41     function addNodeType(nt,def) {
  42
  43         var nodeTypeId = nt.replace(" ","_");
  44
  45         if ($("#palette_node_"+nodeTypeId).length) {
  46             return;
  47         }
  48
  49         if (exclusion.indexOf(def.category)===-1) {
  50
  51             var category = def.category.replace(" ","_");
  52             var rootCategory = category.split("-")[0];
  53
  54             var d = document.createElement("div");
  55             d.id = "palette_node_"+nodeTypeId;
  56             d.type = nt;
  57
  58             // calculate width of label text
  59             $.fn.textWidth = function(text, font) {
  60                 if (!$.fn.textWidth.fakeEl) {
  61                     $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
  62                 }
  63                 $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
  64                 return $.fn.textWidth.fakeEl.width();
  65             };
  66
  67             var label;
  68
  69             if (typeof def.paletteLabel === "undefined") {
  70                 label = /^(.*?)([ -]in|[ -]out)?$/.exec(nt)[1];
  71             } else {
  72                 label = (typeof def.paletteLabel === "function" ? def.paletteLabel.call(def) : def.paletteLabel)||"";
  73             }
  74
  75             var pixels = $.fn.textWidth(label, '13px helvetica');
  76             var nodeWidth = 90;
  77             var labelWidth = nodeWidth - 10;
  78             var numLines = Math.ceil(pixels / nodeWidth);
  79             var multiLine = numLines > 1;
  80
  81             // styles matching with style.css
  82             var nodeHeight = 25;
  83             var lineHeight = 16;
  84             var portHeight = 10;
  85             var multiLineNodeHeight = lineHeight * numLines + (nodeHeight - lineHeight);
  86
  87             d.innerHTML = '<div class="palette_label"'+
  88                 (multiLine ? 'style="line-height: '+
  89                     lineHeight + 'px; margin-top: 5px"' : '')+
  90                 '>'+label+"</div>";
  91             d.className="palette_node";
  92             if (def.icon) {
  93                 d.style.backgroundImage = "url(icons/"+def.icon+")";
  94                 if (multiLine) {
  95                     d.style.backgroundSize = "18px 27px";
  96                 }
  97                 if (def.align == "right") {
  98                     d.style.backgroundPosition = "95% 50%";
  99                 } else if (def.inputs > 0) {
 100                     d.style.backgroundPosition = "10% 50%";
 101                 }
 102             }
 103
 104             d.style.backgroundColor = def.color;
 105             d.style.height = multiLineNodeHeight + "px";
 106
 107             if (def.outputs > 0) {
 108                 var portOut = document.createElement("div");
 109                 portOut.className = "palette_port palette_port_output";
 110                 if (multiLine) {
 111                     portOut.style.top = ((multiLineNodeHeight - portHeight) / 2) + "px";
 112                 }
 113                 d.appendChild(portOut);
 114             }
 115
 116             if (def.inputs > 0) {
 117                 var portIn = document.createElement("div");
 118                 portIn.className = "palette_port";
 119                 if (multiLine) {
 120                     portIn.style.top = ((multiLineNodeHeight - portHeight) / 2) + "px";
 121                 }
 122                 d.appendChild(portIn);
 123             }
 124
 125             if ($("#palette-base-category-"+rootCategory).length === 0) {
 126                 createCategoryContainer(rootCategory);
 127             }
 128
 129             if ($("#palette-"+category).length === 0) {
 130                 $("#palette-base-category-"+rootCategory).append('<div id="palette-'+category+'"></div>');
 131             }
 132
 133             $("#palette-"+category).append(d);
 134             d.onmousedown = function(e) { e.preventDefault(); };
 135
 136             var popOverContent;
 137             try {
 138                 popOverContent = $("<p><b>"+label+"</b></p>"+($("script[data-help-name|='"+nt+"']").html().trim()||"<p>no information available</p>")).slice(0,2);
 139             } catch(err) {
 140                 // Malformed HTML may cause errors. TODO: need to understand what can break
 141                 console.log("Error generating pop-over label for '"+nt+"'.");
 142                 console.log(err.toString());
 143                 popOverContent = "<p><b>"+label+"</b></p><p>no information available</p>";
 144             }
 145             $(d).popover({
 146                 title:d.type,
 147                 placement:"right",
 148                 trigger: "hover",
 149                 delay: { show: 750, hide: 50 },
 150                 html: true,
 151                 container:'body',
 152                 content: popOverContent
 153             });
 154             $(d).click(function() {
 155                 var help = '<div class="node-help">'+($("script[data-help-name|='"+d.type+"']").html()||"")+"</div>";
 156                 $("#tab-info").html(help);
 157             });
 158             $(d).draggable({
 159                 helper: 'clone',
 160                 appendTo: 'body',
 161                 revert: true,
 162                 revertDuration: 50
 163             });
 164         }
 165     }
 166
 167     function removeNodeType(nt) {
 168         var nodeTypeId = nt.replace(" ","_");
 169         $("#palette_node_"+nodeTypeId).remove();
 170     }
 171     function hideNodeType(nt) {
 172         var nodeTypeId = nt.replace(" ","_");
 173         $("#palette_node_"+nodeTypeId).hide();
 174     }
 175
 176     function showNodeType(nt) {
 177         var nodeTypeId = nt.replace(" ","_");
 178         $("#palette_node_"+nodeTypeId).show();
 179     }
 180
 181     function filterChange() {
 182         var val = $("#palette-search-input").val();
 183         if (val === "") {
 184             $("#palette-search-clear").hide();
 185         } else {
 186             $("#palette-search-clear").show();
 187         }
 188
 189         var re = new RegExp(val);
 190         $(".palette_node").each(function(i,el) {
 191             if (val === "" || re.test(el.id)) {
 192                 $(this).show();
 193             } else {
 194                 $(this).hide();
 195             }
 196         });
 197     }
 198
 199     $("#palette-search-input").focus(function(e) {
 200         RED.keyboard.disable();
 201     });
 202     $("#palette-search-input").blur(function(e) {
 203         RED.keyboard.enable();
 204     });
 205
 206     $("#palette-search-clear").on("click",function(e) {
 207         e.preventDefault();
 208         $("#palette-search-input").val("");
 209         filterChange();
 210         $("#palette-search-input").focus();
 211     });
 212
 213     $("#palette-search-input").val("");
 214     $("#palette-search-input").on("keyup",function() {
 215         filterChange();
 216     });
 217
 218     $("#palette-search-input").on("focus",function() {
 219         $("body").one("mousedown",function() {
 220             $("#palette-search-input").blur();
 221         });
 222     });
 223
 224     return {
 225         add:addNodeType,
 226         remove:removeNodeType,
 227         hide:hideNodeType,
 228         show:showNodeType
 229     };
 230 })();