add a solo/everyone switch to the programmer preview (issue #113)

First commit as a proof of concept This is juste demonstrating that we do manage to hide others layers at will.
jonathanperret · Sep 18, 2018 · 8fa1a91 · 8fa1a91
1 parent 93879a0
commit 8fa1a91
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 55 deletions.
diff --git a/public/paysagerenderer.js b/public/paysagerenderer.js
@@ -89,6 +89,7 @@ var Paysage = window.Paysage || {};
 
   function createCanvas (id) {
     canvas[id] = document.createElement('canvas');
+    canvas[id].setAttribute('id', id);
     container.appendChild(canvas[id]);
   }
 

diff --git a/public/programmerjs/previewmanagement.js b/public/programmerjs/previewmanagement.js
@@ -22,5 +22,33 @@
     }
   }
 
+  var solo = false;
+  function switchSoloEveryone (event) {
+    event.preventDefault();
+    if (solo) {
+      solo = false;
+
+      $('#solo').hide();
+      $('#everyOne').show();
+
+      $('canvas', $('#viewerframe').contents()).each(function () {
+        $(this).show(200);
+      });
+    } else {
+      solo = true;
+      var codeid = document.getElementById('codeid').value;
+
+      $('#everyOne').hide();
+      $('#solo').text(codeid).show();
+
+      $('canvas', $('#viewerframe').contents()).each(function () {
+        if (this.getAttribute('id') !== codeid) {
+          $(this).hide(200);
+        }
+      });
+    }
+  }
+
   $('#previewonoff').on('change', switchframe);
+  $('#showall').on('change', switchSoloEveryone);
 })();
diff --git a/source/stylesheets/programmer.less b/source/stylesheets/programmer.less
@@ -204,67 +204,72 @@ body {
   width: 60px;
   height: 34px;
   margin-top: 6px;
-}
 
-.switch input {display:none;}
-.switch-label {
-  font-size:2rem;
-  position: absolute;
-  width: 140px;
-  top: 0;
-  left: 70px;
-  right: 0;
-  bottom: 0;
-  cursor: pointer;
-}
+  input {
+    display:none;
+  }
 
-#previewisoff {display: none;}
+  .switch-label:last-of-type {
+    display: none;
+  }
 
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
+  .switch-label {
+    font-size:2rem;
+    position: absolute;
+    width: 140px;
+    top: 0;
+    left: 70px;
+    right: 0;
+    bottom: 0;
+    cursor: pointer;
+  }
 
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
 
-input:checked + .slider {
-  background-color: black;
-}
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
 
-input:focus + .slider {
-  box-shadow: 0 0 1px black;
-}
+  input:checked + .slider {
+    background-color: black;
+  }
 
-input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
-}
+  input:focus + .slider {
+    box-shadow: 0 0 1px black;
+  }
 
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
-}
+  input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+  }
 
-.slider.round:before {
-  border-radius: 50%;
+  /* Rounded sliders */
+  .slider.round {
+    border-radius: 34px;
+  }
+
+  .slider.round:before {
+    border-radius: 50%;
+  }
 }
 
 #objects {

diff --git a/views/programmer.hbs b/views/programmer.hbs
@@ -43,9 +43,14 @@
         <label class="switch">
           <input id="previewonoff" type="checkbox" autocomplete="off" checked>
           <span class="slider round"></span>
-        <span class="switch-label" id="previewison">preview is on</span>
-        <span class="switch-label" id="previewisoff">preview is off</span>
-
+          <span class="switch-label" id="previewison">preview is on</span>
+          <span class="switch-label" id="previewisoff">preview is off</span>
+        </label>
+        <label class="switch" style="left:150px">
+          <input id="showall" type="checkbox" autocomplete="off" checked>
+          <span class="slider round"></span>
+          <span class="switch-label" id="everyOne">everyone</span>
+          <span class="switch-label" id="solo">solo</span>
         </label>
         <a href="/playground/{{playgroundid}}" target="_blank" id="openinnewwindow">open {{playgroundid}} in new window &#x279a;</a>
     </div>