322 lines
10 KiB
JavaScript
322 lines
10 KiB
JavaScript
/* ===========================================================
|
|
* underOverSlider.js v0.0.1
|
|
* ===========================================================
|
|
* Copyright 2016 Prevu
|
|
* ========================================================== */
|
|
|
|
(function ($) {
|
|
|
|
"use strict"; // jshint ;_;
|
|
/* UnderOverSlider CLASS DEFINITION
|
|
* ====================== */
|
|
|
|
var UnderOverSlider = function (element, options) {
|
|
this.init(element, options);
|
|
};
|
|
|
|
UnderOverSlider.prototype = {
|
|
constructor: UnderOverSlider,
|
|
init: function (element, options) {
|
|
var plugin = this;
|
|
this.options = options;
|
|
this.$container = $(element);
|
|
this.$id = this.geneateControlId();
|
|
this.$displayValuePlaceholderid = this.$id + 'dispval';
|
|
this.$sliderPlaceholderId = this.$id + 'slider';
|
|
this.$lastValueSign = 0;
|
|
|
|
// Set init mode to prevent change events fire during controls initialization
|
|
this.$initMode = true;
|
|
|
|
var leftSectorLabel = this.options.leftSectorCaption && (this.options.leftSectorCaption.length > 0)
|
|
? this.options.leftSectorCaption : '';
|
|
var rightSectorLabel = this.options.rightSectorCaption && (this.options.rightSectorCaption.length > 0)
|
|
? this.options.rightSectorCaption : '';
|
|
|
|
var initialSliderDisplayValue = this.options.value && !isNaN(parseFloat(this.options.value))
|
|
? this.coefficientToDisplayValue(parseFloat(this.options.value)) : 0;
|
|
var maxSliderValue = this.options.maxPercent && !isNaN(parseInt(this.options.maxPercent))
|
|
? parseInt(this.options.maxPercent) : 100;
|
|
|
|
// Create inner html and init slider
|
|
var innerHtml = '';
|
|
|
|
if (this.options.controlCaption && (this.options.controlCaption.length > 0))
|
|
innerHtml += '<div><label class="control-label" style="margin-left: 8px; margin-bottom: 0px;">' + this.options.controlCaption + '</label></div>';
|
|
|
|
innerHtml = innerHtml +
|
|
'<table class="overUnder-widget-table">' +
|
|
'<tr>' +
|
|
'<td class="overUnder-widget-tbl-cell with-border"></td>' +
|
|
'<td class="overUnder-widget-tbl-cell hint-right" id="' + this.$displayValuePlaceholderid + '">100% higher cost on under allocation</td>' +
|
|
'</tr>' +
|
|
'<tr><td colspan="2"><div id="' + this.$sliderPlaceholderId + '"></div></td></tr>' +
|
|
'<tr>' +
|
|
'<td class="overUnder-widget-tbl-cell with-border hint-left">' + leftSectorLabel + '</td>' +
|
|
'<td class="overUnder-widget-tbl-cell hint-right">' + rightSectorLabel + '</td>' +
|
|
'</tr>' +
|
|
'</table>';
|
|
|
|
$(this.$container).html(innerHtml);
|
|
var sliderPlaceHolder = $(this.$container).find('#' + this.$sliderPlaceholderId);
|
|
$(sliderPlaceHolder).slider({
|
|
'range': 'min',
|
|
'min': -maxSliderValue,
|
|
'max': maxSliderValue,
|
|
'value': initialSliderDisplayValue,
|
|
change: function(event, ui) {
|
|
plugin.onSliderChanged(event, ui, plugin);
|
|
},
|
|
slide: function (event, ui) {
|
|
plugin.onSliderSlide(event, ui, plugin);
|
|
}
|
|
});
|
|
|
|
// Remember colors of the slider
|
|
this.$inactiveColor = getComputedStyle($(sliderPlaceHolder).get(0)).backgroundColor;
|
|
this.$activeColor = getComputedStyle($(sliderPlaceHolder).children('div').get(0)).backgroundColor;
|
|
|
|
// Set initial slider value
|
|
var eventParams = {
|
|
value: initialSliderDisplayValue
|
|
};
|
|
this.onSliderChanged(null, eventParams, plugin);
|
|
|
|
this.$initMode = false;
|
|
|
|
if (this.options.initCallback && (typeof this.options.initCallback === 'function')) {
|
|
this.options.initCallback(this);
|
|
}
|
|
},
|
|
geneateControlId: function () {
|
|
var result = "ouSl";
|
|
var variants = "abcdefghijklmnopqrstuvwxyz0123456789";
|
|
|
|
for (var i = 0; i < 20; i++)
|
|
result += variants.charAt(Math.floor(Math.random() * variants.length));
|
|
|
|
return result;
|
|
},
|
|
coefficientToDisplayValue: function (coefficient) {
|
|
if ((coefficient === undefined) || (coefficient === null))
|
|
return 0;
|
|
|
|
var result = 0;
|
|
var valAsFloat = parseFloat(coefficient);
|
|
|
|
if (isNaN(valAsFloat))
|
|
return result;
|
|
|
|
if (valAsFloat > 1) {
|
|
result = Math.round((valAsFloat - 1) * 100);
|
|
}
|
|
|
|
if (valAsFloat < 1) {
|
|
result = -Math.round((100 / valAsFloat - 100));
|
|
}
|
|
|
|
return result;
|
|
},
|
|
displayValueToCoefficient: function (displayValue) {
|
|
var result = 0;
|
|
|
|
if (displayValue > 0) {
|
|
result = 1 + displayValue / 100;
|
|
}
|
|
|
|
if (displayValue < 0) {
|
|
result = 1 / (1 - displayValue / 100);
|
|
}
|
|
|
|
return result;
|
|
},
|
|
onSliderChanged: function (event, ui, plugin) {
|
|
var value = parseInt(ui.value);
|
|
var coeffValue = plugin.displayValueToCoefficient(value);
|
|
|
|
var sliderLabel = plugin.getSliderText(value, plugin.options);
|
|
$(plugin.$container).find('#' + plugin.$displayValuePlaceholderid).html(sliderLabel);
|
|
|
|
// Coloring of the slider
|
|
plugin.setSliderColor(value, plugin);
|
|
|
|
if (coeffValue > 0)
|
|
plugin.$lastValueSign = 1;
|
|
|
|
if (coeffValue < 0)
|
|
plugin.$lastValueSign = -1;
|
|
|
|
if (coeffValue == 0)
|
|
plugin.$lastValueSign = 0;
|
|
|
|
if (plugin.options.relatedValueControl) {
|
|
$(plugin.options.relatedValueControl).val(coeffValue);
|
|
}
|
|
|
|
if (!plugin.$initMode) {
|
|
if (plugin.options.changedCallback && (typeof plugin.options.changedCallback === 'function')) {
|
|
plugin.options.changedCallback(this, coeffValue);
|
|
}
|
|
}
|
|
},
|
|
onSliderSlide: function (event, ui, plugin) {
|
|
var value = parseInt(ui.value);
|
|
var sliderLabel = plugin.getSliderText(value, plugin.options);
|
|
$(plugin.$container).find('#' + plugin.$displayValuePlaceholderid).html(sliderLabel);
|
|
|
|
// Coloring of the slider
|
|
plugin.setSliderColor(value, plugin);
|
|
},
|
|
setSliderColor: function(value, plugin) {
|
|
if ((value < 0) && ((plugin.$lastValueSign >= 0) || plugin.$initMode)) {
|
|
var sliderPlaceHolder = $(plugin.$container).find('#' + plugin.$sliderPlaceholderId);
|
|
$(sliderPlaceHolder).css("background-color", plugin.$inactiveColor);
|
|
$(sliderPlaceHolder).children('div').css("background-color", plugin.$activeColor);
|
|
plugin.$lastValueSign = -1;
|
|
return;
|
|
}
|
|
|
|
if ((value > 0) && ((plugin.$lastValueSign <= 0) || plugin.$initMode)) {
|
|
var sliderPlaceHolder = $(plugin.$container).find('#' + plugin.$sliderPlaceholderId);
|
|
$(sliderPlaceHolder).css("background-color", plugin.$activeColor);
|
|
$(sliderPlaceHolder).children('div').css("background-color", plugin.$inactiveColor);
|
|
plugin.$lastValueSign = 1;
|
|
return;
|
|
}
|
|
|
|
if ((value == 0) && ((plugin.$lastValueSign != 0) || plugin.$initMode)) {
|
|
var sliderPlaceHolder = $(plugin.$container).find('#' + plugin.$sliderPlaceholderId);
|
|
$(sliderPlaceHolder).css("background-color", plugin.$inactiveColor);
|
|
$(sliderPlaceHolder).children('div').css("background-color", plugin.$inactiveColor);
|
|
plugin.$lastValueSign = 0;
|
|
}
|
|
},
|
|
getSliderText: function (sliderValuePercent, opts) {
|
|
var result = "";
|
|
if (sliderValuePercent === undefined)
|
|
return;
|
|
|
|
if ((sliderValuePercent > 0) && opts.valueHints && opts.valueHints.aboveZero) {
|
|
result = opts.valueHints.aboveZero.replace("{0}", String(sliderValuePercent));
|
|
}
|
|
|
|
if ((sliderValuePercent < 0) && opts.valueHints && opts.valueHints.belowZero) {
|
|
var absValue = Math.abs(sliderValuePercent);
|
|
result = opts.valueHints.belowZero.replace("{0}", String(absValue));
|
|
}
|
|
|
|
if ((sliderValuePercent == 0) && opts.valueHints && opts.valueHints.equalToZero) {
|
|
result = opts.valueHints.equalToZero.replace("{0}", String(sliderValuePercent));
|
|
}
|
|
|
|
return result;
|
|
},
|
|
getValue: function () {
|
|
var exportData = [];
|
|
|
|
//for (var catIndex = 0; catIndex < this.$dataset.data.length; catIndex++) {
|
|
// var catItem = {
|
|
// Id: this.$dataset.data[catIndex].Id,
|
|
// Name: this.$dataset.data[catIndex].Name,
|
|
// InPlan: this.$dataset.data[catIndex].InPlan,
|
|
// Positions: null
|
|
// }
|
|
|
|
// if (this.$dataset.data[catIndex].Positions && (this.$dataset.data[catIndex].Positions.length > 0)) {
|
|
// catItem.Positions = [];
|
|
|
|
// for (var posIndex = 0; posIndex < this.$dataset.data[catIndex].Positions.length; posIndex++) {
|
|
// var posItem = {
|
|
// StartDate: this.$dataset.data[catIndex].Positions[posIndex].StartDate,
|
|
// EndDate: this.$dataset.data[catIndex].Positions[posIndex].EndDate,
|
|
// Need: this.$dataset.data[catIndex].Positions[posIndex].Need
|
|
// }
|
|
|
|
// catItem.Positions.push(posItem);
|
|
// }
|
|
|
|
// exportData.push(catItem);
|
|
// }
|
|
//}
|
|
|
|
return exportData;
|
|
},
|
|
setValue: function (coeffValue) {
|
|
this.$dataset.data = [];
|
|
|
|
//if (!incomingData || !incomingData.data || (incomingData.data.length < 1)) {
|
|
// return;
|
|
//}
|
|
|
|
//for (var catIndex = 0; catIndex < incomingData.data.length; catIndex++) {
|
|
// var currentCat = incomingData.data[catIndex];
|
|
|
|
// if (currentCat.Positions && (currentCat.Positions.length > 0) && this.categoryExists(currentCat.Id)) {
|
|
// var newCatItem = {
|
|
// Id: currentCat.Id,
|
|
// Name: currentCat.Name,
|
|
// InPlan: currentCat.InPlan,
|
|
// Positions: []
|
|
// };
|
|
|
|
// for (var posIndex = 0; posIndex < currentCat.Positions.length; posIndex++) {
|
|
// var currentPos = currentCat.Positions[posIndex];
|
|
|
|
// if (currentPos.Need && (currentPos.Need > 0))
|
|
// {
|
|
// var posItem = {
|
|
// StartDate: currentPos.StartDate,
|
|
// EndDate: currentPos.EndDate,
|
|
// Need: currentPos.Need,
|
|
// };
|
|
// newCatItem.Positions.push(posItem);
|
|
// }
|
|
// }
|
|
|
|
// this.$dataset.data.push(newCatItem);
|
|
// }
|
|
//}
|
|
|
|
this.renderTable();
|
|
},
|
|
destroy: function () {
|
|
var e = $.Event('destroy');
|
|
this.$container.trigger(e);
|
|
if (e.isDefaultPrevented()) return;
|
|
this.$container
|
|
.removeData('underOverSlider');
|
|
},
|
|
};
|
|
/* UNDER OVER COEFFICIENT PLUGIN DEFINITION
|
|
* ======================= */
|
|
|
|
$.fn.underOverSlider = function (option, args) {
|
|
return this.each(function () {
|
|
var $this = $(this),
|
|
data = $this.data('underOverSlider'),
|
|
options = $.extend({}, $.fn.underOverSlider.defaults, $this.data(), typeof option == 'object' && option);
|
|
|
|
if (!data) $this.data('underOverSlider', (data = new UnderOverSlider(this, options)));
|
|
if (typeof option == 'string')
|
|
data[option].apply(data, [].concat(args));
|
|
});
|
|
};
|
|
$.fn.underOverSlider.defaults = {
|
|
maxPercent: 100,
|
|
controlCaption: null,
|
|
leftSectorCaption: 'Under',
|
|
rightSectorCaption: 'Over',
|
|
valueHints: {
|
|
aboveZero: '{0}% over',
|
|
belowZero: '{0}% under',
|
|
equalToZero: 'equals'
|
|
},
|
|
relatedValueControl: null,
|
|
value: 0,
|
|
initCallback: null,
|
|
changedCallback: null,
|
|
};
|
|
|
|
$.fn.underOverSlider.Constructor = UnderOverSlider;
|
|
|
|
}(jQuery)); |