mirror of
https://github.com/friendica/friendica
synced 2024-11-18 08:23:53 +00:00
[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
parent
a88df9b259
commit
d6a5274bb9
11 changed files with 15 additions and 898 deletions
|
|
@ -30,7 +30,7 @@ function theme_post(App $a)
|
|||
|
||||
function theme_admin_post(App $a)
|
||||
{
|
||||
if (!local_user()) {
|
||||
if (!is_site_admin()) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3236,53 +3236,6 @@ main .nav-tabs>li.active>a:hover {
|
|||
* 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*/
|
||||
#contact-list ul.dropdown-menu.textcomplete-dropdown.media-list {
|
||||
position: relative !important;
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
## jQuery plugin to create Range Selector
|
||||
|
||||
|
||||
|
||||
[Demo and Documentation](http://nitinhayaran.github.io/jRange/demo/)
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -2,9 +2,9 @@
|
|||
<div class="form-group field input color">
|
||||
<label for="id_{{$field.0}}" id="label_{{$field.0}}">{{$field.1}}</label>
|
||||
<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">
|
||||
{{if $field.4}}<span class="required">{{$field.4}}</span>{{/if}}
|
||||
<span class="input-group-addon"><i></i></span>
|
||||
</div>
|
||||
{{if $field.3}}
|
||||
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3 nofilter}}</span>
|
||||
|
|
|
|||
|
|
@ -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/frio/frameworks/jRange/jquery.range.js"></script>
|
||||
<script type="text/javascript" src="{{$baseurl}}/view/js/ajaxupload.js" ></script>
|
||||
|
||||
{{include file="field_select.tpl" field=$scheme}}
|
||||
|
|
@ -17,7 +14,19 @@
|
|||
{{if $contentbg_transp}}
|
||||
<div class="form-group field input color">
|
||||
<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>
|
||||
<div id="end_{{$contentbg_transp.0}}" class="field_end"></div>
|
||||
</div>
|
||||
|
|
@ -171,25 +180,6 @@
|
|||
if($("#id_frio_background_image").val().length != 0) {
|
||||
$("#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>
|
||||
|
||||
|
|
@ -197,7 +187,3 @@
|
|||
<button type="submit" value="{{$submit}}" class="settings-submit btn btn-primary" name="frio-settings-submit">{{$submit}}</button>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(".inputRange").rangeinput();
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue