[frio] Update theme settings form for use in embed mode

- Replace jRange with native slider to prevent overflowing on the right in embed mode
- Move color swatch to the left of colorinput fields to prevent overflowing on the right in embed mode
This commit is contained in:
Hypolite Petovan 2019-04-25 22:17:04 -04:00
parent a88df9b259
commit d6a5274bb9
11 changed files with 15 additions and 898 deletions

View file

@ -30,7 +30,7 @@ function theme_post(App $a)
function theme_admin_post(App $a) function theme_admin_post(App $a)
{ {
if (!local_user()) { if (!is_site_admin()) {
return; return;
} }

View file

@ -3236,53 +3236,6 @@ main .nav-tabs>li.active>a:hover {
* Framework overwrite * Framework overwrite
*/ */
/* jRange */
.theme-frio .back-bar {
height: 5px !important;
border-radius: 2px;
background-color: #eeeeee;
background-color: #e7e7e7;
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}
.theme-frio .back-bar .selected-bar {
border-radius: 2px;
background-color: $link_color;
/* background-image: -moz-linear-gradient(top, #bdfade, #76fabc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc));
background-image: -webkit-linear-gradient(top, #bdfade, #76fabc);
background-image: -o-linear-gradient(top, #bdfade, #76fabc);
background-image: linear-gradient(to bottom, #bdfade, #76fabc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);*/
}
.theme-frio .back-bar .pointer {
width: 14px !important;
height: 14px !important;
top: -5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #AAA;
background-color: #e7e7e7 !important;
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}
.theme-frio .back-bar .pointer-label {
color: #999;
}
/* textcomplete for contact filtering*/ /* textcomplete for contact filtering*/
#contact-list ul.dropdown-menu.textcomplete-dropdown.media-list { #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
position: relative !important; position: relative !important;

View file

@ -1,21 +0,0 @@
The MIT License (MIT)
Copyright (c) 2014 Nitin Hayaran
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

@ -1,5 +0,0 @@
## jQuery plugin to create Range Selector
![jRange Preview](http://i.imgur.com/da8uZwx.png)
[Demo and Documentation](http://nitinhayaran.github.io/jRange/demo/)

File diff suppressed because one or more lines are too long

View file

@ -1,173 +0,0 @@
.slider-container {
width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.slider-container .back-bar {
height: 10px;
position: relative;
}
.slider-container .back-bar .selected-bar {
position: absolute;
height: 100%;
}
.slider-container .back-bar .pointer {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
cursor: col-resize;
opacity: 1;
z-index: 2;
}
.slider-container .back-bar .pointer.last-active {
z-index: 3;
}
.slider-container .back-bar .pointer-label {
position: absolute;
top: -17px;
font-size: 8px;
background: white;
white-space: nowrap;
line-height: 1;
}
.slider-container .back-bar .focused {
z-index: 10;
}
.slider-container .clickable-dummy {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.slider-container .scale {
top: 2px;
position: relative;
}
.slider-container .scale span {
position: absolute;
height: 5px;
border-left: 1px solid #999;
font-size: 0;
}
.slider-container .scale ins {
font-size: 9px;
text-decoration: none;
position: absolute;
left: 0;
top: 5px;
color: #999;
line-height: 1;
}
.slider-container.slider-readonly .clickable-dummy,
.slider-container.slider-readonly .pointer {
cursor: auto;
}
.theme-green .back-bar {
height: 5px;
border-radius: 2px;
background-color: #eeeeee;
background-color: #e7e7e7;
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}
.theme-green .back-bar .selected-bar {
border-radius: 2px;
background-color: #a1fad0;
background-image: -moz-linear-gradient(top, #bdfade, #76fabc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bdfade), to(#76fabc));
background-image: -webkit-linear-gradient(top, #bdfade, #76fabc);
background-image: -o-linear-gradient(top, #bdfade, #76fabc);
background-image: linear-gradient(to bottom, #bdfade, #76fabc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);
}
.theme-green .back-bar .pointer {
width: 14px;
height: 14px;
top: -5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #AAA;
background-color: #e7e7e7;
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}
.theme-green .back-bar .pointer-label {
color: #999;
}
.theme-green .back-bar .focused {
color: #333;
}
.theme-green .scale span {
border-left: 1px solid #e5e5e5;
}
.theme-green .scale ins {
color: #999;
}
.theme-blue .back-bar {
height: 5px;
border-radius: 2px;
background-color: #eeeeee;
background-color: #e7e7e7;
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}
.theme-blue .back-bar .selected-bar {
border-radius: 2px;
background-color: #92c1f9;
background-image: -moz-linear-gradient(top, #b1d1f9, #64a8f9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b1d1f9), to(#64a8f9));
background-image: -webkit-linear-gradient(top, #b1d1f9, #64a8f9);
background-image: -o-linear-gradient(top, #b1d1f9, #64a8f9);
background-image: linear-gradient(to bottom, #b1d1f9, #64a8f9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb1d1f9', endColorstr='#ff64a8f9', GradientType=0);
}
.theme-blue .back-bar .pointer {
width: 14px;
height: 14px;
top: -5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #AAA;
background-color: #e7e7e7;
background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}
.theme-blue .back-bar .pointer-label {
color: #999;
}
.theme-blue .back-bar .focused {
color: #333;
}
.theme-blue .scale span {
border-left: 1px solid #e5e5e5;
}
.theme-blue .scale ins {
color: #999;
}

View file

@ -1,401 +0,0 @@
/*jshint multistr:true, curly: false */
/*global jQuery:false, define: false */
/**
* jRange - Awesome range control
*
* Written by
* ----------
* Nitin Hayaran (nitinhayaran@gmail.com)
*
* Licensed under the MIT (MIT-LICENSE.txt).
*
* @author Nitin Hayaran
* @version 0.1-RELEASE
*
* Dependencies
* ------------
* jQuery (http://jquery.com)
*
**/
;
(function($, window, document, undefined) {
'use strict';
var jRange = function() {
return this.init.apply(this, arguments);
};
jRange.prototype = {
defaults: {
onstatechange: function() {},
ondragend: function() {},
onbarclicked: function() {},
isRange: false,
showLabels: true,
showScale: true,
step: 1,
format: '%s',
theme: 'theme-green',
width: 300,
disable: false,
snap: false
},
template: '<div class="slider-container">\
<div class="back-bar">\
<div class="selected-bar"></div>\
<div class="pointer low"></div><div class="pointer-label low">123456</div>\
<div class="pointer high"></div><div class="pointer-label high">456789</div>\
<div class="clickable-dummy"></div>\
</div>\
<div class="scale"></div>\
</div>',
init: function(node, options) {
this.options = $.extend({}, this.defaults, options);
this.inputNode = $(node);
this.options.value = this.inputNode.val() || (this.options.isRange ? this.options.from + ',' + this.options.from : this.options.from);
this.domNode = $(this.template);
this.domNode.addClass(this.options.theme);
this.inputNode.after(this.domNode);
this.domNode.on('change', this.onChange);
this.pointers = $('.pointer', this.domNode);
this.lowPointer = this.pointers.first();
this.highPointer = this.pointers.last();
this.labels = $('.pointer-label', this.domNode);
this.lowLabel = this.labels.first();
this.highLabel = this.labels.last();
this.scale = $('.scale', this.domNode);
this.bar = $('.selected-bar', this.domNode);
this.clickableBar = this.domNode.find('.clickable-dummy');
this.interval = this.options.to - this.options.from;
this.render();
},
render: function() {
// Check if inputNode is visible, and have some width, so that we can set slider width accordingly.
if (this.inputNode.width() === 0 && !this.options.width) {
console.log('jRange : no width found, returning');
return;
} else {
this.options.width = this.options.width || this.inputNode.width();
this.domNode.width(this.options.width);
this.inputNode.hide();
}
if (this.isSingle()) {
this.lowPointer.hide();
this.lowLabel.hide();
}
if (!this.options.showLabels) {
this.labels.hide();
}
this.attachEvents();
if (this.options.showScale) {
this.renderScale();
}
this.setValue(this.options.value);
},
isSingle: function() {
if (typeof(this.options.value) === 'number') {
return true;
}
return (this.options.value.indexOf(',') !== -1 || this.options.isRange) ?
false : true;
},
attachEvents: function() {
this.clickableBar.click($.proxy(this.barClicked, this));
this.pointers.on('mousedown touchstart', $.proxy(this.onDragStart, this));
this.pointers.bind('dragstart', function(event) {
event.preventDefault();
});
},
onDragStart: function(e) {
if ( this.options.disable || (e.type === 'mousedown' && e.which !== 1)) {
return;
}
e.stopPropagation();
e.preventDefault();
var pointer = $(e.target);
this.pointers.removeClass('last-active');
pointer.addClass('focused last-active');
this[(pointer.hasClass('low') ? 'low' : 'high') + 'Label'].addClass('focused');
$(document).on('mousemove.slider touchmove.slider', $.proxy(this.onDrag, this, pointer));
$(document).on('mouseup.slider touchend.slider touchcancel.slider', $.proxy(this.onDragEnd, this));
},
onDrag: function(pointer, e) {
e.stopPropagation();
e.preventDefault();
if (e.originalEvent.touches && e.originalEvent.touches.length) {
e = e.originalEvent.touches[0];
} else if (e.originalEvent.changedTouches && e.originalEvent.changedTouches.length) {
e = e.originalEvent.changedTouches[0];
}
var position = e.clientX - this.domNode.offset().left;
this.domNode.trigger('change', [this, pointer, position]);
},
onDragEnd: function(e) {
this.pointers.removeClass('focused')
.trigger('rangeslideend');
this.labels.removeClass('focused');
$(document).off('.slider');
this.options.ondragend.call(this, this.options.value);
},
barClicked: function(e) {
if(this.options.disable) return;
var x = e.pageX - this.clickableBar.offset().left;
if (this.isSingle())
this.setPosition(this.pointers.last(), x, true, true);
else {
var firstLeft = Math.abs(parseFloat(this.pointers.first().css('left'), 10)),
firstHalfWidth = this.pointers.first().width() / 2,
lastLeft = Math.abs(parseFloat(this.pointers.last().css('left'), 10)),
lastHalfWidth = this.pointers.first().width() / 2,
leftSide = Math.abs(firstLeft - x + firstHalfWidth),
rightSide = Math.abs(lastLeft - x + lastHalfWidth),
pointer;
if(leftSide == rightSide) {
pointer = x < firstLeft ? this.pointers.first() : this.pointers.last();
} else {
pointer = leftSide < rightSide ? this.pointers.first() : this.pointers.last();
}
this.setPosition(pointer, x, true, true);
}
this.options.onbarclicked.call(this, this.options.value);
},
onChange: function(e, self, pointer, position) {
var min, max;
min = 0;
max = self.domNode.width();
if (!self.isSingle()) {
min = pointer.hasClass('high') ? parseFloat(self.lowPointer.css("left")) + (self.lowPointer.width() / 2) : 0;
max = pointer.hasClass('low') ? parseFloat(self.highPointer.css("left")) + (self.highPointer.width() / 2) : self.domNode.width();
}
var value = Math.min(Math.max(position, min), max);
self.setPosition(pointer, value, true);
},
setPosition: function(pointer, position, isPx, animate) {
var leftPos, rightPos,
lowPos = parseFloat(this.lowPointer.css("left")),
highPos = parseFloat(this.highPointer.css("left")) || 0,
circleWidth = this.highPointer.width() / 2;
if (!isPx) {
position = this.prcToPx(position);
}
if(this.options.snap){
var expPos = this.correctPositionForSnap(position);
if(expPos === -1){
return;
}else{
position = expPos;
}
}
if (pointer[0] === this.highPointer[0]) {
highPos = Math.round(position - circleWidth);
} else {
lowPos = Math.round(position - circleWidth);
}
pointer[animate ? 'animate' : 'css']({
'left': Math.round(position - circleWidth)
});
if (this.isSingle()) {
leftPos = 0;
} else {
leftPos = lowPos + circleWidth;
rightPos = highPos + circleWidth;
}
var w = Math.round(highPos + circleWidth - leftPos);
this.bar[animate ? 'animate' : 'css']({
'width': Math.abs(w),
'left': (w>0) ? leftPos : leftPos + w
});
this.showPointerValue(pointer, position, animate);
this.isReadonly();
},
correctPositionForSnap: function(position){
var currentValue = this.positionToValue(position) - this.options.from;
var diff = this.options.width / (this.interval / this.options.step),
expectedPosition = (currentValue / this.options.step) * diff;
if( position <= expectedPosition + diff / 2 && position >= expectedPosition - diff / 2){
return expectedPosition;
}else{
return -1;
}
},
// will be called from outside
setValue: function(value) {
var values = value.toString().split(',');
values[0] = Math.min(Math.max(values[0], this.options.from), this.options.to) + '';
if (values.length > 1){
values[1] = Math.min(Math.max(values[1], this.options.from), this.options.to) + '';
}
this.options.value = value;
var prc = this.valuesToPrc(values.length === 2 ? values : [0, values[0]]);
if (this.isSingle()) {
this.setPosition(this.highPointer, prc[1]);
} else {
this.setPosition(this.lowPointer, prc[0]);
this.setPosition(this.highPointer, prc[1]);
}
},
renderScale: function() {
var s = this.options.scale || [this.options.from, this.options.to];
var prc = Math.round((100 / (s.length - 1)) * 10) / 10;
var str = '';
for (var i = 0; i < s.length; i++) {
str += '<span style="left: ' + i * prc + '%">' + (s[i] != '|' ? '<ins>' + s[i] + '</ins>' : '') + '</span>';
}
this.scale.html(str);
$('ins', this.scale).each(function() {
$(this).css({
marginLeft: -$(this).outerWidth() / 2
});
});
},
getBarWidth: function() {
var values = this.options.value.split(',');
if (values.length > 1) {
return parseFloat(values[1]) - parseFloat(values[0]);
} else {
return parseFloat(values[0]);
}
},
showPointerValue: function(pointer, position, animate) {
var label = $('.pointer-label', this.domNode)[pointer.hasClass('low') ? 'first' : 'last']();
var text;
var value = this.positionToValue(position);
// Is it higer or lower than it should be?
if ($.isFunction(this.options.format)) {
var type = this.isSingle() ? undefined : (pointer.hasClass('low') ? 'low' : 'high');
text = this.options.format(value, type);
} else {
text = this.options.format.replace('%s', value);
}
var width = label.html(text).width(),
left = position - width / 2;
left = Math.min(Math.max(left, 0), this.options.width - width);
label[animate ? 'animate' : 'css']({
left: left
});
this.setInputValue(pointer, value);
},
valuesToPrc: function(values) {
var lowPrc = ((parseFloat(values[0]) - parseFloat(this.options.from)) * 100 / this.interval),
highPrc = ((parseFloat(values[1]) - parseFloat(this.options.from)) * 100 / this.interval);
return [lowPrc, highPrc];
},
prcToPx: function(prc) {
return (this.domNode.width() * prc) / 100;
},
isDecimal: function() {
return ((this.options.value + this.options.from + this.options.to).indexOf(".")===-1) ? false : true;
},
positionToValue: function(pos) {
var value = (pos / this.domNode.width()) * this.interval;
value = parseFloat(value, 10) + parseFloat(this.options.from, 10);
if (this.isDecimal()) {
var final = Math.round(Math.round(value / this.options.step) * this.options.step *100)/100;
if (final!==0.0) {
final = '' + final;
if (final.indexOf(".")===-1) {
final = final + ".";
}
while (final.length - final.indexOf('.')<3) {
final = final + "0";
}
} else {
final = "0.00";
}
return final;
} else {
return Math.round(value / this.options.step) * this.options.step;
}
},
setInputValue: function(pointer, v) {
// if(!isChanged) return;
if (this.isSingle()) {
this.options.value = v.toString();
} else {
var values = this.options.value.split(',');
if (pointer.hasClass('low')) {
this.options.value = v + ',' + values[1];
} else {
this.options.value = values[0] + ',' + v;
}
}
if (this.inputNode.val() !== this.options.value) {
this.inputNode.val(this.options.value)
.trigger('change');
this.options.onstatechange.call(this, this.options.value);
}
},
getValue: function() {
return this.options.value;
},
getOptions: function() {
return this.options;
},
getRange: function() {
return this.options.from + "," + this.options.to;
},
isReadonly: function(){
this.domNode.toggleClass('slider-readonly', this.options.disable);
},
disable: function(){
this.options.disable = true;
this.isReadonly();
},
enable: function(){
this.options.disable = false;
this.isReadonly();
},
toggleDisable: function(){
this.options.disable = !this.options.disable;
this.isReadonly();
},
updateRange: function(range, value) {
var values = range.toString().split(',');
this.interval = parseInt(values[1]) - parseInt(values[0]);
if(value){
this.setValue(value);
}else{
this.setValue(this.getValue());
}
}
};
var pluginName = 'jRange';
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function(option) {
var args = arguments,
result;
this.each(function() {
var $this = $(this),
data = $.data(this, 'plugin_' + pluginName),
options = typeof option === 'object' && option;
if (!data) {
$this.data('plugin_' + pluginName, (data = new jRange(this, options)));
$(window).resize(function() {
data.setValue(data.getValue());
}); // Update slider position when window is resized to keep it in sync with scale
}
// if first argument is a string, call silimarly named function
// this gives flexibility to call functions of the plugin e.g.
// - $('.dial').plugin('destroy');
// - $('.dial').plugin('render', $('.new-child'));
if (typeof option === 'string') {
result = data[option].apply(data, Array.prototype.slice.call(args, 1));
}
});
// To enable plugin returns values
return result || this;
};
})(jQuery, window, document);

View file

@ -1,198 +0,0 @@
#gradient {
.horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%);
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: mix(@midColor, @endColor, 80%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@innerColor: #555, @outerColor: #333) {
background-color: @outerColor;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
background-repeat: no-repeat;
}
.striped(@color: #555, @angle: 45deg) {
background-color: @color;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
}
}
.slider-container {
width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
.back-bar {
height: 10px;
position: relative;
.selected-bar {
position: absolute;
height: 100%;
}
.pointer {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
cursor: col-resize;
opacity: 1;
z-index: 2;
&.last-active{
z-index: 3;
}
}
.pointer-label {
position: absolute;
top: -17px;
font-size: 8px;
background: white;
white-space: nowrap;
line-height: 1;
}
.focused {
z-index: 10;
}
}
.clickable-dummy {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.scale {
top: 2px;
position: relative;
span {
position: absolute;
height: 5px;
border-left: 1px solid #999;
font-size: 0;
}
ins {
font-size: 9px;
text-decoration: none;
position: absolute;
left: 0;
top: 5px;
color: #999;
line-height: 1;
}
}
&.slider-readonly{
.clickable-dummy, .pointer {
cursor: auto;
}
}
}
.theme-green {
.back-bar {
height: 5px;
border-radius: 2px;
background-color: #eeeeee;
#gradient > .vertical(#eeeeee, #dddddd);
.selected-bar {
border-radius: 2px;
#gradient > .vertical(#bdfade, #76fabc);
}
.pointer {
width: 14px;
height: 14px;
top: -5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #AAA;
#gradient > .vertical(#eeeeee, #dddddd);
}
.pointer-label {
color: #999;
}
.focused {
color: #333;
}
}
.scale {
span {
border-left: 1px solid #e5e5e5;
}
ins {
color: #999;
}
}
}
.theme-blue {
.back-bar {
height: 5px;
border-radius: 2px;
background-color: #eeeeee;
#gradient > .vertical(#eeeeee, #dddddd);
.selected-bar {
border-radius: 2px;
#gradient > .vertical(#b1d1f9, #64a8f9);
}
.pointer {
width: 14px;
height: 14px;
top: -5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #AAA;
#gradient > .vertical(#eeeeee, #dddddd);
}
.pointer-label {
color: #999;
}
.focused {
color: #333;
}
}
.scale {
span {
border-left: 1px solid #e5e5e5;
}
ins {
color: #999;
}
}
}

View file

@ -1,23 +0,0 @@
{
"name": "jquery-range",
"version": "1.0.0",
"description": "jQuery plugin to create range selector",
"main": "jquery.range-min.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/nitinhayaran/jRange.git"
},
"keywords": [
"jquery",
"range"
],
"author": "Nitin Hayaran <nitinhayaran@gmail.com>",
"license": "ISC",
"bugs": {
"url": "https://github.com/nitinhayaran/jRange/issues"
},
"homepage": "https://github.com/nitinhayaran/jRange#readme"
}

View file

@ -2,9 +2,9 @@
<div class="form-group field input color"> <div class="form-group field input color">
<label for="id_{{$field.0}}" id="label_{{$field.0}}">{{$field.1}}</label> <label for="id_{{$field.0}}" id="label_{{$field.0}}">{{$field.1}}</label>
<div class="input-group" id="{{$field.0}}"> <div class="input-group" id="{{$field.0}}">
<span class="input-group-addon"><i></i></span>
<input class="form-control color" name="{{$field.0}}" id="id_{{$field.0}}" type="text" value="{{$field.2 nofilter}}" aria-describedby="{{$field.0}}_tip"> <input class="form-control color" name="{{$field.0}}" id="id_{{$field.0}}" type="text" value="{{$field.2 nofilter}}" aria-describedby="{{$field.0}}_tip">
{{if $field.4}}<span class="required">{{$field.4}}</span>{{/if}} {{if $field.4}}<span class="required">{{$field.4}}</span>{{/if}}
<span class="input-group-addon"><i></i></span>
</div> </div>
{{if $field.3}} {{if $field.3}}
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3 nofilter}}</span> <span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3 nofilter}}</span>

View file

@ -1,7 +1,4 @@
<link rel="stylesheet" href="{{$baseurl}}/view/theme/frio/frameworks/jRange/jquery.range.css" type="text/css" media="screen" />
<script src="{{$baseurl}}/view/theme/quattro/jquery.tools.min.js"></script> <script src="{{$baseurl}}/view/theme/quattro/jquery.tools.min.js"></script>
<script src="{{$baseurl}}/view/theme/frio/frameworks/jRange/jquery.range.js"></script>
<script type="text/javascript" src="{{$baseurl}}/view/js/ajaxupload.js" ></script> <script type="text/javascript" src="{{$baseurl}}/view/js/ajaxupload.js" ></script>
{{include file="field_select.tpl" field=$scheme}} {{include file="field_select.tpl" field=$scheme}}
@ -17,7 +14,19 @@
{{if $contentbg_transp}} {{if $contentbg_transp}}
<div class="form-group field input color"> <div class="form-group field input color">
<label for="id_{{$contentbg_transp.0}}" id="label_{{$contentbg_transp.0}}">{{$contentbg_transp.1}}</label> <label for="id_{{$contentbg_transp.0}}" id="label_{{$contentbg_transp.0}}">{{$contentbg_transp.1}}</label>
<input type="hidden" class="form-control color slider-input" name="{{$contentbg_transp.0}}" id="{{$contentbg_transp.0}}" type="text" value="{{$contentbg_transp.2}}" aria-describedby="{{$contentbg_transp.0}}_tip">
<div class="row">
<div class="col-xs-9">
<input type="range" class="form-control color" id="{{$contentbg_transp.0}}_range" min="0" max="100" step="1" value="{{$contentbg_transp.2}}" onchange="{{$contentbg_transp.0}}.value = this.value" oninput="{{$contentbg_transp.0}}.value = this.value">
</div>
<div class="col-xs-3">
<div class="input-group">
<input type="text" class="form-control input-sm" name="{{$contentbg_transp.0}}" id="{{$contentbg_transp.0}}" value="{{$contentbg_transp.2}}" onchange="{{$contentbg_transp.0}}_range.value = this.value" oninput="{{$contentbg_transp.0}}_range.value = this.value" aria-describedby="{{$contentbg_transp.0}}_tip">
<span class="input-group-addon image-select">%</span>
</div>
</div>
</div>
<span id="{{$contentbg_transp.0}}_tip" class="help-block" role="tooltip">{{$contentbg_transp.3}}</span> <span id="{{$contentbg_transp.0}}_tip" class="help-block" role="tooltip">{{$contentbg_transp.3}}</span>
<div id="end_{{$contentbg_transp.0}}" class="field_end"></div> <div id="end_{{$contentbg_transp.0}}" class="field_end"></div>
</div> </div>
@ -171,25 +180,6 @@
if($("#id_frio_background_image").val().length != 0) { if($("#id_frio_background_image").val().length != 0) {
$("#frio_bg_image_options").show(); $("#frio_bg_image_options").show();
} }
$('.slider-input').jRange({
from: 0,
to: 100,
step: 1,
scale: [0,10,20,30,40,50,60,70,80,90,100],
format: '%s',
width: '100%',
showLabels: true,
theme: 'theme-frio',
});
// The position of the slider is wrong calculated on hidden elements.
// So set an event listener toggle and update the jRange value.
$(document).on('click', '#custom-settings-title a', function() {
var bgTransp = $('#frio_contentbg_transp').val();
$('.slider-input').jRange('setValue', bgTransp);
});
}); });
</script> </script>
@ -197,7 +187,3 @@
<button type="submit" value="{{$submit}}" class="settings-submit btn btn-primary" name="frio-settings-submit">{{$submit}}</button> <button type="submit" value="{{$submit}}" class="settings-submit btn btn-primary" name="frio-settings-submit">{{$submit}}</button>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<script type="text/javascript">
$(".inputRange").rangeinput();
</script>