2 * Copyright 2013 IBM Corp.
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
8 * http://www.apache.org/licenses/LICENSE-2.0
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.
17 RED.palette = (function() {
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>'+
33 $("#header-"+category).on('click', function(e) {
34 $(this).next().slideToggle();
35 $(this).children("i").toggleClass("expanded");
39 core.forEach(createCategoryContainer);
41 function addNodeType(nt,def) {
43 var nodeTypeId = nt.replace(" ","_");
45 if ($("#palette_node_"+nodeTypeId).length) {
49 if (exclusion.indexOf(def.category)===-1) {
51 var category = def.category.replace(" ","_");
52 var rootCategory = category.split("-")[0];
54 var d = document.createElement("div");
55 d.id = "palette_node_"+nodeTypeId;
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);
63 $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
64 return $.fn.textWidth.fakeEl.width();
69 if (typeof def.paletteLabel === "undefined") {
70 label = /^(.*?)([ -]in|[ -]out)?$/.exec(nt)[1];
72 label = (typeof def.paletteLabel === "function" ? def.paletteLabel.call(def) : def.paletteLabel)||"";
75 var pixels = $.fn.textWidth(label, '13px helvetica');
77 var labelWidth = nodeWidth - 10;
78 var numLines = Math.ceil(pixels / nodeWidth);
79 var multiLine = numLines > 1;
81 // styles matching with style.css
85 var multiLineNodeHeight = lineHeight * numLines + (nodeHeight - lineHeight);
87 d.innerHTML = '<div class="palette_label"'+
88 (multiLine ? 'style="line-height: '+
89 lineHeight + 'px; margin-top: 5px"' : '')+
91 d.className="palette_node";
93 d.style.backgroundImage = "url(icons/"+def.icon+")";
95 d.style.backgroundSize = "18px 27px";
97 if (def.align == "right") {
98 d.style.backgroundPosition = "95% 50%";
99 } else if (def.inputs > 0) {
100 d.style.backgroundPosition = "10% 50%";
104 d.style.backgroundColor = def.color;
105 d.style.height = multiLineNodeHeight + "px";
107 if (def.outputs > 0) {
108 var portOut = document.createElement("div");
109 portOut.className = "palette_port palette_port_output";
111 portOut.style.top = ((multiLineNodeHeight - portHeight) / 2) + "px";
113 d.appendChild(portOut);
116 if (def.inputs > 0) {
117 var portIn = document.createElement("div");
118 portIn.className = "palette_port";
120 portIn.style.top = ((multiLineNodeHeight - portHeight) / 2) + "px";
122 d.appendChild(portIn);
125 if ($("#palette-base-category-"+rootCategory).length === 0) {
126 createCategoryContainer(rootCategory);
129 if ($("#palette-"+category).length === 0) {
130 $("#palette-base-category-"+rootCategory).append('<div id="palette-'+category+'"></div>');
133 $("#palette-"+category).append(d);
134 d.onmousedown = function(e) { e.preventDefault(); };
138 popOverContent = $("<p><b>"+label+"</b></p>"+($("script[data-help-name|='"+nt+"']").html().trim()||"<p>no information available</p>")).slice(0,2);
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>";
149 delay: { show: 750, hide: 50 },
152 content: popOverContent
154 $(d).click(function() {
155 var help = '<div class="node-help">'+($("script[data-help-name|='"+d.type+"']").html()||"")+"</div>";
156 $("#tab-info").html(help);
167 function removeNodeType(nt) {
168 var nodeTypeId = nt.replace(" ","_");
169 $("#palette_node_"+nodeTypeId).remove();
171 function hideNodeType(nt) {
172 var nodeTypeId = nt.replace(" ","_");
173 $("#palette_node_"+nodeTypeId).hide();
176 function showNodeType(nt) {
177 var nodeTypeId = nt.replace(" ","_");
178 $("#palette_node_"+nodeTypeId).show();
181 function filterChange() {
182 var val = $("#palette-search-input").val();
184 $("#palette-search-clear").hide();
186 $("#palette-search-clear").show();
189 var re = new RegExp(val);
190 $(".palette_node").each(function(i,el) {
191 if (val === "" || re.test(el.id)) {
199 $("#palette-search-input").focus(function(e) {
200 RED.keyboard.disable();
202 $("#palette-search-input").blur(function(e) {
203 RED.keyboard.enable();
206 $("#palette-search-clear").on("click",function(e) {
208 $("#palette-search-input").val("");
210 $("#palette-search-input").focus();
213 $("#palette-search-input").val("");
214 $("#palette-search-input").on("keyup",function() {
218 $("#palette-search-input").on("focus",function() {
219 $("body").one("mousedown",function() {
220 $("#palette-search-input").blur();
226 remove:removeNodeType,