CSS switch for easier show/hide edges

explorerjs.html

@@ -193,9 +193,6 @@
               </table>
             </li> -->
 
-
-
-
           </ul>
 
 
@@ -253,6 +250,16 @@
 
             </li> <!-- /checkbox group -->
 
+            <li style="margin: 20px 0 0 10px;">
+              <div class="onoffswitch">
+                <input type="checkbox" name="edges-switch" class="onoffswitch-checkbox" id="edges-switch" checked>
+                <label class="onoffswitch-label" for="edges-switch">
+                  <span id="edges-switch-inner-label" class="onoffswitch-inner"></span>
+                  <span class="onoffswitch-switch"></span>
+                </label>
+              </div>
+            </li>
+
           </ul>
 
 

libs/css2/twjs.css

@@ -253,6 +253,63 @@ p.micromessage{
 }
 
 
+
+/* switch css -- generic (src: proto.io/freebies/onoff/)*/
+.onoffswitch {
+    position: relative; width: 38px;
+    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+}
+.onoffswitch-checkbox {
+    display: none;
+}
+.onoffswitch-label {
+    display: block; overflow: hidden; cursor: pointer;
+    border: 1px solid #B5B5B5; border-radius: 5px;
+}
+.onoffswitch-inner {
+    display: block; width: 200%; margin-left: -100%;
+    transition: margin 0.15s ease-in 0s;
+}
+.onoffswitch-inner:before, .onoffswitch-inner:after {
+    display: block; float: left; width: 50%; height: 15px; padding: 0; line-height: 15px;
+    font-size: 10px; color: white;
+    box-sizing: border-box;
+}
+.onoffswitch-switch {
+    display: block; width: 15px; margin: 0px;
+    background: white;
+    position: absolute; top: 0; bottom: 0;
+    left:0;
+    border: 1px solid #B5B5B5; border-radius: 9px;
+    transition: all 0.15s ease-in 0s;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+    margin-left: 0;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+    left: 24px;
+}
+
+/* switch css -- Edges instance */
+#edges-switch-inner-label:before {
+    content: "Edges";
+    font-size: 7px;
+    font-weight: normal;
+    padding-left: 3px;
+    background-color: #27C470; color: #333333;
+}
+#edges-switch-inner-label:after {
+    content: "Edges";
+    font-size: 7px;
+    font-weight: normal;
+    padding-right: 3px;
+    background-color: #EEEEEE; color: #999999;
+    text-align: right;
+}
+
+
+
+
 /* viewport-specific variants */
 
 /* collapsed variants */

tinawebJS/Tinaweb.js

@@ -862,6 +862,11 @@ TinaWebJS = function ( sigmacanvas ) {
             }
         });
 
+
+        $("#edges-switch").click(function () {
+            sigma_utils.toggleEdges()
+        });
+
         NodeWeightFilter ( categories , "#slidercat0nodesweight" ,  categories[0],  "type" ,"size");
 
         EdgeWeightFilter("#slidercat0edgesweight", "label" , "nodes1", "weight");