/*
* This file is part of Toolkit.
*
* Toolkit is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public
* License as published by the Free Software Foundation; either
* version 3 of the License, or (at your option) any later version.
*
* Toolkit is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU General
* Public License along with this program; if not, write to the
* Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
* Boston, MA 02110-1301 USA
*/
"use strict";
(function(w, TK) {
function get_base(O) {
return Math.max(Math.min(O.max, O.base), O.min);
}
function vert(O) {
return O.layout === "left" || O.layout === "right";
}
function fill_interval(range, levels, i, from, to, min_gap, result) {
var level = levels[i];
var x, j, pos, last_pos, last;
var diff;
var to_pos = range.val2px(to);
last_pos = range.val2px(from);
if (Math.abs(to_pos - last_pos) < min_gap) return;
if (!result) result = {
values: [],
positions: [],
};
var values = result.values;
var positions = result.positions;
if (from > to) level = -level;
last = from;
for (j = ((to-from)/level)|0, x = from + level; j > 0; x += level, j--) {
pos = range.val2px(x);
diff = Math.abs(last_pos - pos);
if (Math.abs(to_pos - pos) < min_gap) break;
if (diff >= min_gap) {
if (i > 0 && diff >= min_gap * 2) {
// we have a chance to fit some more labels in
fill_interval(range, levels, i-1,
last, x, min_gap, result);
}
values.push(x);
positions.push(pos);
last_pos = pos;
last = x;
}
}
if (i > 0 && Math.abs(last_pos - to_pos) >= min_gap * 2) {
fill_interval(range, levels, i-1, last, to, min_gap, result);
}
return result;
}
// remove collisions from a with b given a minimum gap
function remove_collisions(a, b, min_gap, vert) {
var pa = a.positions, pb = b.positions;
var va = a.values;
var dim;
min_gap = +min_gap;
if (typeof vert === "boolean")
dim = vert ? b.height : b.width;
if (!(min_gap > 0)) min_gap = 1;
if (!pb.length) return a;
var i, j;
var values = [];
var positions = [];
var pos_a, pos_b;
var size;
var last_pos = +pb[0],
last_size = min_gap;
if (dim) last_size += +dim[0] / 2;
// If pb is just length 1, it does not matter
var direction = pb.length > 1 && pb[1] < last_pos ? -1 : 1;
for (i = 0, j = 0; i < pa.length && j < pb.length;) {
pos_a = +pa[i];
pos_b = +pb[j];
size = min_gap;
if (dim) size += dim[j] / 2;
if (Math.abs(pos_a - last_pos) < last_size ||
Math.abs(pos_a - pos_b) < size) {
// try next position
i++;
continue;
}
if (j < pb.length - 1 && (pos_a - pos_b)*direction > 0) {
// we left the current interval, lets try the next one
last_pos = pos_b;
last_size = size;
j++;
continue;
}
values.push(+va[i]);
positions.push(pos_a);
i++;
}
return {
values: values,
positions: positions,
};
}
function create_dom_nodes(data, create) {
var nodes = [];
var values, positions;
var i;
var E = this.element;
var node;
data.nodes = nodes;
values = data.values;
positions = data.positions;
for (i = 0; i < values.length; i++) {
nodes.push(node = create(values[i], positions[i]));
E.appendChild(node);
}
}
function create_label(value, position) {
var O = this.options;
var elem = document.createElement("SPAN");
elem.className = "toolkit-label";
if (vert(O)) {
elem.style.bottom = position.toFixed(1) + "px";
} else {
elem.style.left = position.toFixed(1) + "px";
}
TK.set_content(elem, O.labels(value));
if (get_base(O) === value)
TK.add_class(elem, "toolkit-base");
if (O.max === value)
TK.add_class(elem, "toolkit-max");
if (O.min === value)
TK.add_class(elem, "toolkit-min");
return elem;
}
function create_dot(value, position) {
var O = this.options;
var elem = document.createElement("DIV");
elem.className = "toolkit-dot";
if (O.layout === "left" || O.layout === "right") {
elem.style.bottom = Math.round(position + 0.5) + "px";
} else {
elem.style.left = Math.round(position - 0.5) + "px";
}
if (get_base(O) === value)
TK.add_class(elem, "toolkit-base");
else if (O.max === value)
TK.add_class(elem, "toolkit-max");
else if (O.min === value)
TK.add_class(elem, "toolkit-min");
return elem;
}
function measure_dimensions(data) {
var nodes = data.nodes;
var width = [];
var height = [];
for (var i = 0; i < nodes.length; i++) {
width.push(TK.outer_width(nodes[i]));
height.push(TK.outer_height(nodes[i]));
}
data.width = width;
data.height = height;
}
function handle_end(O, labels, i) {
var node = labels.nodes[i];
var v = labels.values[i];
if (v === O.min) {
TK.add_class(node, "toolkit-min");
} else if (v === O.max) {
TK.add_class(node, "toolkit-max");
} else return;
}
function generate_scale(from, to, include_from, show_to) {
var O = this.options;
var labels;
if (O.show_labels || O.show_markers)
labels = {
values: [],
positions: [],
};
var dots = {
values: [],
positions: [],
};
var is_vert = vert(O);
var tmp;
if (include_from) {
tmp = this.val2px(from);
if (labels) {
labels.values.push(from);
labels.positions.push(tmp);
}
dots.values.push(from);
dots.positions.push(tmp);
}
var levels = O.levels;
fill_interval(this, levels, levels.length - 1, from, to, O.gap_dots, dots);
if (labels) {
if (O.levels_labels) levels = O.levels_labels;
fill_interval(this, levels, levels.length - 1, from, to, O.gap_labels, labels);
tmp = this.val2px(to);
if (show_to || Math.abs(tmp - this.val2px(from)) >= O.gap_labels) {
labels.values.push(to);
labels.positions.push(tmp);
dots.values.push(to);
dots.positions.push(tmp);
}
} else {
dots.values.push(to);
dots.positions.push(this.val2px(to));
}
if (O.show_labels) {
create_dom_nodes.call(this, labels, create_label.bind(this));
if (labels.values.length && labels.values[0] === get_base(O)) {
TK.add_class(labels.nodes[0], "toolkit-base");
}
}
var render_cb = function() {
var markers;
if (O.show_markers) {
markers = {
values: labels.values,
positions: labels.positions,
};
create_dom_nodes.call(this, markers, create_dot.bind(this));
for (var i = 0; i < markers.nodes.length; i++)
TK.add_class(markers.nodes[i], "toolkit-marker");
}
if (O.show_labels && labels.values.length > 1) {
handle_end(O, labels, 0);
handle_end(O, labels, labels.nodes.length-1);
}
if (O.avoid_collisions && O.show_labels) {
dots = remove_collisions(dots, labels, O.gap_dots, is_vert);
} else if (markers) {
dots = remove_collisions(dots, markers, O.gap_dots);
}
create_dom_nodes.call(this, dots, create_dot.bind(this));
};
if (O.show_labels && O.avoid_collisions)
TK.S.add(function() {
measure_dimensions(labels);
TK.S.add(render_cb.bind(this), 3);
}.bind(this), 2);
else render_cb.call(this);
}
function mark_markers(labels, dots) {
var i, j;
var a = labels.values;
var b = dots.values;
var nodes = dots.nodes;
for (i = j = 0; i < a.length && j < b.length;) {
if (a[i] < b[j]) i++;
else if (a[i] > b[j]) j++;
else {
TK.add_class(nodes[j], "toolkit-marker");
i++;
j++;
}
}
}
/**
* TK.Scale can be used to draw scales. It is used in {@link TK.MeterBase} and
* {@link TK.Fader}. TK.Scale draws labels and markers based on its parameters
* and the available space. Scales can be drawn both vertically and horizontally.
* Scale mixes in {@link TK.Ranged} and inherits all its options.
*
* @extends TK.Widget
*
* @mixes TK.Ranged
*
* @class TK.Scale
*
* @param {Object} [options={ }] - An object containing initial options.
*
* @property {String} [options.layout="right"] - The layout of the TK.Scale. <code>right</code> and
* <code>left</code> are vertical layouts with the labels being drawn right and left of the scale,
* respectively. <code>top</code> and <code>bottom</code> are horizontal layouts for which the
* labels are drawn on top and below the scale, respectively.
* @property {Integer} [options.division=1] - Minimal step size of the markers.
* @property {Array<Number>} [options.levels=[1]] - Array of steps for labels and markers.
* @property {Number} [options.base=false]] - Base of the scale. If set to <code>false</code> it will
* default to the minimum value.
* @property {Function} [options.labels=TK.FORMAT("%.2f")] - Formatting function for the labels.
* @property {Integer} [options.gap_dots=4] - Minimum gap in pixels between two adjacent markers.
* @property {Integer} [options.gap_labels=40] - Minimum gap in pixels between two adjacent labels.
* @property {Boolean} [options.show_labels=true] - If <code>true</code>, labels are drawn.
* @property {Boolean} [options.show_max=true] - If <code>true</code>, display a label and a
* dot for the 'max' value.
* @property {Boolean} [options.show_min=true] - If <code>true</code>, display a label and a
* dot for the 'min' value.
* @property {Boolean} [options.show_base=true] - If <code>true</code>, display a label and a
* dot for the 'base' value.
* @property {Array<Number>|Boolean} [options.fixed_dots] - This option can be used to specify fixed positions
* for the markers to be drawn at. The values must be sorted in ascending order. <code>false</code> disables
* fixed markers.
* @property {Array<Number>|Boolean} [options.fixed_labels] - This option can be used to specify fixed positions
* for the labels to be drawn at. The values must be sorted in ascending order. <code>false</code> disables
* fixed labels.
* @property {Boolean} [options.show_markers=true] - If true, every dot which is located at the same
* position as a label has the <code>toolkit-marker</code> class set.
* @property {Number|Boolean} [options.pointer=false] - The value to set the pointers position to. Set to `false` to hide the pointer.
* @property {Number|Boolean} [options.bar=false] - The value to set the bars height to. Set to `false` to hide the bar.
*/
TK.Scale = TK.class({
_class: "Scale",
Extends: TK.Widget,
Implements: [TK.Ranged],
_options: Object.assign(Object.create(TK.Widget.prototype._options), TK.Ranged.prototype._options, {
layout: "string",
division: "number",
levels: "array",
levels_labels: "array",
base: "number",
labels: "function",
gap_dots: "number",
gap_labels: "number",
show_labels: "boolean",
show_min: "boolean",
show_max: "boolean",
show_base: "boolean",
fixed_dots: "boolean|array",
fixed_labels: "boolean|array",
avoid_collisions: "boolean",
show_markers: "boolean",
bar: "boolean|number",
pointer: "boolean|number",
}),
options: {
layout: "right",
division: 1,
levels: [1],
base: false,
labels: TK.FORMAT("%.2f"),
avoid_collisions: false,
gap_dots: 4,
gap_labels: 40,
show_labels: true,
show_min: true,
show_max: true,
show_base: true,
show_markers: true,
fixed_dots: false,
fixed_labels: false,
bar: false,
pointer: false,
},
initialize: function (options) {
var E;
TK.Widget.prototype.initialize.call(this, options);
/**
* @member {HTMLDivElement} TK.Scale#element - The main DIV element. Has class <code>toolkit-scale</code>
*/
if (!(E = this.element)) this.element = E = TK.element("div");
TK.add_class(E, "toolkit-scale");
this.element = this.widgetize(E, true, true, true);
},
redraw: function () {
TK.Widget.prototype.redraw.call(this);
var I = this.invalid;
var O = this.options;
var E = this.element;
if (I.layout) {
I.layout = false;
TK.remove_class(E, "toolkit-vertical", "toolkit-horizontal", "toolkit-top",
"toolkit-bottom", "toolkit-right", "toolkit-left");
switch (O.layout) {
case "left":
TK.add_class(E, "toolkit-vertical", "toolkit-left");
break;
case "right":
TK.add_class(E, "toolkit-vertical", "toolkit-right");
break;
case "top":
TK.add_class(E, "toolkit-horizontal", "toolkit-top");
break;
case "bottom":
TK.add_class(E, "toolkit-horizontal", "toolkit-bottom");
break;
default:
TK.warn("Unsupported layout setting:", O.layout);
}
}
if (I.reverse) {
/* NOTE: reverse will be validated below */
TK.toggle_class(E, "toolkit-reverse", O.reverse);
}
if (I.validate("base", "show_base", "gap_labels", "min", "show_min", "division", "max", "show_markers",
"fixed_dots", "fixed_labels", "levels", "basis", "scale", "reverse", "show_labels")) {
TK.empty(E);
if (O.fixed_dots && O.fixed_labels) {
var labels;
if (O.show_labels) {
labels = {
values: O.fixed_labels,
positions: O.fixed_labels.map(this.val2px, this),
};
create_dom_nodes.call(this, labels, create_label.bind(this));
}
var dots = {
values: O.fixed_dots,
positions: O.fixed_dots.map(this.val2px, this),
};
create_dom_nodes.call(this, dots, create_dot.bind(this));
if (O.show_markers && labels) {
mark_markers(labels, dots);
}
} else {
var base = get_base(O);
if (base !== O.max) generate_scale.call(this, base, O.max, true, O.show_max);
if (base !== O.min) generate_scale.call(this, base, O.min, base === O.max, O.show_min);
}
if (this._bar)
this.element.appendChild(this._bar);
if (this._pointer)
this.element.appendChild(this._pointer);
}
},
resize: function () {
TK.Widget.prototype.resize.call(this);
var O = this.options;
this.set("basis", vert(O) ? TK.inner_height(this.element)
: TK.inner_width(this.element) );
},
// GETTER & SETTER
set: function (key, value) {
TK.Widget.prototype.set.call(this, key, value);
switch (key) {
case "division":
case "levels":
case "labels":
case "gap_dots":
case "gap_labels":
case "show_labels":
/**
* Gets fired when an option the rendering depends on was changed
*
* @event TK.Scale#scalechanged
*
* @param {string} key - The name of the option which changed the {@link TK.Scale}.
* @param {mixed} value - The value of the option.
*/
this.fire_event("scalechanged", key, value)
break;
}
}
});
/**
* @member {HTMLDivElement} TK.Fader#_pointer - The DIV element of the pointer. It can be used to e.g. visualize the value set in the backend.
*/
TK.ChildElement(TK.Scale, "pointer", {
show: false,
toggle_class: true,
option: "pointer",
draw_options: Object.keys(TK.Ranged.prototype._options).concat([ "pointer", "basis" ]),
draw: function(O) {
if (this._pointer) {
var tmp = this.val2px(this.snap(O.pointer)) + "px";
if (vert(O)) {
if (TK.supports_transform)
this._pointer.style.transform = "translateY(-"+tmp+")";
else
this._pointer.style.bottom = tmp;
} else {
if (TK.supports_transform)
this._pointer.style.transform = "translateX("+tmp+")";
else
this._pointer.style.left = tmp;
}
}
},
});
/**
* @member {HTMLDivElement} TK.Fader#_bar - The DIV element of the bar. It can be used to e.g. visualize the value set in the backend or to draw a simple levelmeter.
*/
TK.ChildElement(TK.Scale, "bar", {
show: false,
toggle_class: true,
option: "bar",
draw_options: Object.keys(TK.Ranged.prototype._options).concat([ "bar", "basis" ]),
draw: function(O) {
if (this._bar) {
var tmp = this.val2px(this.snap(O.bar)) + "px";
if (vert(O))
this._bar.style.height = tmp;
else
this._bar.style.width = tmp;
}
},
});
})(this, this.TK);