opdavies/drupalcampbristol
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update Composer, update everything

Browse source
This commit is contained in:
Oliver Davies 2018-11-23 12:29:20 +00:00
parent ea3e94409f
commit dda5c284b6
19527 changed files with 1135420 additions and 351004 deletions
Download patch file Download diff file Expand all files Collapse all files

156
web/modules/contrib/webform/js/webform.element.range.js
View file

@ -1,6 +1,6 @@
/**
* @file
* Javascript behaviors for range element integration.
* JavaScript behaviors for range element integration.
*/
(function ($, Drupal) {
@ -8,54 +8,140 @@
'use strict';
/**
* Enhance HTML5 range element.
* Display HTML5 range output in a left/right aligned number input.
*
* @type {Drupal~behavior}
*/
Drupal.behaviors.webformRange = {
Drupal.behaviors.webformRangeOutputNumber = {
attach: function (context) {
$(context).find('.form-range[data-range-output]').once('webform-range').each(function () {
var $element = $(this);
$(context).find('.js-form-type-range').once('webform-range-output-number').each(function () {
// Handle browser that don't support the HTML5 range input.
if (Modernizr.inputtypes.range === false) {
return;
}
var prefix = $element.attr('data-range-output-prefix');
var suffix = $element.attr('data-range-output-suffix');
var $element = $(this);
var $input = $element.find('input[type="range"]');
var $output = $element.find('input[type="number"]');
if (!$output.length) {
return;
}
// Display range input's output to the end user.
var html = '';
html += '<div class="form-range-output-container">';
html += (prefix ? '<span class="field-prefix">' + prefix + '</span>' : '');
html += '<input type="number" min="' + $element.attr('min') + '" max="' + $element.attr('max') + '" step="' + $element.attr('step') + '" class="form-range-output form-number" />';
html += (suffix ? '<span class="field-suffix">' + suffix + '</span>' : '');
html += '</div>';
// Set output value.
$output.val($input.val());
var height = parseInt($element.outerHeight()) || 24;
var $outputContainer = $(html);
// Set the container element's line height which will vertically
// align the range widget and the output.
$outputContainer.find('input, span').css({
height: height + 'px',
lineHeight: height + 'px'
});
var $output = $outputContainer.find('input');
$output[0].value = $element[0].value;
$element
.after($outputContainer)
.css({float: 'left'});
// Sync $element and $output.
$element.on('input', function () {
$output[0].value = $element[0].value;
// Sync input and output values.
$input.on('input', function () {
$output.val($input.val());
});
$output.on('input', function () {
$element[0].value = $output[0].value;
$input.val($output.val());
});
})
});
}
};
/**
* Display HTML5 range output in a floating bubble.
*
* @type {Drupal~behavior}
*
* @see https://css-tricks.com/value-bubbles-for-range-inputs/
* @see https://stackoverflow.com/questions/33794123/absolute-positioning-in-relation-to-a-inputtype-range
*/
Drupal.behaviors.webformRangeOutputBubble = {
attach: function (context) {
$(context).find('.js-form-type-range').once('webform-range-output-bubble').each(function () {
// Handle browser that don't support the HTML5 range input.
if (Modernizr.inputtypes.range === false) {
return;
}
var $element = $(this);
var $input = $element.find('input[type="range"]');
var $output = $element.find('output');
var display = $output.attr('data-display');
if (!$output.length) {
return;
}
$element.css('position', 'relative');
$input.on('input', function () {
var inputValue = $input.val();
// Set output text with prefix and suffix.
var text = ($output.attr('data-field-prefix') || '') +
inputValue +
($output.attr('data-field-suffix') || '');
$output.text(text);
// Set output top position.
var top;
if (display === 'above') {
top = $input.position().top - $output.outerHeight() + 2;
}
else {
top = $input.position().top + $input.outerHeight() + 2;
}
// It is impossible to accurately calculate the exact position of the
// range's buttons so we only incrementally move the output bubble.
var inputWidth = $input.outerWidth();
var buttonPosition = Math.floor(inputWidth * (inputValue - $input.attr('min')) / ($input.attr('max') - $input.attr('min')));
var increment = Math.floor(inputWidth / 5);
var outputWidth = $output.outerWidth();
// Set output left position.
var left;
if (buttonPosition <= increment) {
left = 0;
}
else if (buttonPosition <= increment * 2) {
left = (increment * 1.5) - outputWidth;
if (left < 0) {
left = 0;
}
}
else if (buttonPosition <= increment * 3) {
left = (increment * 2.5) - (outputWidth / 2);
}
else if (buttonPosition <= increment * 4) {
left = (increment * 4) - outputWidth;
if (left > (increment * 5) - outputWidth) {
left = (increment * 5) - outputWidth;
}
}
else if (buttonPosition <= inputWidth) {
left = (increment * 5) - outputWidth;
}
// Also make sure to include the input's left position.
left = Math.floor($input.position().left + left);
// Finally, position the output.
$output.css({top: top, left: left});
})
// Fake a change to position output at page load.
.trigger('input');
// Add fade in/out event handlers if opacity is defined.
var defaultOpacity = $output.css('opacity');
if (defaultOpacity < 1) {
// Fade in/out on focus/blur of the input.
$input.on('focus mouseover', function () {
$output.stop().fadeTo('slow', 1);
});
$input.on('blur mouseout', function () {
$output.stop().fadeTo('slow', defaultOpacity);
});
// Also fade in when focusing the output.
$output.on('touchstart mouseover', function () {
$output.stop().fadeTo('slow', 1);
});
}
});
}
};