From 1fb24792826d164d243b0e8834376e90022bf536 Mon Sep 17 00:00:00 2001 From: Jason Thompson Date: Sat, 6 Apr 2013 10:37:49 -0400 Subject: [PATCH] Added TKSelect. Like TKToggle, but works with a selectable list child element values of any length. ... Add: TKSelect to TangleKit.js Add: .TKSelect class to TangleKit.css ... --- TangleKit/TangleKit.css | 8 +++++- TangleKit/TangleKit.js | 64 +++++++++++++++++++++++++++-------------- 2 files changed, 50 insertions(+), 22 deletions(-) diff --git a/TangleKit/TangleKit.css b/TangleKit/TangleKit.css index 04639cf..d3ab6c3 100644 --- a/TangleKit/TangleKit.css +++ b/TangleKit/TangleKit.css @@ -25,6 +25,13 @@ cursor: pointer; } +/* TKSelect */ + +.TKSelect { + color: #46f; + border-bottom: 1px dashed #46f; + cursor: pointer; +} /* TKAdjustableNumber */ @@ -47,4 +54,3 @@ color: #00f; font: 9px "Helvetica-Neue", "Arial", sans-serif; } - diff --git a/TangleKit/TangleKit.js b/TangleKit/TangleKit.js index ca5dd12..648a435 100644 --- a/TangleKit/TangleKit.js +++ b/TangleKit/TangleKit.js @@ -19,14 +19,14 @@ // Attributes: data-invert (optional): show if false instead. Tangle.classes.TKIf = { - + initialize: function (element, options, tangle, variable) { this.isInverted = !!options.invert; }, - + update: function (element, value) { if (this.isInverted) { value = !value; } - if (value) { element.style.removeProperty("display"); } + if (value) { element.style.removeProperty("display"); } else { element.style.display = "none" }; } }; @@ -44,7 +44,7 @@ Tangle.classes.TKSwitch = { update: function (element, value) { element.getChildren().each( function (child, index) { - if (index != value) { child.style.display = "none"; } + if (index != value) { child.style.display = "none"; } else { child.style.removeProperty("display"); } }); } @@ -65,6 +65,29 @@ Tangle.classes.TKSwitchPositiveNegative = { } }; +//---------------------------------------------------------- +// +// TKSelect +// +// Click to switch between a list a given list of child element +// values. Works like TKToggle, but takes a list of child element +// values of any length. + +Tangle.classes.TKSelect = { + + initialize: function (element, options, tangle, variable) { + element.addEvent("click", function (event) { + var selections = element.getChildren(); + var isActive = tangle.getValue(variable); + if(isActive < selections.length -1){ + tangle.setValue(variable, isActive + 1); + } else { + tangle.setValue(variable, 0); + } + + }); + } +}; //---------------------------------------------------------- // @@ -99,22 +122,22 @@ Tangle.classes.TKNumberField = { "class":"TKNumberFieldInput", size: options.size || 6 }).inject(element, "top"); - + var inputChanged = (function () { var value = this.getValue(); tangle.setValue(variable, value); }).bind(this); - + this.input.addEvent("keyup", inputChanged); this.input.addEvent("blur", inputChanged); this.input.addEvent("change", inputChanged); }, - + getValue: function () { var value = parseFloat(this.input.get("value")); return isNaN(value) ? 0 : value; }, - + update: function (element, value) { var currentValue = this.getValue(); if (value !== currentValue) { this.input.set("value", "" + value); } @@ -144,7 +167,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.initializeHover(); this.initializeHelp(); this.initializeDrag(); @@ -152,19 +175,19 @@ Tangle.classes.TKAdjustableNumber = { // hover - + initializeHover: function () { this.isHovering = false; this.element.addEvent("mouseenter", (function () { this.isHovering = true; this.updateRolloverEffects(); }).bind(this)); this.element.addEvent("mouseleave", (function () { this.isHovering = false; this.updateRolloverEffects(); }).bind(this)); }, - + updateRolloverEffects: function () { this.updateStyle(); this.updateCursor(); this.updateHelp(); }, - + isActive: function () { return this.isDragging || (this.isHovering && !isAnyAdjustableNumberDragging); }, @@ -172,7 +195,7 @@ Tangle.classes.TKAdjustableNumber = { updateStyle: function () { if (this.isDragging) { this.element.addClass("TKAdjustableNumberDown"); } else { this.element.removeClass("TKAdjustableNumberDown"); } - + if (!this.isDragging && this.isActive()) { this.element.addClass("TKAdjustableNumberHover"); } else { this.element.removeClass("TKAdjustableNumberHover"); } }, @@ -191,7 +214,7 @@ Tangle.classes.TKAdjustableNumber = { this.helpElement.setStyle("display", "none"); this.helpElement.set("text", "drag"); }, - + updateHelp: function () { var size = this.element.getSize(); var top = -size.y + 7; @@ -202,12 +225,12 @@ Tangle.classes.TKAdjustableNumber = { // drag - + initializeDrag: function () { this.isDragging = false; new BVTouchable(this.element, this); }, - + touchDidGoDown: function (touches) { this.valueAtMouseDown = this.tangle.getValue(this.variable); this.isDragging = true; @@ -215,14 +238,14 @@ Tangle.classes.TKAdjustableNumber = { this.updateRolloverEffects(); this.updateStyle(); }, - + touchDidMove: function (touches) { var value = this.valueAtMouseDown + touches.translation.x / 5 * this.step; value = ((value / this.step).round() * this.step).limit(this.min, this.max); this.tangle.setValue(this.variable, value); this.updateHelp(); }, - + touchDidGoUp: function (touches) { this.isDragging = false; isAnyAdjustableNumberDragging = false; @@ -273,7 +296,7 @@ Tangle.formats.abs_e6 = function (value) { Tangle.formats.freq = function (value) { if (value < 100) { return "" + value.round(1) + " Hz"; } if (value < 1000) { return "" + value.round(0) + " Hz"; } - return "" + (value / 1000).round(2) + " KHz"; + return "" + (value / 1000).round(2) + " KHz"; }; Tangle.formats.dollars = function (value) { @@ -289,8 +312,7 @@ Tangle.formats.percent = function (value) { }; - + //---------------------------------------------------------- })(); -