Add a share button and a popout

Doesn't actually do anything though. (See #18)
controversial · Jun 17, 2016 · d7a1c10 · d7a1c10
1 parent df987ff
commit d7a1c10
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 10 deletions.
diff --git a/css/buttongroup.css b/css/buttongroup.css
@@ -7,7 +7,7 @@
 
   z-index: 2;
   border-radius: 7px;
-  overflow: hidden;
+  overflow: visible;
   border: 1px solid #aaa;
 }
 
@@ -27,3 +27,29 @@
 .button-container button:first-of-type {
   border-top: none;
 }
+
+/* Fancy expanding input */
+.button-container div {
+  /* Border on 3 sides */
+  border-top-left-radius: 7px;
+  border-bottom-left-radius: 7px;
+  border: 1px solid #aaa;
+  border-right: none;
+
+  right: -100px;
+  width: 150px;
+  height: 40px;
+  padding: 5px;
+
+  position: absolute;
+  display: none;
+}
+
+.button-container.showpopout {
+  border-top-left-radius: 0;
+}
+
+.button-container.showpopout div {
+  right: 40px;
+  display: block;
+}
diff --git a/index.html b/index.html
@@ -64,7 +64,8 @@
 
   <!-- The buttons (about, github, etc) -->
   <div id="buttons" class="button-container transparent-blur">
-    <button id="twitter" type="button" title="Share Wikipedia Map on Twitter">
+    <div>Coming soon...</div>
+    <button id="share" type="button" title="Share your graph">
       <i class="icon ion-android-share"></i>
     </button>
     <button id="github" type="button" title="Visit Wikipedia Map on GitHub">
@@ -153,13 +154,16 @@ <h1>Wikipedia Map</h1>
 
 
   <!-- 3rd Party -->
-  <!--Load vis.js (just Network)-->
+  <!-- Load vis.js (just Network) -->
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.0/vis-network.min.js"> </script>
+  <!-- Load clipboard.js -->
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"> </script>
   <!-- Load marked for rendering README.md -->
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"> </script>
   <!-- Load Shepherd and Tether for the tour -->
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.2/js/tether.min.js"> </script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/shepherd/1.7.0/js/shepherd.min.js"> </script>
+
   <!-- My Stuff -->
   <!-- Load API functions -->
   <script type="text/javascript" src="./js/api.js"> </script>

diff --git a/js/bindings.js b/js/bindings.js
@@ -100,13 +100,14 @@ window.onload = function() {
 
   // Bind twitter button
   var sharebutton = document.getElementById("share");
+  var buttons = document.getElementById("buttons");
   sharebutton.onclick = function(event) {
-    var url = "https://twitter.com/intent/tweet" +
-    "?text=" + encodeURIComponent("Explore topics with Wikipedia Map! Check out") +
-    "&url="  + encodeURIComponent("http://luke.deentaylor.com/wikipedia/") +
-    "&via="  + encodeURIComponent("1Defenestrator");
-    var top = window.outerHeight/2 - 210;
-    var left = window.outerWidth/2 - 275;
-    window.open(url, 0, "width=550, height=420, toolbar=0, status=0, top="+top+", left="+left);
+    // Toggle rounding on the top left corner of the button group
+    buttons.className = buttons.className.indexOf("showpopout") === -1 ?
+      "button-container transparent-blur showpopout" :
+      "button-container transparent-blur";
+    sharebutton.innerHTML = sharebutton.innerHTML.indexOf("close") === -1 ?
+      "<i class=\"icon ion-close\"></i>":
+      "<i class=\"icon ion-android-share\"></i>";
   };
 };