From 3edf66c0d14f32e7992aec66445f85802fbdf311 Mon Sep 17 00:00:00 2001 From: nightwing Date: Fri, 30 Jun 2017 00:00:56 +0400 Subject: [PATCH] add ui.buildDom method --- plugins/c9.ide.ace/ace.js | 7 ++--- plugins/c9.ide.ace/themes.js | 16 +++++----- plugins/c9.ide.collab/collab.js | 8 ++--- plugins/c9.ide.collab/cursor_layer.js | 28 +++++++----------- plugins/c9.ide.ui/lib_apf.js | 42 ++++++++++++++++++++++++++- plugins/c9.ide.ui/ui.js | 4 +++ 6 files changed, 71 insertions(+), 34 deletions(-) diff --git a/plugins/c9.ide.ace/ace.js b/plugins/c9.ide.ace/ace.js index 90399c4c..42b572b0 100644 --- a/plugins/c9.ide.ace/ace.js +++ b/plugins/c9.ide.ace/ace.js @@ -185,10 +185,9 @@ define(function(require, exports, module) { var cssClass = theme.cssClass; - var div = document.createElement("div"); - document.body.appendChild(div); - div.innerHTML = "
"; - div.className = cssClass; + var div = ui.buildDom(["div", { class: cssClass }, [ + "span", { class: "ace_gutter" } + ]], document.body); theme.bg = ui.getStyle(div.firstChild, "backgroundColor"); theme.fg = ui.getStyle(div.firstChild, "color"); diff --git a/plugins/c9.ide.ace/themes.js b/plugins/c9.ide.ace/themes.js index a1b44352..402a63d3 100644 --- a/plugins/c9.ide.ace/themes.js +++ b/plugins/c9.ide.ace/themes.js @@ -180,14 +180,14 @@ define(function(require, exports, module) { rb1.$group.on("afterchange", change); - intro.$int.innerHTML = - '

Themes

You can also style Cloud9 by editing ' - + ' your stylesheet.

' - + '

Set all the colors free!

'; - - intro.$int.querySelector("a").onclick = function() { - configure.editStylesCss(); - }; + ui.buildDom([ + ["h1", null, "Themes"], + ["p", null, "You can also style Cloud9 by editing", + ["a", { href: "javascript:void(0)", onclick: function() { configure.editStylesCss(); } }, + "your stylesheet"] + ], + ["p", { class: "hint" }, "Set all the colors free!"] + ], intro.$int); } /***** Methods *****/ diff --git a/plugins/c9.ide.collab/collab.js b/plugins/c9.ide.collab/collab.js index be592f14..c2f9af0d 100644 --- a/plugins/c9.ide.collab/collab.js +++ b/plugins/c9.ide.collab/collab.js @@ -50,10 +50,10 @@ define(function(require, exports, module) { var emit = plugin.getEmitter(); // open collab documents - var documents = {}; - var openFallbackTimeouts = {}; - var saveFallbackTimeouts = {}; - var usersLeaving = {}; + var documents = Object.create(null); + var openFallbackTimeouts = Object.create(null); + var saveFallbackTimeouts = Object.create(null); + var usersLeaving = Object.create(null); var failedSaveAttempts = 0; var OPEN_FILESYSTEM_FALLBACK_TIMEOUT = 6000; var SAVE_FILESYSTEM_FALLBACK_TIMEOUT = 30000; diff --git a/plugins/c9.ide.collab/cursor_layer.js b/plugins/c9.ide.collab/cursor_layer.js index 280c6047..984f1f78 100644 --- a/plugins/c9.ide.collab/cursor_layer.js +++ b/plugins/c9.ide.collab/cursor_layer.js @@ -1,14 +1,15 @@ /*global define console document apf */ define(function(require, module, exports) { main.consumes = ["Plugin", "ace", "settings", "tabManager", - "collab.util", "collab.workspace", "timeslider"]; + "collab.util", "collab.workspace", "timeslider", "ui"]; main.provides = ["CursorLayer"]; return main; function main(options, imports, register) { - var Plugin = imports.Plugin; var settings = imports.settings; + var Plugin = imports.Plugin; var ace = imports.ace; + var ui = imports.ui; var tabs = imports.tabManager; var util = imports["collab.util"]; var workspace = imports["collab.workspace"]; @@ -254,22 +255,15 @@ define(function(require, module, exports) { } function drawTooltip(selection, fullname) { - var node = document.createElement("div"); - document.body.appendChild(node); + var html = ui.buildDom([ + ["div", { class: "cool_tooltip_cursor", style: "display:none" }, + ["span", { class: "cool_tooltip_cursor_caption" }, fullname] + ], + ["div", { class: "cool_tooltip_cursor_arrow", style: "display:none" }] + ], document.body); - node.className = "cool_tooltip_cursor"; - node.innerHTML = "" + util.escapeHTML(fullname) + ""; - - // create the arrow - var arrow = document.createElement("div"); - document.body.appendChild(arrow); - arrow.className = "cool_tooltip_cursor_arrow"; - - arrow.style.display = "none"; - node.style.display = "none"; - - selection.tooltip = node; - selection.arrow = arrow; + selection.tooltip = html[0]; + selection.arrow = html[1]; } function showTooltip(selection, user, coords) { diff --git a/plugins/c9.ide.ui/lib_apf.js b/plugins/c9.ide.ui/lib_apf.js index d69fd99a..b0f332a2 100644 --- a/plugins/c9.ide.ui/lib_apf.js +++ b/plugins/c9.ide.ui/lib_apf.js @@ -583,7 +583,47 @@ document.documentElement.className += " has_apf"; apf.browserDetect(); - +apf.buildDom = function buildDom(arr, parent) { + if (typeof arr == "string") { + var txt = document.createTextNode(arr); + if (parent) + parent.appendChild(txt); + return txt; + } + + if (!Array.isArray(arr)) + return arr; + if (typeof arr[0] == "object") { + var els = []; + for (var i = 0; i < arr.length; i++) { + var ch = buildDom(arr[i]); + els.push(ch); + if (parent) + parent.appendChild(ch); + } + return els; + } + + var el = document.createElement(arr[0]); + var options = arr[1]; + if (options) { + Object.keys(options).forEach(function(n) { + var val = options[n]; + if (n == "class") { + el.className = Array.isArray(val) ? val.join(" ") : val; + } + else if (typeof val == "function") + el[n] = val; + else + el.setAttribute(n, val); + }); + } + for (var i = 2; i < arr.length; i++) + buildDom(arr[i], el); + if (parent) + parent.appendChild(el); + return el; +}; diff --git a/plugins/c9.ide.ui/ui.js b/plugins/c9.ide.ui/ui.js index a5784d3f..97d0488c 100644 --- a/plugins/c9.ide.ui/ui.js +++ b/plugins/c9.ide.ui/ui.js @@ -573,6 +573,10 @@ define(function(require, module, exports) { */ insertByIndex: insertByIndex, + /** + * + */ + buildDom: apf.buildDom, /** * Escapes "&", greater than, less than signs, quotation marks,