From 91f54ce83c94d6182590f128f82bbd54e23d4f3a Mon Sep 17 00:00:00 2001 From: Mert Torun Date: Tue, 22 Nov 2011 18:04:50 +0200 Subject: [PATCH 1/5] Fixed Tanglekit TKIf andTKSwitch classes' element display behavior When TKIf and TKSwitch would hide and show elements, they put the 'display: none' property on them but reverted to 'display: inline' regardless of what the element was. Now it just removes the element style property so that the element reverts to its natural display state rather than being forced into 'inline' --- TangleKit/TangleKit.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/TangleKit/TangleKit.js b/TangleKit/TangleKit.js index 5fd2fa5..17297e1 100644 --- a/TangleKit/TangleKit.js +++ b/TangleKit/TangleKit.js @@ -25,8 +25,9 @@ Tangle.classes.TKIf = { }, update: function (element, value) { - if (this.isInverted) { value = !value; } - element.style.display = !value ? "none" : "inline"; // todo, block or inline? + if (this.isInverted) { value = !value; }; + if (value) { element.style.removeProperty('display'); } + else { element.style.display = "none" }; } }; @@ -43,7 +44,8 @@ Tangle.classes.TKSwitch = { update: function (element, value) { element.getChildren().each( function (child, index) { - child.style.display = (index != value) ? "none" : "inline"; + if (index != value) { child.style.display = 'none'; } + else { child.style.removeProperty('display'); } }); } }; From aa671d3a9e3fd0440cfc68cf5732ee19b0b121eb Mon Sep 17 00:00:00 2001 From: Bret Victor Date: Thu, 24 Nov 2011 12:24:40 +0800 Subject: [PATCH 2/5] TangleKit: TKIf and TKSwitch work both both inline and block elements (thanks Mert Torun) --- TangleKit/TangleKit.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/TangleKit/TangleKit.js b/TangleKit/TangleKit.js index 5fd2fa5..ca5dd12 100644 --- a/TangleKit/TangleKit.js +++ b/TangleKit/TangleKit.js @@ -26,7 +26,8 @@ Tangle.classes.TKIf = { update: function (element, value) { if (this.isInverted) { value = !value; } - element.style.display = !value ? "none" : "inline"; // todo, block or inline? + if (value) { element.style.removeProperty("display"); } + else { element.style.display = "none" }; } }; @@ -43,7 +44,8 @@ Tangle.classes.TKSwitch = { update: function (element, value) { element.getChildren().each( function (child, index) { - child.style.display = (index != value) ? "none" : "inline"; + if (index != value) { child.style.display = "none"; } + else { child.style.removeProperty("display"); } }); } }; From a6802954d22bfb2b055a4d3e94e52e5e827f5547 Mon Sep 17 00:00:00 2001 From: Mert Torun Date: Thu, 8 Dec 2011 03:21:24 +0200 Subject: [PATCH 3/5] TangleKit AdjustableNumber help attribute There is now a data-help attribute on TKAdjustableNumber used to change the text that appears above the value on hover. --- TangleKit/TangleKit.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/TangleKit/TangleKit.js b/TangleKit/TangleKit.js index 17297e1..5ae2ae8 100644 --- a/TangleKit/TangleKit.js +++ b/TangleKit/TangleKit.js @@ -131,6 +131,7 @@ Tangle.classes.TKNumberField = { // Attributes: data-min (optional): minimum value // data-max (optional): maximum value // data-step (optional): granularity of adjustment (can be fractional) +// data-help (optional): the help text that appears above the value. defaults to "« drag »" var isAnyAdjustableNumberDragging = false; // hack for dragging one value over another one @@ -144,6 +145,7 @@ Tangle.classes.TKAdjustableNumber = { this.min = (options.min !== undefined) ? parseFloat(options.min) : 0; this.max = (options.max !== undefined) ? parseFloat(options.max) : 1e100; this.step = (options.step !== undefined) ? parseFloat(options.step) : 1; + this.help = (options.help !== undefined) ? options.step : "« drag »"; this.initializeHover(); this.initializeHelp(); @@ -189,15 +191,19 @@ Tangle.classes.TKAdjustableNumber = { initializeHelp: function () { this.helpElement = (new Element("div", { "class": "TKAdjustableNumberHelp" })).inject(this.element, "top"); this.helpElement.setStyle("display", "none"); - this.helpElement.set("text", "drag"); + this.helpElement.set("text", this.help); }, updateHelp: function () { - var size = this.element.getSize(); - var top = -size.y + 7; - var left = Math.round(0.5 * (size.x - 20)); - var display = (this.isHovering && !isAnyAdjustableNumberDragging) ? "block" : "none"; - this.helpElement.setStyles({ left:left, top:top, display:display }); + var show = (this.isHovering && !isAnyAdjustableNumberDragging) + if (show) { + this.helpElement.setStyle("display", "block"); + var top = - this.helpElement.getSize().y * 0.5; + var left = Math.round(0.5 * (this.element.getSize().x - this.helpElement.getSize().x)); + this.helpElement.setStyles({ left:left, top:top }); + } else { + this.helpElement.setStyle("display", "none"); + } }, From f093b4ad8cb7bd593aa00e3089900db3877be80a Mon Sep 17 00:00:00 2001 From: Mert Torun Date: Thu, 8 Dec 2011 03:23:09 +0200 Subject: [PATCH 4/5] made TKAdjustableNumber help text visible during dragging --- TangleKit/TangleKit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/TangleKit/TangleKit.js b/TangleKit/TangleKit.js index 5ae2ae8..44b0326 100644 --- a/TangleKit/TangleKit.js +++ b/TangleKit/TangleKit.js @@ -195,7 +195,7 @@ Tangle.classes.TKAdjustableNumber = { }, updateHelp: function () { - var show = (this.isHovering && !isAnyAdjustableNumberDragging) + var show = ((this.isHovering && !isAnyAdjustableNumberDragging) || this.isDragging) if (show) { this.helpElement.setStyle("display", "block"); var top = - this.helpElement.getSize().y * 0.5; From 2b13c4364d1193530f5409e463b6e0cbe62fc385 Mon Sep 17 00:00:00 2001 From: Mert Torun Date: Thu, 8 Dec 2011 03:25:41 +0200 Subject: [PATCH 5/5] CSS for TKAdjustableNumber help text on down state --- TangleKit/TangleKit.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/TangleKit/TangleKit.css b/TangleKit/TangleKit.css index 04639cf..8dd8d17 100644 --- a/TangleKit/TangleKit.css +++ b/TangleKit/TangleKit.css @@ -48,3 +48,6 @@ font: 9px "Helvetica-Neue", "Arial", sans-serif; } +.TKAdjustableNumberDown .TKAdjustableNumberHelp { + color: #f00; +}