Add on-off switch to popup

Anna-Assistant · Oct 28, 2017 · be6d47f · be6d47f
1 parent 32fcb8e
commit be6d47f
Show file tree

Hide file tree

Showing 9 changed files with 667 additions and 10 deletions.
diff --git a/css/on-off-switch.css b/css/on-off-switch.css
@@ -0,0 +1,141 @@
+.on-off-switch{
+    position:relative;
+    cursor:pointer;
+    overflow:hidden;
+    user-select:none;
+}
+
+.on-off-switch-track{
+    position:absolute;
+    border : solid #888;
+    z-index:1;
+    background-color: #fff;
+    overflow:hidden;
+}
+
+/* semi transparent white overlay */
+.on-off-switch-track-white{
+    background-color:#FFF;
+    position:absolute;
+    opacity:0.2;
+    z-index:30;
+}
+/* Track for "on" state */
+.on-off-switch-track-on{
+    background-color:#009966;
+    border-color:#008844;
+    position:absolute;
+    z-index:10;
+    overflow:hidden;
+}
+/* Track for "off" state */
+.on-off-switch-track-off{
+    position:absolute;
+    border-color:#CCC;
+    z-index:1;
+}
+
+.on-off-switch-thumb{
+    position:absolute;
+    z-index:2;
+    overflow:hidden;
+}
+
+.on-off-switch-thumb-shadow{
+    opacity:0.5;
+    border:1px solid #000;
+    position:absolute;
+}
+
+.track-on-gradient, .track-off-gradient{
+
+    background: -webkit-linear-gradient(180deg,rgba(0,0,0,0.2), rgba(0,0,0,0)); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* Standard syntax */
+    position:absolute;
+    width:100%;
+    height:5px;
+}
+
+
+.on-off-switch-thumb-color{
+    background: -webkit-linear-gradient(45deg, #BBB, #FFF); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(45deg, #BBB, #FFF); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(45deg, #BBB, #FFF); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(45deg, #BBB, #FFF); /* Standard syntax */
+    background-color:#F0F0F0;
+    position:absolute;
+}
+
+.on-off-switch-thumb-off{
+    border-color:#AAA;
+    position:absolute;
+}
+.on-off-switch-thumb-on{
+    border-color:#008855;
+    z-index:10;
+}
+.on-off-switch-text{
+    width:100%;
+    position:absolute;
+    font-family:arial;
+    user-select:none;
+    font-size:10px;
+}
+
+.on-off-switch-text-on{
+    color:#FFF;
+    text-align:left;
+}
+.on-off-switch-text-off{
+    color:#000;
+    text-align:right;
+}
+/* Mouse over thumb effect */
+.on-off-switch-thumb-over{
+    background-color:#F5F5F5;
+    background: -webkit-linear-gradient(45deg, #CCC, #FFF); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(45deg, #CCC, #FFF); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(45deg, #CCC, #FFF); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(45deg, #CCC, #FFF); /* Standard syntax */
+
+}
+#rate{
+    display: inline-block;
+  position: absolute;
+  outline:none;
+  bottom:0; 
+    left: 0; 
+  outline: none;
+  font-family: Roboto-Medium;
+  font-size: 15px;
+  color: #646464;
+  cursor: pointer;
+  text-decoration: none;
+}
+#rate:hover{
+
+}
+#howto{
+    display: inline-block;
+     position: absolute;
+bottom:0; 
+    right: 0; 
+  outline:none;
+  outline: none;
+  font-family: Roboto-Medium;
+  font-size: 15px;
+  color: #646464;
+  cursor: pointer;
+  text-decoration: none;
+}
+#howto:hover{
+
+}
+body {
+  -webkit-user-select: none;
+     -moz-user-select: -moz-none;
+      -ms-user-select: none;
+          user-select: none;
+}
diff --git a/js/jquery-1.11.2.min.js b/js/jquery-1.11.2.min.js
diff --git a/js/on-off-switch-onload.js b/js/on-off-switch-onload.js
@@ -0,0 +1,38 @@
+
+if (!DG)var DG = {};
+
+DG.OnOffSwitchAuto = function (config) {
+
+    var properties = DG.OnOffSwitchProperties;
+
+    $( document ).ready(function() {
+        if(config.cls){
+            var els = $(config.cls);
+            var index = 0;
+            for(var i=0,len=els.length;i<len;i++){
+                var elementConfig = jQuery.extend({}, config);
+                var el = $(els[i]);
+                if(!els[i].id){
+                    els[i].id = "dg-switch-" + index;
+                    index++;
+                }
+                elementConfig.el = "#" + els[i].id
+
+                for(var j=0;j<properties.length;j++){
+                    var attr = "data-"+ properties[j];
+                    var val = el.attr(attr);
+                    if(val){
+                        elementConfig[properties[j]] = val;
+                    }
+                }
+
+                new DG.OnOffSwitch(
+                    elementConfig
+                );
+            }
+        }
+    });
+
+
+};
+