diff options
| 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/bg | |
| parent | cf18e3b42e0fa171b9ec9af4c534a962d347e155 (diff) | |
Optimize toggle on the context popup window
Remove bootstrap-toggle dependency
Diffstat (limited to 'ext/bg')
| -rw-r--r-- | ext/bg/context.html | 65 | ||||
| -rw-r--r-- | ext/bg/js/context.js | 19 | ||||
| -rw-r--r-- | ext/bg/legal.html | 1 |
3 files changed, 74 insertions, 11 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) (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> |