Javascript clean-up in speed dial head

data/speeddial-head.html

@@ -122,43 +122,44 @@
 
     <script type="text/javascript">
 
-    var getAction = function (id)
+    function add_tile (ev) {
-    {
+        ev.preventDefault();
-        var s = document.getElementById(id).childNodes[0];
-        if (s.className == 'preview')
-            return true;
 
         var url = prompt ("{enter_shortcut_address}", "http://");
-        if (!url) return false;
+        if (!url)
+            return false;
+
         if (url.indexOf ("://") == -1)
             url = "http://" + url;
 
+        var id = ev.target.parentNode.parentNode.id;
         console.log ("speed_dial-save-add " + id + " " + url + " ");
-        return false;
     }
 
-    var renameShortcut = function (id)
+    function rename_tile (ev) {
-    {
+        var old_name = ev.target.textContent;
-        var old_name = document.getElementById(id).childNodes[1].textContent;
 
         var name = prompt ("{enter_shortcut_name}", old_name);
-        if (!name) return;
+        if (!name)
+            return;
 
+        var id = ev.target.parentNode.id;
         console.log ("speed_dial-save-rename " + id + " " + name);
     }
 
-    var clearShortcut = function (id)
+    function delete_tile (ev) {
-    {
+        ev.preventDefault();
-        if(!confirm("{are_you_sure}"))
+
+        if (!confirm("{are_you_sure}"))
             return;
 
+        var id = ev.target.parentNode.parentNode.id;
         console.log ("speed_dial-save-delete " + id);
     }
 
 
     var firstNode, secondNode;
     var cursor;
-    var dial = document.getElementsByClassName("shortcut");
 
     var get_dial_div = function (ele) {
         var dial_div;
@@ -167,10 +168,14 @@
         if (ele.className == 'title')
             dial_div = ele.parentNode;
         if (ele.className.indexOf ('shortcut') != -1)
-            dial_dir = ele;
+            dial_div = ele;
         return dial_div;
     }
-    var click = function (ev) {
+
+    function click (ev) {
+        if (ev == undefined)
+            return;
+
         ev.preventDefault();
         var ele = ev.target;
         cursor = ele.style.cursor;
@@ -181,10 +186,13 @@
             eparent.className = 'shortcut selected';
             firstNode = eparent.id;
         }
-        document.RemoveEventListener('click', click, false);
     };
 
-    var up = function (ev) {
+    function up (ev) {
+        if (ev == undefined)
+            return;
+
+        ev.preventDefault();
         ele = ev.target;
         var eparent = get_dial_div (ele);
 
@@ -196,17 +204,19 @@
             swap();
     };
 
-    var over = function (ev) {
+    function over (ev) {
         if (ev == undefined)
             return;
 
+        ev.preventDefault();
         var ele = ev.target;
         var eparent = get_dial_div (ele);
 
+        var dial = document.getElementsByClassName("shortcut");
         if (firstNode != undefined)
         {
             eparent.className = 'shortcut selected';
-            for (var i = 0; i <= dial.length; i++) {
+            for (var i = 0; i < dial.length; i++) {
                 if (eparent.id != firstNode.id && dial[i].id != eparent.id) {
                     dial[i].className = 'shortcut';
                 }
@@ -219,10 +229,33 @@
         console.log ("speed_dial-save-swap " + firstNode + " " + secondNode);
     };
 
-    document.addEventListener('mousedown', click, false);
+    function init () {
-    document.addEventListener('mouseup', up, false);
+        var new_tile = document.getElementsByClassName ("preview new");
-    document.addEventListener('mouseover', over, false);
+        new_tile[0].addEventListener ('click', add_tile, false);
+
+        var titles = document.getElementsByClassName ("title");
+        var len = titles.length;
+        for (var i = 0; i < len; i++) {
+            if (titles[i].parentNode.childNodes[0].className != "preview new")
+                titles[i].addEventListener ('click', rename_tile, false);
+        }
+
+        var crosses = document.getElementsByClassName ("cross");
+        var len = crosses.length;
+        for (var i = 0; i < len; i++)
+            crosses[i].addEventListener ('click', delete_tile, false);
+
+        var occupied_tiles = document.getElementsByClassName ("shortcut");
+        var len = occupied_tiles.length;
+        for (var i = 0; i < len; i++) {
+            if (occupied_tiles[i].childNodes[0].className != "preview new") {
+                occupied_tiles[i].addEventListener('mousedown', click, false);
+                occupied_tiles[i].addEventListener('mouseover', over, false);
+                occupied_tiles[i].addEventListener('mouseup', up, false);
+            }
+        }
+    }
     </script>
 </head>
-<body>
+<body onload="init ();">
     <div id="content">

midori/midori-speeddial.vala

@@ -241,11 +241,11 @@ namespace Midori {
                             }
                             markup.append_printf ("""
                                 <div class="shortcut" id="%u"><div class="preview">
-                                <a class="cross" href="#" onclick='clearShortcut("%u");'></a>
+                                <a class="cross" href="#"></a>
                                 <a href="%s"><img src="data:image/png;base64,%s" title='%s'></a>
-                                </div><div class="title" onclick='renameShortcut("%u");'>%s</div></div>
+                                </div><div class="title">%s</div></div>
                                 """,
-                                slot, slot, uri, encoded ?? "", title, slot, title ?? "");
+                                slot, uri, encoded ?? "", title, title ?? "");
                         }
                         else if (tile != "settings")
                             keyfile.remove_group (tile);
@@ -255,10 +255,10 @@ namespace Midori {
 
                 markup.append_printf ("""
                     <div class="shortcut" id="%u"><div class="preview new">
-                    <a class="add" href="#" onclick='return getAction("%u");'></a>
+                    <a class="add" href="#"></a>
                     </div><div class="title">%s</div></div>
                     """,
-                    next_slot, next_slot, _("Click to add a shortcut"));
+                    next_slot,  _("Click to add a shortcut"));
                 markup.append_printf ("</div>\n</body>\n</html>\n");
                 html = markup.str;
             }