3.0 source code
This commit is contained in:
agolybev
380
OfficeWeb/apps/common/main/lib/component/Slider.js
Normal file
380
OfficeWeb/apps/common/main/lib/component/Slider.js
Normal file
@@ -0,0 +1,380 @@
|
||||
/*
|
||||
* (c) Copyright Ascensio System SIA 2010-2015
|
||||
*
|
||||
* This program is a free software product. You can redistribute it and/or
|
||||
* modify it under the terms of the GNU Affero General Public License (AGPL)
|
||||
* version 3 as published by the Free Software Foundation. In accordance with
|
||||
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
|
||||
* that Ascensio System SIA expressly excludes the warranty of non-infringement
|
||||
* of any third-party rights.
|
||||
*
|
||||
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
|
||||
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
|
||||
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||
*
|
||||
* You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
|
||||
* EU, LV-1021.
|
||||
*
|
||||
* The interactive user interfaces in modified source and object code versions
|
||||
* of the Program must display Appropriate Legal Notices, as required under
|
||||
* Section 5 of the GNU AGPL version 3.
|
||||
*
|
||||
* Pursuant to Section 7(b) of the License you must retain the original Product
|
||||
* logo when distributing the program. Pursuant to Section 7(e) we decline to
|
||||
* grant you any rights under trademark law for use of our trademarks.
|
||||
*
|
||||
* All the Product's GUI elements, including illustrations and icon sets, as
|
||||
* well as technical writing content are licensed under the terms of the
|
||||
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
|
||||
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
*
|
||||
*/
|
||||
if (Common === undefined) {
|
||||
var Common = {};
|
||||
}
|
||||
define(["common/main/lib/component/BaseView", "underscore"], function (base, _) {
|
||||
Common.UI.SingleSlider = Common.UI.BaseView.extend({
|
||||
options: {
|
||||
width: 100,
|
||||
minValue: 0,
|
||||
maxValue: 100,
|
||||
step: 1,
|
||||
value: 100,
|
||||
enableKeyEvents: false
|
||||
},
|
||||
disabled: false,
|
||||
template: _.template(['<div class="slider single-slider" style="">', '<div class="track">', '<div class="track-left"></div>', '<div class="track-center""></div>', '<div class="track-right" style=""></div>', "</div>", '<div class="thumb" style=""></div>', "<% if (this.options.enableKeyEvents) { %>", '<input type="text" style="position: absolute; top:-10px; width: 1px; height: 1px;">', "<% } %>", "</div>"].join("")),
|
||||
initialize: function (options) {
|
||||
Common.UI.BaseView.prototype.initialize.call(this, options);
|
||||
var me = this,
|
||||
el = $(this.el);
|
||||
me.width = me.options.width;
|
||||
me.minValue = me.options.minValue;
|
||||
me.maxValue = me.options.maxValue;
|
||||
me.delta = 100 / (me.maxValue - me.minValue);
|
||||
me.step = me.options.step;
|
||||
if (me.options.el) {
|
||||
me.render();
|
||||
}
|
||||
this.setValue(me.options.value);
|
||||
},
|
||||
render: function (parentEl) {
|
||||
var me = this;
|
||||
if (!me.rendered) {
|
||||
this.cmpEl = $(this.template({}));
|
||||
if (parentEl) {
|
||||
this.setElement(parentEl, false);
|
||||
parentEl.html(this.cmpEl);
|
||||
} else {
|
||||
$(this.el).html(this.cmpEl);
|
||||
}
|
||||
} else {
|
||||
this.cmpEl = $(this.el);
|
||||
}
|
||||
this.cmpEl.find(".track-center").width(me.options.width - 14);
|
||||
this.cmpEl.width(me.options.width);
|
||||
this.thumb = this.cmpEl.find(".thumb");
|
||||
var onMouseUp = function (e) {
|
||||
if (me.disabled) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var pos = Math.max(0, Math.min(100, (Math.round((e.pageX - me.cmpEl.offset().left - me._dragstart) / me.width * 100))));
|
||||
me.setThumbPosition(pos);
|
||||
me.lastValue = me.value;
|
||||
me.value = pos / me.delta + me.minValue;
|
||||
me.thumb.removeClass("active");
|
||||
$(document).off("mouseup", onMouseUp);
|
||||
$(document).off("mousemove", onMouseMove);
|
||||
me._dragstart = undefined;
|
||||
me.trigger("changecomplete", me, me.value, me.lastValue);
|
||||
};
|
||||
var onMouseMove = function (e) {
|
||||
if (me.disabled) {
|
||||
return;
|
||||
}
|
||||
if (me._dragstart === undefined) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var pos = Math.max(0, Math.min(100, (Math.round((e.pageX - me.cmpEl.offset().left - me._dragstart) / me.width * 100))));
|
||||
me.setThumbPosition(pos);
|
||||
me.lastValue = me.value;
|
||||
me.value = pos / me.delta + me.minValue;
|
||||
if (Math.abs(me.value - me.lastValue) > 0.001) {
|
||||
me.trigger("change", me, me.value, me.lastValue);
|
||||
}
|
||||
};
|
||||
var onMouseDown = function (e) {
|
||||
if (me.disabled) {
|
||||
return;
|
||||
}
|
||||
me._dragstart = e.pageX - me.thumb.offset().left - 7;
|
||||
me.thumb.addClass("active");
|
||||
$(document).on("mouseup", onMouseUp);
|
||||
$(document).on("mousemove", onMouseMove);
|
||||
if (me.options.enableKeyEvents) {
|
||||
setTimeout(function () {
|
||||
me.input.focus();
|
||||
},
|
||||
10);
|
||||
}
|
||||
};
|
||||
var onTrackMouseDown = function (e) {
|
||||
if (me.disabled) {
|
||||
return;
|
||||
}
|
||||
var pos = Math.max(0, Math.min(100, (Math.round((e.pageX - me.cmpEl.offset().left) / me.width * 100))));
|
||||
me.setThumbPosition(pos);
|
||||
me.lastValue = me.value;
|
||||
me.value = pos / me.delta + me.minValue;
|
||||
me.trigger("change", me, me.value, me.lastValue);
|
||||
me.trigger("changecomplete", me, me.value, me.lastValue);
|
||||
};
|
||||
var updateslider;
|
||||
var moveThumb = function (increase) {
|
||||
me.lastValue = me.value;
|
||||
me.value = Math.max(me.minValue, Math.min(me.maxValue, me.value + ((increase) ? me.step : -me.step)));
|
||||
me.setThumbPosition(Math.round((me.value - me.minValue) * me.delta));
|
||||
me.trigger("change", me, me.value, me.lastValue);
|
||||
};
|
||||
var onKeyDown = function (e) {
|
||||
if (me.disabled) {
|
||||
return;
|
||||
}
|
||||
if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.LEFT || e.keyCode == Common.UI.Keys.RIGHT) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
el.off("keydown", "input", onKeyDown);
|
||||
updateslider = setInterval(_.bind(moveThumb, me, e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.RIGHT), 100);
|
||||
}
|
||||
};
|
||||
var onKeyUp = function (e) {
|
||||
if (me.disabled) {
|
||||
return;
|
||||
}
|
||||
if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN || Common.UI.Keys.LEFT || Common.UI.Keys.RIGHT) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
clearInterval(updateslider);
|
||||
moveThumb(e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.RIGHT);
|
||||
el.on("keydown", "input", onKeyDown);
|
||||
me.trigger("changecomplete", me, me.value, me.lastValue);
|
||||
}
|
||||
};
|
||||
if (!me.rendered) {
|
||||
var el = me.cmpEl;
|
||||
el.on("mousedown", ".thumb", onMouseDown);
|
||||
el.on("mousedown", ".track", onTrackMouseDown);
|
||||
if (this.options.enableKeyEvents) {
|
||||
el.on("keydown", "input", onKeyDown);
|
||||
el.on("keyup", "input", onKeyUp);
|
||||
}
|
||||
}
|
||||
me.rendered = true;
|
||||
return this;
|
||||
},
|
||||
setThumbPosition: function (x) {
|
||||
this.thumb.css({
|
||||
left: x + "%"
|
||||
});
|
||||
},
|
||||
setValue: function (value) {
|
||||
this.lastValue = this.value;
|
||||
this.value = Math.max(this.minValue, Math.min(this.maxValue, value));
|
||||
this.setThumbPosition(Math.round((value - this.minValue) * this.delta));
|
||||
},
|
||||
getValue: function () {
|
||||
return this.value;
|
||||
},
|
||||
setDisabled: function (disabled) {
|
||||
if (disabled !== this.disabled) {
|
||||
this.cmpEl.toggleClass("disabled", disabled);
|
||||
}
|
||||
this.disabled = disabled;
|
||||
}
|
||||
});
|
||||
Common.UI.MultiSlider = Common.UI.BaseView.extend({
|
||||
options: {
|
||||
width: 100,
|
||||
minValue: 0,
|
||||
maxValue: 100,
|
||||
values: [0, 100]
|
||||
},
|
||||
disabled: false,
|
||||
template: _.template(['<div class="slider multi-slider">', '<div class="track">', '<div class="track-left"></div>', '<div class="track-center""></div>', '<div class="track-right" style=""></div>', "</div>", "<% _.each(items, function(item) { %>", '<div class="thumb" style=""></div>', "<% }); %>", "</div>"].join("")),
|
||||
initialize: function (options) {
|
||||
Common.UI.BaseView.prototype.initialize.call(this, options);
|
||||
var me = this,
|
||||
el = $(this.el);
|
||||
me.width = me.options.width;
|
||||
me.minValue = me.options.minValue;
|
||||
me.maxValue = me.options.maxValue;
|
||||
me.delta = 100 / (me.maxValue - me.minValue);
|
||||
me.thumbs = [];
|
||||
if (me.options.el) {
|
||||
me.render();
|
||||
}
|
||||
},
|
||||
render: function (parentEl) {
|
||||
var me = this;
|
||||
if (!me.rendered) {
|
||||
this.cmpEl = $(this.template({
|
||||
items: this.options.values
|
||||
}));
|
||||
if (parentEl) {
|
||||
this.setElement(parentEl, false);
|
||||
parentEl.html(this.cmpEl);
|
||||
} else {
|
||||
$(this.el).html(this.cmpEl);
|
||||
}
|
||||
} else {
|
||||
this.cmpEl = $(this.el);
|
||||
}
|
||||
var el = this.cmpEl;
|
||||
el.find(".track-center").width(me.options.width - 14);
|
||||
el.width(me.options.width);
|
||||
var onMouseUp = function (e) {
|
||||
if (me.disabled) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var index = e.data,
|
||||
lastValue = me.thumbs[index].value,
|
||||
minValue = (index - 1 < 0) ? 0 : me.thumbs[index - 1].position,
|
||||
maxValue = (index + 1 < me.thumbs.length) ? me.thumbs[index + 1].position : 100,
|
||||
pos = Math.max(minValue, Math.min(maxValue, (Math.round((e.pageX - me.cmpEl.offset().left - me._dragstart) / me.width * 100)))),
|
||||
value = pos / me.delta + me.minValue;
|
||||
me.setThumbPosition(index, pos);
|
||||
me.thumbs[index].value = value;
|
||||
$(document).off("mouseup", onMouseUp);
|
||||
$(document).off("mousemove", onMouseMove);
|
||||
me._dragstart = undefined;
|
||||
me.trigger("changecomplete", me, value, lastValue);
|
||||
};
|
||||
var onMouseMove = function (e) {
|
||||
if (me.disabled) {
|
||||
return;
|
||||
}
|
||||
if (me._dragstart === undefined) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var index = e.data,
|
||||
lastValue = me.thumbs[index].value,
|
||||
minValue = (index - 1 < 0) ? 0 : me.thumbs[index - 1].position,
|
||||
maxValue = (index + 1 < me.thumbs.length) ? me.thumbs[index + 1].position : 100,
|
||||
pos = Math.max(minValue, Math.min(maxValue, (Math.round((e.pageX - me.cmpEl.offset().left - me._dragstart) / me.width * 100)))),
|
||||
value = pos / me.delta + me.minValue;
|
||||
me.setThumbPosition(index, pos);
|
||||
me.thumbs[index].value = value;
|
||||
if (Math.abs(value - lastValue) > 0.001) {
|
||||
me.trigger("change", me, value, lastValue);
|
||||
}
|
||||
};
|
||||
var onMouseDown = function (e) {
|
||||
if (me.disabled) {
|
||||
return;
|
||||
}
|
||||
var index = e.data,
|
||||
thumb = me.thumbs[index].thumb;
|
||||
me._dragstart = e.pageX - thumb.offset().left - thumb.width() / 2;
|
||||
me.setActiveThumb(index);
|
||||
_.each(me.thumbs, function (item, idx) {
|
||||
(index == idx) ? item.thumb.css("z-index", 500) : item.thumb.css("z-index", "");
|
||||
});
|
||||
$(document).on("mouseup", null, index, onMouseUp);
|
||||
$(document).on("mousemove", null, index, onMouseMove);
|
||||
};
|
||||
var onTrackMouseDown = function (e) {
|
||||
if (me.disabled) {
|
||||
return;
|
||||
}
|
||||
var pos = Math.max(0, Math.min(100, (Math.round((e.pageX - me.cmpEl.offset().left) / me.width * 100)))),
|
||||
index = findThumb(pos),
|
||||
lastValue = me.thumbs[index].value,
|
||||
value = pos / me.delta + me.minValue;
|
||||
me.setThumbPosition(index, pos);
|
||||
me.thumbs[index].value = value;
|
||||
me.trigger("change", me, value, lastValue);
|
||||
me.trigger("changecomplete", me, value, lastValue);
|
||||
};
|
||||
var findThumb = function (pos) {
|
||||
var nearest = 100,
|
||||
index = 0,
|
||||
len = me.thumbs.length,
|
||||
dist;
|
||||
for (var i = 0; i < len; i++) {
|
||||
dist = Math.abs(me.thumbs[i].position - pos);
|
||||
if (Math.abs(dist <= nearest)) {
|
||||
var above = me.thumbs[i + 1];
|
||||
var below = me.thumbs[i - 1];
|
||||
if (below !== undefined && pos < below.position) {
|
||||
continue;
|
||||
}
|
||||
if (above !== undefined && pos > above.position) {
|
||||
continue;
|
||||
}
|
||||
index = i;
|
||||
nearest = dist;
|
||||
}
|
||||
}
|
||||
return index;
|
||||
};
|
||||
this.$thumbs = el.find(".thumb");
|
||||
_.each(this.$thumbs, function (item, index) {
|
||||
var thumb = $(item);
|
||||
me.thumbs.push({
|
||||
thumb: thumb,
|
||||
index: index
|
||||
});
|
||||
me.setValue(index, me.options.values[index]);
|
||||
thumb.on("mousedown", null, index, onMouseDown);
|
||||
});
|
||||
me.setActiveThumb(0, true);
|
||||
if (!me.rendered) {
|
||||
el.on("mousedown", ".track", onTrackMouseDown);
|
||||
}
|
||||
me.rendered = true;
|
||||
return this;
|
||||
},
|
||||
setActiveThumb: function (index, suspend) {
|
||||
this.currentThumb = index;
|
||||
this.$thumbs.removeClass("active");
|
||||
this.thumbs[index].thumb.addClass("active");
|
||||
if (suspend !== true) {
|
||||
this.trigger("thumbclick", this, index);
|
||||
}
|
||||
},
|
||||
setThumbPosition: function (index, x) {
|
||||
this.thumbs[index].position = x;
|
||||
this.thumbs[index].thumb.css({
|
||||
left: x + "%"
|
||||
});
|
||||
},
|
||||
setValue: function (index, value) {
|
||||
this.thumbs[index].value = Math.max(this.minValue, Math.min(this.maxValue, value));
|
||||
this.setThumbPosition(index, Math.round((value - this.minValue) * this.delta));
|
||||
},
|
||||
getValue: function (index) {
|
||||
return this.thumbs[index].value;
|
||||
},
|
||||
getValues: function () {
|
||||
var values = [];
|
||||
_.each(this.thumbs, function (thumb) {
|
||||
values.push(thumb.value);
|
||||
});
|
||||
return values;
|
||||
},
|
||||
setDisabled: function (disabled) {
|
||||
if (disabled !== this.disabled) {
|
||||
this.cmpEl.toggleClass("disabled", disabled);
|
||||
}
|
||||
this.disabled = disabled;
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user