(function (root, factory) { 'use strict'; var $ = root.jQuery; if (typeof define === 'function' && define.amd) { // AMD if ($) { define([], factory.bind(null, $)); } else { define(['jquery'], factory); } } else if (typeof exports === 'object') { // Node, CommonJS-like if ($) { module.exports = factory($); } else { module.exports = factory(require('jquery')); } } else { // Browser globals (root is window) if ($) { factory($); // no global needed as we store it as a jQuery plugin on jQuery.fn } else { throw 'Missing required jQuery dependency'; } } }(this, function ($) { var isDragging = false; var $currentHandle = null; function drawCircle($container, degreeStart, degreeEnd) { var $canvas = $container.find('canvas'), canvas = $canvas[0]; var outerWidth = $container.outerWidth(); var innerWidth = $container.innerWidth(); var borderWidth = outerWidth - innerWidth; $canvas.css('left', borderWidth * -1); $canvas.css('top', borderWidth * -1); var radius = (outerWidth - borderWidth / 2) / 2; canvas.width = outerWidth + borderWidth; canvas.height = canvas.width; var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.arc(canvas.width / 2, canvas.width / 2, radius, degreesToRadians(degreeStart) - Math.PI / 2, degreesToRadians(degreeEnd) - Math.PI / 2, false); context.lineWidth = borderWidth / 2; context.strokeStyle = $canvas.css('color'); context.stroke(); } function degreesToRadians(degrees) { return degrees * (Math.PI / 180); } function updateWidget($container) { var $input = $container.find('input'); var isSingleValue = _isSingleValue($input); var $handles = $container.find('.handle'); var $handle1 = $container.find('.handle1'); if (!isSingleValue) { var $handle2 = $container.find('.handle2'); } var outerWidth = $container.outerWidth(); var innerWidth = $container.innerWidth(); var borderWidth = (outerWidth - innerWidth) / 2; var radius = (outerWidth - borderWidth) / 2; var minValue = parseFloat($input.attr('data-min')) || 0; var maxValue = parseFloat($input.attr('data-max')) || 360; var unit = $input.attr('data-unit') === undefined ? '°' : $input.attr('data-unit'); var steps = maxValue - minValue; var stepSizeInDegrees = 360 / steps; $handles.each(function (idx, handle) { var $handle = $(handle); var value = parseFloat($handle.attr('data-value')); var deg = (value - minValue) * stepSizeInDegrees; var X = Math.round(radius + radius * Math.sin(deg * Math.PI / 180)); var Y = Math.round(radius + radius * -Math.cos(deg * Math.PI / 180)); $handle.css({ left: X, top: Y }); $container.find($handle.attr('data-value-target')).html($handle.attr('data-value') + unit); }); var extraChangeEventParameters = [{ source: 'lcnCircleRangeSelect' }]; var value1 = $handle1.attr('data-value'); if (isSingleValue) { $input.val(value1).trigger('change', extraChangeEventParameters); } else { var value2 = $handle2.attr('data-value'); drawCircle($container, (value1 - minValue) * stepSizeInDegrees, (value2 - minValue) * stepSizeInDegrees); $input.val(value1 + ';' + value2).trigger('change', extraChangeEventParameters); } } function init($input) { var isSingleValue = _isSingleValue($input); if (isSingleValue) { var value1 = parseFloat($input.val() || 0); } else { var values = $input.val() || '0;0'; values = values.split(';'); var value1 = parseFloat(values[0]); var value2 = parseFloat(values[1]); } var $container = $('
'); var backgroundImage = $input.attr('data-bg-image'); if (backgroundImage) { $container.css({ 'background-image': 'url("' + backgroundImage + '")', 'background-size': 'contain' }); } $input.wrap($container); $container = $input.parent(); $container.append(''); if (isSingleValue) { $container.append('