summaryrefslogtreecommitdiff
path: root/ext/bg
diff options
context:
space:
mode:
Diffstat (limited to 'ext/bg')
-rw-r--r--ext/bg/context.html65
-rw-r--r--ext/bg/js/context.js19
-rw-r--r--ext/bg/legal.html1
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)&#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>