Merge pull request aframevr#53 from fernandojsg/style

Added copy to clipboard button with the uploaded url
YingJiang96 · Sep 8, 2016 · 853ca93 · 853ca93
2 parents 1f5ce0e + a56bb02
commit 853ca93
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 5 deletions.
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,36 @@
+#ui {
+  font-family: Helvetica, Arial, sans-serif;
+  position: absolute;
+  left: 20px;
+  bottom: 20px;
+}
+
+.button {
+  background-color: #ef2d5e;
+  color: #fff;
+  cursor: pointer;
+  font-size: 10px;
+  width: 130px;
+  text-align: center;
+  max-width: 115px;
+  padding: 10px;
+}
+
+.button:hover {
+  background-color: #e42b5a;
+}
+
+#share {
+  display: flex;
+  align-content: center;
+}
+
+#share input {
+  width: 600px;
+  color: #333;
+  text-align: center;
+}
+
+.hide {
+  display: none !important;
+}
diff --git a/index.html b/index.html
@@ -12,9 +12,11 @@
     </script>
     <script src="//ucarecdn.com/widget/2.5.5/uploadcare/uploadcare.full.min.js"></script>
     <script src="vendor/saveas.js"></script>
+    <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.12/dist/clipboard.min.js"></script>
     <!-- app -->
     <script src="src/binarymanager.js"></script>
     <script src="src/main.js"></script>
+    <script src="src/ui2d.js"></script>
     <!-- components -->
     <script src="src/components/brush.js"></script>
     <script src="src/components/json-model.js"></script>
@@ -24,6 +26,8 @@
     <script src="src/brushes/line.js"></script>
     <script src="src/brushes/spheres.js"></script>
     <script src="src/brushes/cubes.js"></script>
+    <!-- css -->
+    <link rel="stylesheet" href="css/main.css">
   </head>
   <body style="background-color: #030404">
     <a-scene antialias="true">
@@ -55,5 +59,12 @@
       </a-entity>
       <a-entity position="0 0 0" id="sky" geometry="primitive:sphere; radius:30; phiLength:360; phiStart:0; thetaLength:90" material="shader:flat; side:back; height:2048; src:#skymap; width:2048"></a-entity>
     </a-scene>
+    http://a-painter.com/?url=
+    <div id="ui">
+      <div id="share" class="hide">
+        <input id="share-url" type="text" value="" readonly/>
+        <div id="copy-toclipboard" data-clipboard-target="#share-url" class="button copy">COPY SHARE URL</div>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/src/components/brush.js b/src/components/brush.js
@@ -27,10 +27,11 @@ AFRAME.registerSystem('brush', {
         this.loadBinary('apainter.bin');
       }
       if (event.keyCode === 85) { // u
+        var baseUrl = 'http://a-painter.aframe.io/?url=';
+
         // Upload
         var dataviews = this.getBinary();
         var blob = new Blob(dataviews, {type: 'application/octet-binary'});
-
         var uploader = 'uploadcare'; // or 'fileio'
         if (uploader === 'fileio') {
           // Using file.io
@@ -42,8 +43,8 @@ AFRAME.registerSystem('brush', {
             if (xhr.readyState == 4) {
               var response = JSON.parse(xhr.response);
               if (response.success) {
-                alert('Drawing uploaded correctly\nPlease use this link to share it:\n' + 'http://dev.fernandojsg.com/a-painter/?url=' + response.link);
-                console.log('Uploaded link: ' + 'http://dev.fernandojsg.com/a-painter/?url=' + response.link);
+                console.log('Uploaded link: ', baseUrl + response.link);
+                document.querySelector('a-scene').emit('drawing-uploaded', {url: baseUrl + response.link});
               }
             } else {
               // alert('An error occurred while uploading the drawing, please try again');
@@ -53,8 +54,8 @@ AFRAME.registerSystem('brush', {
         } else {
           var file = uploadcare.fileFrom('object', blob);
           file.done(function(fileInfo) {
-            alert('Drawing uploaded correctly\nPlease use this link to share it:\n' + 'http://dev.fernandojsg.com/a-painter/?url=' + fileInfo.cdnUrl);
-            console.log('Uploaded link: ' + 'http://dev.fernandojsg.com/a-painter/?url=' + fileInfo.cdnUrl);
+            console.log('Uploaded link: ', baseUrl + fileInfo.cdnUrl);
+            document.querySelector('a-scene').emit('drawing-uploaded', {url: baseUrl + fileInfo.cdnUrl});
           });
         }
       }

diff --git a/src/ui2d.js b/src/ui2d.js
@@ -0,0 +1,10 @@
+window.onload = function(e){
+  var shareDiv = document.getElementById('share');
+  var shareUrl = document.getElementById('share-url');
+  document.addEventListener('drawing-uploaded', function (event) {
+    shareDiv.classList.remove('hide');
+    shareUrl.value = event.detail.url;
+  });
+
+  new Clipboard('.button.copy');
+}