Revamp of perma/full link. Addresses #112

etc/config/gcc-explorer.lud-ldnmg01.properties

@@ -1,2 +1,2 @@
 language=C++
-clientURLShortener=none
+clientURLShortener=google

static/ext/clippy.svg

@@ -0,0 +1,3 @@
+<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
+  <path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
+</svg>

static/gcc.css

@@ -1,5 +1,5 @@
 body {
-    padding-top: 56px;
+    padding-top: 58px;
     padding-bottom: 40px;
 }
 

static/gcc.js

@@ -129,29 +129,26 @@ function saveFileAs() {
     });
 }
 
-function makePermalink() {
-    $('#permalink').val('');
-
-    shortenURL(window.location.href.split('#')[0] + '#' + serialiseState(),
-        function (shorturl) {
-            $('#permalink').val(shorturl);
-        });
-}
-
 function hidePermalink() {
-    if ($('.files .permalink').hasClass('active')) {  // do nothing if already hidden.
-        togglePermalink();
+    if ($('.files .permalink-collapse').hasClass('in')) {  // do nothing if already hidden.
+        $('.files .permalink-collapse').collapse('hide');
     }
 }
 
-function togglePermalink() {
-    if (!$('.files .permalink').hasClass('active')) {
-        $('.files .permalink').addClass('active');
+function showPermalink(short) {
+    if (!$('.files .permalink-collapse').hasClass('in')) {
         $('.files .permalink-collapse').collapse('show');
-        makePermalink();
+    }
+    $('#permalink').val('');
+
+    var fullUrl = window.location.href.split('#')[0] + '#' + serialiseState();
+    if (short) {
+        shortenURL(fullUrl,
+            function (shortUrl) {
+                $('#permalink').val(shortUrl);
+            });
     } else {
-        $('.files .permalink-collapse').collapse('hide');
-        $('.files .permalink').removeClass('active');
+        $('#permalink').val(fullUrl);
     }
 }
 
@@ -343,10 +340,16 @@ function initialise(options) {
         saveFileAs();
         return false;
     });
-    $('.files .permalink').click(function (e) {
-        togglePermalink(e);
+    $('.files .fulllink').click(function (e) {
+        showPermalink(false);
         return false;
     });
+    $('.files .shortlink').click(function (e) {
+        showPermalink(true);
+        return false;
+    });
+
+    new Clipboard('.btn');
 
     $('.filter button.btn').click(function (e) {
         $(e.target).toggleClass('active');

static/index.html

@@ -13,6 +13,7 @@
         <script src="asm-mode.js"></script>
         <script src="ext/jquery/jquery-2.2.2.min.js"></script>
         <script src="ext/rison.js"></script>
+        <script src="ext/clipboard.min.js"></script>
         <script src="compiler.js"></script>
         <script src="gcc.js"></script>
         <script src="ext/bootstrap/js/bootstrap.min.js"></script>
@@ -113,23 +114,19 @@
                         <button class="btn btn-sm load">Load</button>
                         <button class="btn btn-sm save">Save</button>
                         <button class="btn btn-sm saveas">Save as...</button>
-                        <button class="btn btn-sm permalink">Permalink</button>
-                        <!--<div class="btn-group">-->
-                            <!--<button type="button" class="btn">Shortlink</button>-->
-                            <!--<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"-->
-                                    <!--aria-haspopup="true" aria-expanded="false">-->
-                                <!--<span class="caret"></span>-->
-                            <!--</button>-->
-                            <!--<ul class="dropdown-menu">-->
-                                <!--<li><a href="#">Shortlink</a></li>-->
-                                <!--<li><a href="#">Permalink</a></li>-->
-                                <!--<li><a href="#">Gistlink</a></li>-->
-                            <!--</ul>-->
-                        <!--</div>-->
+                        <button class="btn btn-sm fulllink" title="Permanent, full URL to this page">Full link</button>
+                        <button class="btn btn-sm shortlink" title="Permanent link to this page as a short link">Short link</button>
                     </div>
                     <div class="collapse permalink-collapse">
-                        <label>Permalink: <input class="input-uneditable" type="text" placeholder="Loading" readonly size="1024"
-                                                 id="permalink"></input></label>
+                        <div class="input-group input-grou-sm permalink">
+                            <input type="text" class="form-control input-sm" placeholder="Loading" readonly id="permalink" size="1024">
+                            <span class="input-group-btn">
+                                <button class="btn btn-sm btn-default clippy" type="button" data-clipboard-target="#permalink"
+                                        title="Copy to clipboard">
+                                    <img src="ext/clippy.svg" class="clippy" width="13px" alt="Copy to clipboard">
+                                </button>
+                            </span>
+                        </div>
                     </div>
                 </form>
             </div>

static/urlshorten-google.js

@@ -1,12 +1,16 @@
 function googleJSClientLoaded() {
     gapi.client.setApiKey(OPTIONS.gapiKey);
-    gapi.client.load('urlshortener', 'v1', makePermalink);
+    gapi.client.load('urlshortener', 'v1', function () {
+        shortenURL(googleJSClientLoaded.url, googleJSClientLoaded.done);
+    });
 }
 
 function shortenURL(url, done) {
     if (!window.gapi || !gapi.client) {
         // Load the Google APIs client library asynchronously, then the
         // urlshortener API, and finally come back here.
+        googleJSClientLoaded.url = url;
+        googleJSClientLoaded.done = done;
         $(document.body).append('<script src="https://apis.google.com/js/client.js?onload=googleJSClientLoaded">');
         return;
     }