From f3136bb9237517162cf5dd0c0d9a25dad880d9c9 Mon Sep 17 00:00:00 2001 From: Pratik Soni Date: Sun, 1 Jun 2025 06:57:45 -0500 Subject: [PATCH 1/2] migrating to html 5 --- src/options/options.html | 9 +- src/options/res/options.js | 24 +- src/thirdparty/pratikabu-simple-slider.css | 55 ---- src/thirdparty/pratikabu-simple-slider.js | 364 --------------------- 4 files changed, 15 insertions(+), 437 deletions(-) delete mode 100644 src/thirdparty/pratikabu-simple-slider.css delete mode 100644 src/thirdparty/pratikabu-simple-slider.js diff --git a/src/options/options.html b/src/options/options.html index 429f4be..162df01 100644 --- a/src/options/options.html +++ b/src/options/options.html @@ -4,10 +4,8 @@ - - @@ -69,9 +67,7 @@
Scrolling Speed :
- +
@@ -115,8 +111,7 @@
Transparency :
- +
diff --git a/src/options/res/options.js b/src/options/res/options.js index 0d5e5a1..455fb75 100644 --- a/src/options/res/options.js +++ b/src/options/res/options.js @@ -176,7 +176,7 @@ function loadValueInSpeedSlider(initialValue) { } initialValue = MAX_SPEED - initialValue; populateSliderSpeedOnText(initialValue); - $("#scrollSpeedSliderId").simpleSlider("setValue", initialValue); + $("#scrollSpeedSliderId").val(initialValue); } @@ -186,7 +186,7 @@ function updateTransparency(transparency) { function loadValueInTransparencySlider(transparency) { updateTransparency(transparency); - $("#transparencySliderId").simpleSlider("setValue", transparency); + $("#transparencySliderId").val(transparency); } function selectableRadioContent(id, name, value) { @@ -513,23 +513,25 @@ function psInitJavascriptFunctions() { // common settings starts $('input:radio[name=imgVerticalLocation]').change(function() { isRightChangedEvent("imgVerticalLocation", $(this).val()); }); $('input:radio[name=imgHorizontalLocation]').change(function() { isRightChangedEvent("imgHorizontalLocation", $(this).val()); }); - $("#scrollSpeedSliderId").bind("slider:changed", function(event, data) { - populateSliderSpeedOnText(data.value); - var speedVal = MAX_SPEED - data.value; - if(MIN_SPEED === speedVal) { + $("#scrollSpeedSliderId").on("input change", function() { + var value = parseInt($(this).val(), 10); + populateSliderSpeedOnText(value); + var speedVal = MAX_SPEED - value; + if (MIN_SPEED === speedVal) { speedVal = 0; } globalScrollSpeed = speedVal; }); - $("#scrollSpeedSliderId").bind("slider:postChangeComplete", function(event) { + $("#scrollSpeedSliderId").on("change", function() { save_options(); }); $('input:radio[name=visbilityBehavior]').change(function() { isRightChangedEvent("visbilityBehavior", $(this).val()); }); - $("#transparencySliderId").bind("slider:changed", function(event, data) { - updateTransparency(data.value); - globalTransparency = data.value; + $("#transparencySliderId").on("input change", function() { + var value = parseFloat($(this).val()); + updateTransparency(value); + globalTransparency = value; }); - $("#transparencySliderId").bind("slider:postChangeComplete", function(event) { + $("#transparencySliderId").on("change", function() { save_options(); }); $("#transparencyImgId").hover( diff --git a/src/thirdparty/pratikabu-simple-slider.css b/src/thirdparty/pratikabu-simple-slider.css deleted file mode 100644 index ca9bf6b..0000000 --- a/src/thirdparty/pratikabu-simple-slider.css +++ /dev/null @@ -1,55 +0,0 @@ -.slider { - width: 300px; -} - -.slider > .dragger { - background: #8DCA09; - background: -webkit-linear-gradient(top, #8DCA09, #72A307); - background: -moz-linear-gradient(top, #8DCA09, #72A307); - background: linear-gradient(top, #8DCA09, #72A307); - - -webkit-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2); - -moz-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2); - box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2); - - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; - - border: 1px solid #496805; - width: 16px; - height: 16px; -} - -.slider > .dragger:hover { - background: -webkit-linear-gradient(top, #8DCA09, #8DCA09); -} - - -.slider > .track, .slider > .highlight-track { - background: #ccc; - background: -webkit-linear-gradient(top, #bbb, #ddd); - background: -moz-linear-gradient(top, #bbb, #ddd); - background: linear-gradient(top, #bbb, #ddd); - - -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); - -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); - box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); - - -webkit-border-radius: 8px; - -moz-border-radius: 8px; - border-radius: 8px; - - border: 1px solid #aaa; - height: 4px; -} - -.slider > .highlight-track { - background-color: #8DCA09; - background: -webkit-linear-gradient(top, #8DCA09, #72A307); - background: -moz-linear-gradient(top, #8DCA09, #72A307); - background: linear-gradient(top, #8DCA09, #72A307); - - border-color: #496805; -} - diff --git a/src/thirdparty/pratikabu-simple-slider.js b/src/thirdparty/pratikabu-simple-slider.js deleted file mode 100644 index 6e721ed..0000000 --- a/src/thirdparty/pratikabu-simple-slider.js +++ /dev/null @@ -1,364 +0,0 @@ -/* - jQuery Simple Slider - - Copyright (c) 2012 James Smith (http://loopj.com) - - Licensed under the MIT license (http://mit-license.org/) -*/ - -var __slice = [].slice, - __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; - -(function($, window) { - var SimpleSlider; - SimpleSlider = (function() { - - function SimpleSlider(input, options) { - var ratio, - _this = this; - this.input = input; - this.defaultOptions = { - animate: true, - snapMid: false, - classPrefix: null, - classSuffix: null, - theme: null, - highlight: false - }; - this.settings = $.extend({}, this.defaultOptions, options); - if (this.settings.theme) { - this.settings.classSuffix = "-" + this.settings.theme; - } - this.input.hide(); - this.slider = $("
").addClass("slider" + (this.settings.classSuffix || "")).css({ - position: "relative", - userSelect: "none", - boxSizing: "border-box" - }).insertBefore(this.input); - if (this.input.attr("id")) { - this.slider.attr("id", this.input.attr("id") + "-slider"); - } - this.track = this.createDivElement("track").css({ - width: "100%" - }); - if (this.settings.highlight) { - this.highlightTrack = this.createDivElement("highlight-track").css({ - width: "0" - }); - } - this.dragger = this.createDivElement("dragger"); - this.slider.css({ - minHeight: this.dragger.outerHeight(), - marginLeft: this.dragger.outerWidth() / 2, - marginRight: this.dragger.outerWidth() / 2 - }); - this.track.css({ - marginTop: this.track.outerHeight() / -2 - }); - if (this.settings.highlight) { - this.highlightTrack.css({ - marginTop: this.track.outerHeight() / -2 - }); - } - this.dragger.css({ - marginTop: this.dragger.outerHeight() / -2, - marginLeft: this.dragger.outerWidth() / -2 - }); - this.track.mousedown(function(e) { - return _this.trackEvent(e); - }); - if (this.settings.highlight) { - this.highlightTrack.mousedown(function(e) { - return _this.trackEvent(e); - }); - } - this.dragger.mousedown(function(e) { - if (e.which !== 1) { - return; - } - _this.dragging = true; - _this.dragger.addClass("dragging"); - _this.domDrag(e.pageX, e.pageY); - return false; - }); - $("body").mousemove(function(e) { - if (_this.dragging) { - _this.domDrag(e.pageX, e.pageY); - return $("body").css({ - cursor: "pointer" - }); - } - }).mouseup(function(e) { - if (_this.dragging) { - _this.dragging = false; - _this.dragger.removeClass("dragging"); - _this.input.trigger("slider:postChangeComplete"); - return $("body").css({ - cursor: "auto" - }); - } - }); - this.pagePos = 0; - if (this.input.val() === "") { - this.value = this.getRange().min; - this.input.val(this.value); - } else { - this.value = this.nearestValidValue(this.input.val()); - } - this.setSliderPositionFromValue(this.value); - ratio = this.valueToRatio(this.value); - this.input.trigger("slider:ready", { - value: this.value, - ratio: ratio, - position: ratio * this.slider.outerWidth(), - el: this.slider - }); - } - - SimpleSlider.prototype.createDivElement = function(classname) { - var item; - item = $("
").addClass(classname).css({ - position: "absolute", - top: "50%", - userSelect: "none", - cursor: "pointer" - }).appendTo(this.slider); - return item; - }; - - SimpleSlider.prototype.setRatio = function(ratio) { - var value; - ratio = Math.min(1, ratio); - ratio = Math.max(0, ratio); - value = this.ratioToValue(ratio); - this.setSliderPositionFromValue(value); - return this.valueChanged(value, ratio, "setRatio"); - }; - - SimpleSlider.prototype.setValue = function(value) { - var ratio; - value = this.nearestValidValue(value); - ratio = this.valueToRatio(value); - this.setSliderPositionFromValue(value); - return this.valueChanged(value, ratio, "setValue"); - }; - - SimpleSlider.prototype.trackEvent = function(e) { - if (e.which !== 1) { - return; - } - this.domDrag(e.pageX, e.pageY, true); - this.dragging = true; - return false; - }; - - SimpleSlider.prototype.domDrag = function(pageX, pageY, animate) { - var pagePos, ratio, value; - if (animate == null) { - animate = false; - } - pagePos = pageX - this.slider.offset().left; - pagePos = Math.min(this.slider.outerWidth(), pagePos); - pagePos = Math.max(0, pagePos); - if (this.pagePos !== pagePos) { - this.pagePos = pagePos; - ratio = pagePos / this.slider.outerWidth(); - value = this.ratioToValue(ratio); - this.valueChanged(value, ratio, "domDrag"); - if (this.settings.snap) { - return this.setSliderPositionFromValue(value, animate); - } else { - return this.setSliderPosition(pagePos, animate); - } - } - }; - - SimpleSlider.prototype.setSliderPosition = function(position, animate) { - if (animate == null) { - animate = false; - } - if (animate && this.settings.animate) { - this.dragger.animate({ - left: position - }, 200); - if (this.settings.highlight) { - return this.highlightTrack.animate({ - width: position - }, 200); - } - } else { - this.dragger.css({ - left: position - }); - if (this.settings.highlight) { - return this.highlightTrack.css({ - width: position - }); - } - } - }; - - SimpleSlider.prototype.setSliderPositionFromValue = function(value, animate) { - var ratio; - if (animate == null) { - animate = false; - } - ratio = this.valueToRatio(value); - return this.setSliderPosition(ratio * this.slider.outerWidth(), animate); - }; - - SimpleSlider.prototype.getRange = function() { - if (this.settings.allowedValues) { - return { - min: Math.min.apply(Math, this.settings.allowedValues), - max: Math.max.apply(Math, this.settings.allowedValues) - }; - } else if (this.settings.range) { - return { - min: parseFloat(this.settings.range[0]), - max: parseFloat(this.settings.range[1]) - }; - } else { - return { - min: 0, - max: 1 - }; - } - }; - - SimpleSlider.prototype.nearestValidValue = function(rawValue) { - var closest, maxSteps, range, steps; - range = this.getRange(); - rawValue = Math.min(range.max, rawValue); - rawValue = Math.max(range.min, rawValue); - if (this.settings.allowedValues) { - closest = null; - $.each(this.settings.allowedValues, function() { - if (closest === null || Math.abs(this - rawValue) < Math.abs(closest - rawValue)) { - return closest = this; - } - }); - return closest; - } else if (this.settings.step) { - maxSteps = (range.max - range.min) / this.settings.step; - steps = Math.floor((rawValue - range.min) / this.settings.step); - if ((rawValue - range.min) % this.settings.step > this.settings.step / 2 && steps < maxSteps) { - steps += 1; - } - return steps * this.settings.step + range.min; - } else { - return rawValue; - } - }; - - SimpleSlider.prototype.valueToRatio = function(value) { - var allowedVal, closest, closestIdx, idx, range, _i, _len, _ref; - if (this.settings.equalSteps) { - _ref = this.settings.allowedValues; - for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) { - allowedVal = _ref[idx]; - if (!(typeof closest !== "undefined" && closest !== null) || Math.abs(allowedVal - value) < Math.abs(closest - value)) { - closest = allowedVal; - closestIdx = idx; - } - } - if (this.settings.snapMid) { - return (closestIdx + 0.5) / this.settings.allowedValues.length; - } else { - return closestIdx / (this.settings.allowedValues.length - 1); - } - } else { - range = this.getRange(); - return (value - range.min) / (range.max - range.min); - } - }; - - SimpleSlider.prototype.ratioToValue = function(ratio) { - var idx, range, rawValue, step, steps; - if (this.settings.equalSteps) { - steps = this.settings.allowedValues.length; - step = Math.round(ratio * steps - 0.5); - idx = Math.min(step, this.settings.allowedValues.length - 1); - return this.settings.allowedValues[idx]; - } else { - range = this.getRange(); - rawValue = ratio * (range.max - range.min) + range.min; - return this.nearestValidValue(rawValue); - } - }; - - SimpleSlider.prototype.valueChanged = function(value, ratio, trigger) { - var eventData; - if (value.toString() === this.value.toString()) { - return; - } - this.value = value; - eventData = { - value: value, - ratio: ratio, - position: ratio * this.slider.outerWidth(), - trigger: trigger, - el: this.slider - }; - return this.input.val(value).trigger($.Event("change", eventData)).trigger("slider:changed", eventData); - }; - - return SimpleSlider; - - })(); - $.extend($.fn, { - simpleSlider: function() { - var params, publicMethods, settingsOrMethod; - settingsOrMethod = arguments[0], params = 2 <= arguments.length ? __slice.call(arguments, 1) : []; - publicMethods = ["setRatio", "setValue"]; - return $(this).each(function() { - var obj, settings; - if (settingsOrMethod && __indexOf.call(publicMethods, settingsOrMethod) >= 0) { - obj = $(this).data("slider-object"); - return obj[settingsOrMethod].apply(obj, params); - } else { - settings = settingsOrMethod; - return $(this).data("slider-object", new SimpleSlider($(this), settings)); - } - }); - } - }); - return $(function() { - return $("[data-slider]").each(function() { - var $el, allowedValues, settings, x; - $el = $(this); - settings = {}; - allowedValues = $el.data("slider-values"); - if (allowedValues) { - settings.allowedValues = (function() { - var _i, _len, _ref, _results; - _ref = allowedValues.split(","); - _results = []; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - x = _ref[_i]; - _results.push(parseFloat(x)); - } - return _results; - })(); - } - if ($el.data("slider-range")) { - settings.range = $el.data("slider-range").split(","); - } - if ($el.data("slider-step")) { - settings.step = $el.data("slider-step"); - } - settings.snap = $el.data("slider-snap"); - settings.equalSteps = $el.data("slider-equal-steps"); - if ($el.data("slider-theme")) { - settings.theme = $el.data("slider-theme"); - } - if ($el.attr("data-slider-highlight")) { - settings.highlight = $el.data("slider-highlight"); - } - if ($el.data("slider-animate") != null) { - settings.animate = $el.data("slider-animate"); - } - return $el.simpleSlider(settings); - }); - }); -})(this.jQuery || this.Zepto, this); From 23bd8adf19e1ddf8af3fce5613c63b3e5e5f3d09 Mon Sep 17 00:00:00 2001 From: Pratik Soni Date: Sun, 1 Jun 2025 07:19:35 -0500 Subject: [PATCH 2/2] Updating slider css --- src/options/options.html | 4 ++-- src/options/res/options.css | 20 +++++++++----------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/options/options.html b/src/options/options.html index 162df01..f20e14d 100644 --- a/src/options/options.html +++ b/src/options/options.html @@ -67,7 +67,7 @@
Scrolling Speed :
- +
@@ -111,7 +111,7 @@
Transparency :
- +
diff --git a/src/options/res/options.css b/src/options/res/options.css index 57c6ff6..efabcfa 100644 --- a/src/options/res/options.css +++ b/src/options/res/options.css @@ -128,11 +128,6 @@ a.mylink { display: none; } */ -[class^=slider] { - display: inline-block; - vertical-align: middle; -} - body { background-color: rgba(155, 155, 155, 0.2); margin: 79.5px 0 0 0; /* This margin is the height of the header section */ @@ -213,6 +208,13 @@ hr { text-decoration: none; } +.slider { + width: 300px; + display: inline-block; + vertical-align: middle; +} + + @media screen and (max-width: 750px) { .mainContentWidth { width: 600px; @@ -222,7 +224,7 @@ hr { width: 30%; } - #scrollSpeedSliderId-slider { + .slider { width: 280px; } @@ -257,7 +259,7 @@ hr { margin-top: 10px; } - #scrollSpeedSliderId-slider { + .slider { width: 140px; } @@ -265,10 +267,6 @@ hr { margin-left: 0px !important; } - #transparencySliderId-slider { - width: 190px; - } - #transparencyImgId { margin-left: 0px !important; }