Optimize toggle on the context popup window

Remove bootstrap-toggle dependency
author: toasted-nutbread <toasted-nutbread@users.noreply.github.com> 2019-11-24 11:42:27 -0500
committer: toasted-nutbread <toasted-nutbread@users.noreply.github.com> 2019-11-24 11:42:27 -0500
commit: 10b33dbd20d33b7497f500c11ad343399fc338a9 (patch)
tree: 1ce7dafce5a98a6c87dc1197b3be0ff9e2256ff8 /ext
parent: cf18e3b42e0fa171b9ec9af4c534a962d347e155 (diff)
5 files changed, 74 insertions, 48 deletions
diff --git a/ext/bg/context.html b/ext/bg/context.html
index 7e08dddd..52645022 100644
--- a/ext/bg/context.html
+++ b/ext/bg/context.html
@@ -11,7 +11,6 @@
         <link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128">
         <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css">
-        <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap-toggle/bootstrap-toggle.min.css">
         <style type="text/css">
             body {
                 padding: 10px;
@@ -89,12 +88,73 @@
             .link-group-label {
                 vertical-align: middle;
             }
+
+
+            .toggle {
+                width: 60px;
+                height: 34px;
+                position: relative;
+                overflow: hidden;
+            }
+            .toggle-group {
+                position: absolute;
+                width: 200%;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                user-select: none;
+            }
+            .toggle-group.toggle-group-animated {
+                transition: transform 0.35s;
+            }
+            .toggle-on,
+            .toggle-off {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                margin: 0;
+                border: 0;
+                border-radius: 0;
+            }
+            .toggle-on {
+                padding-right: 24px;
+                left: 0;
+                right: 50%;
+            }
+            .toggle-off {
+                padding-left: 24px;
+                left: 50%;
+                right: 0;
+            }
+            .toggle-handle {
+                position: relative;
+                margin: 0 auto;
+                padding-top: 0;
+                padding-bottom: 0;
+                height: 100%;
+                width: 0;
+                border-width: 0 1px;
+            }
+
+            .toggle>input[type=checkbox] {
+                display: none;
+            }
+            .toggle>input[type=checkbox]:not(:checked)~.toggle-group {
+                transform: translateX(-50%);
+            }
         </style>
     </head>
     <body>
         <div id="mini">
             <div>
-                <input type="checkbox" id="enable-search">
+                <label class="btn btn-primary toggle">
+                    <input type="checkbox" id="enable-search" />
+                    <div class="toggle-group">
+                        <span class="btn btn-primary toggle-on">On</span>
+                        <span class="btn btn-default active toggle-off">Off</span>
+                        <span class="btn btn-default toggle-handle"></span>
+                    </div>
+                </label>
             </div>
             <div class="btn-group">
                 <a title="Search (Alt + Insert)&#10;(Middle click to open in new tab)" class="btn btn-default btn-xs action-open-search"><span class="glyphicon glyphicon-search"></span></a>
@@ -119,7 +179,6 @@
         </div>
 
         <script src="/mixed/lib/jquery.min.js"></script>
-        <script src="/mixed/lib/bootstrap-toggle/bootstrap-toggle.min.js"></script>
 
         <script src="/mixed/js/extension.js"></script>
 
diff --git a/ext/bg/js/context.js b/ext/bg/js/context.js
index 3fb27f0d..5bd6ada4 100644
--- a/ext/bg/js/context.js
+++ b/ext/bg/js/context.js
@@ -64,13 +64,18 @@ $(document).ready(utilAsync(() => {
         url: window.location.href
     };
     apiOptionsGet(optionsContext).then(options => {
-        const toggle = $('#enable-search');
-        toggle.prop('checked', options.general.enable).change();
-        toggle.bootstrapToggle();
-        toggle.change(() => apiCommandExec('toggle'));
+        const toggle = document.querySelector('#enable-search');
+        toggle.checked = options.general.enable;
+        toggle.addEventListener('change', () => apiCommandExec('toggle'), false);
 
-        const toggle2 = $('#enable-search2');
-        toggle2.prop('checked', options.general.enable).change();
-        toggle2.change(() => apiCommandExec('toggle'));
+        const toggle2 = document.querySelector('#enable-search2');
+        toggle2.checked = options.general.enable;
+        toggle2.addEventListener('change', () => apiCommandExec('toggle'), false);
+
+        setTimeout(() => {
+            for (const n of document.querySelectorAll('.toggle-group')) {
+                n.classList.add('toggle-group-animated');
+            }
+        }, 10);
     });
 }));
