projects / labelle.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (from parent 1: 2c38803)
Handle link nature of buttons in a nicer way by preventing defaults.
authorJoe Wreschnig <joe.wreschnig@gmail.com>
Thu, 29 May 2014 22:29:53 +0000 (00:29 +0200)
committerJoe Wreschnig <joe.wreschnig@gmail.com>
Thu, 29 May 2014 22:29:53 +0000 (00:29 +0200)
acnl-outfit.js patch | blob | history
index.html patch | blob | history

diff --git a/acnl-outfit.js b/acnl-outfit.js
index 333335b..018fe03 100644 (file)
--- a/acnl-outfit.js
+++ b/acnl-outfit.js
@@ -124,7 +124,7 @@ function litanize (names, link) {
     return names.join(names.length == 2 ? " " : ", ");        
 }
 
-function litanizeElement (eid, tid) {
+function litanizeElement (eid, tid, ev) {
     var o = outfit();
     document.getElementById(eid).innerHTML = litanize(o, true) + "?";
     // TODO: This often generates > 140 characters. Do I care?
@@ -135,4 +135,6 @@ function litanizeElement (eid, tid) {
                 choice(["Going out in ",
                         "Labelle suggested ",
                         "I'll wear "]) + litanize(o, false) + "."));
+    if (ev)
+        ev.preventDefault();
 }
diff --git a/index.html b/index.html
index ac2aadc..0024c21 100644 (file)
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
 
       #buttons { text-align: center }
 
-      a.button {
+      .button {
           font-size: 2em;
           text-decoration: none;
           background-color: #eee;
@@ -33,14 +33,14 @@
           white-space: nowrap;
       }
 
-      #twitter-share-button {
+      .button.twitter {
           padding: 2px 5px 2px 0.9em;
-          background: url('twitter.png') 0.2em center no-repeat #EEEEEE;
+          background: url('twitter.png') 0.2em center no-repeat #eee;
       }
   }
     </style>
   </head>
-  <body onload='litanizeElement("wearing", "twitter-share-button");'>
+  <body onload='litanizeElement("wearing", "share-button");'>
     <header>
       <a href="http://yukkurigames.com" id="header-logo">
         <img src="/logotype_horizontal_1.png" class="logo"
@@ -66,11 +66,12 @@
         </div>
       </div>
     <div id="buttons">
-      <a onclick='litanizeElement("wearing", "twitter-share-button");' class="button" href="#">How gauche.</a>
-      <a id="twitter-share-button" target="_blank" class="button"
+      <a onclick='litanizeElement("wearing", "share-button", event);'
+         class="button" href="">How gauche.</a>
+      <a id="share-button" target="_blank" class="twitter button"
          href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">Great idea!</a>
     </div>
-    <hr />
+    <hr>
     <dl class="downplay">
       <dt>What is this?</dt>
       <dd>
@@ -113,10 +114,11 @@
         due to its size (estimated ~150MB). If you have one and want
         to host it, let me know.
       </dd>
-      
-      <dt>It generated an invalid outfit / sentence / MoriDB link.<br/>
-        It can't generate some valid outfit.<br/>
-      You're missing my favorite item.</dt>
+      <dt>
+        It generated an invalid outfit / sentence / MoriDB link.<br>
+        It can't generate some valid outfit.<br>
+        You're missing my favorite item.
+      </dt>
       <dd>
         Email me (joe.wreschnig at gmail) with the details,
         please. I'm certain there's still miscategorized caps/hats
The Labelle Litanizer generates random Animal Crossing: New Leaf outfits.