diff --git a/ext/bg/legal.html b/ext/bg/legal.html
index 377d25ba..3047ab3e 100644
--- a/ext/bg/legal.html
+++ b/ext/bg/legal.html
@@ -41,7 +41,6 @@ and are used in conformance with the Group's <a href="https://www.edrdg.org/edrd
             <h3>Third-Party Software Licenses</h3>
             <ul>
                 <li><a href="https://github.com/twbs/bootstrap/blob/v3.3.7/LICENSE" target="_blank" rel="noopener">Bootstrap v3.3.7</a></li>
-                <li><a href="https://github.com/minhur/bootstrap-toggle/blob/2.2.0/LICENSE" target="_blank" rel="noopener">Bootstrap Toggle v2.2.0</a></li>
                 <li><a href="https://github.com/wycats/handlebars.js/blob/v4.0.6/LICENSE" target="_blank" rel="noopener">Handlebars v4.0.6</a></li>
                 <li><a href="https://github.com/jquery/jquery/blob/3.2.1/LICENSE.txt" target="_blank" rel="noopener">jQuery v3.2.1</a></li>
                 <li><a href="https://github.com/Stuk/jszip/blob/v3.1.3/LICENSE.markdown" target="_blank" rel="noopener">JSZip v3.1.3</a></li>
diff --git a/ext/mixed/lib/bootstrap-toggle/bootstrap-toggle.min.css b/ext/mixed/lib/bootstrap-toggle/bootstrap-toggle.min.css
deleted file mode 100644
index 0d42ed09..00000000
--- a/ext/mixed/lib/bootstrap-toggle/bootstrap-toggle.min.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*! ========================================================================
- * Bootstrap Toggle: bootstrap-toggle.css v2.2.0
- * http://www.bootstraptoggle.com
- * ========================================================================
- * Copyright 2014 Min Hur, The New York Times Company
- * Licensed under MIT
- * ======================================================================== */
-.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
-.toggle{position:relative;overflow:hidden}
-.toggle input[type=checkbox]{display:none}
-.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
-.toggle.off .toggle-group{left:-100%}
-.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
-.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
-.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
-.toggle.btn{min-width:59px;min-height:34px}
-.toggle-on.btn{padding-right:24px}
-.toggle-off.btn{padding-left:24px}
-.toggle.btn-lg{min-width:79px;min-height:45px}
-.toggle-on.btn-lg{padding-right:31px}
-.toggle-off.btn-lg{padding-left:31px}
-.toggle-handle.btn-lg{width:40px}
-.toggle.btn-sm{min-width:50px;min-height:30px}
-.toggle-on.btn-sm{padding-right:20px}
-.toggle-off.btn-sm{padding-left:20px}
-.toggle.btn-xs{min-width:35px;min-height:22px}
-.toggle-on.btn-xs{padding-right:12px}
-.toggle-off.btn-xs{padding-left:12px}
-\ No newline at end of file
diff --git a/ext/mixed/lib/bootstrap-toggle/bootstrap-toggle.min.js b/ext/mixed/lib/bootstrap-toggle/bootstrap-toggle.min.js
deleted file mode 100644
index 37113200..00000000
--- a/ext/mixed/lib/bootstrap-toggle/bootstrap-toggle.min.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/*! ========================================================================
- * Bootstrap Toggle: bootstrap-toggle.js v2.2.0
- * http://www.bootstraptoggle.com
- * ========================================================================
- * Copyright 2014 Min Hur, The New York Times Company
- * Licensed under MIT
- * ======================================================================== */
-+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-lg":"small"===this.options.size?"btn-sm":"mini"===this.options.size?"btn-xs":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b+" active"),e=a('<span class="toggle-handle btn btn-default">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.outerWidth(),d.outerWidth())+e.outerWidth()/2,i=this.options.height||Math.max(c.outerHeight(),d.outerHeight());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),void(a||this.trigger()))},c.prototype.off=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),void(a||this.trigger()))},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){var c=a(this).find("input[type=checkbox]");c.bootstrapToggle("toggle"),b.preventDefault()})}(jQuery);
-//# sourceMappingURL=bootstrap-toggle.min.js.map
-\ No newline at end of file
author	toasted-nutbread <toasted-nutbread@users.noreply.github.com>	2019-11-24 11:42:27 -0500
committer	toasted-nutbread <toasted-nutbread@users.noreply.github.com>	2019-11-24 11:42:27 -0500
commit	10b33dbd20d33b7497f500c11ad343399fc338a9 (patch)
tree	1ce7dafce5a98a6c87dc1197b3be0ff9e2256ff8 /ext
parent	cf18e3b42e0fa171b9ec9af4c534a962d347e155 (diff)