diff --git a/css/dock-buttons.css b/css/dock-buttons.css index b9744cf..f74eaca 100644 --- a/css/dock-buttons.css +++ b/css/dock-buttons.css @@ -48,4 +48,21 @@ .dockButtonImage { background-size: 'cover'; -} \ No newline at end of file +} + +/*The a href container/main dock button container*/ +.dockLink { + /*Act as div*/ + display: block; + + /*Remove outlines*/ + text-decoration: none; + outline: 0; + border: none; + -moz-outline-style: none; + + /*Disable dragging*/ + user-select: none; + user-drag: none; + -webkit-user-drag: none; +} diff --git a/css/web-menu.css b/css/web-menu.css index e760227..9cb1438 100644 --- a/css/web-menu.css +++ b/css/web-menu.css @@ -242,4 +242,21 @@ -webkit-transform: scale(1); transform: scale(1); } +} + +/*The a href container/main web menu button container*/ +.webMenuLink { + /*Act as div*/ + display: block; + + /*Remove outlines*/ + text-decoration: none; + outline: 0; + border: none; + -moz-outline-style: none; + + /*Disable dragging*/ + user-select: none; + user-drag: none; + -webkit-user-drag: none; } \ No newline at end of file diff --git a/js/centered-box.js b/js/centered-box.js index 37797f0..6346097 100644 --- a/js/centered-box.js +++ b/js/centered-box.js @@ -22,6 +22,4 @@ const toggleCenteredBox = () => { // Show Web menu showCenteredBox(); } - - console.log('toggle web menu'); } \ No newline at end of file diff --git a/js/dock-buttons.js b/js/dock-buttons.js index 5e87130..4fdae2e 100644 --- a/js/dock-buttons.js +++ b/js/dock-buttons.js @@ -1,12 +1,5 @@ var dock = document.getElementById('dock'); -// Create mouse event for passed div -const addMouseUpEvent = (li, url) => { - li.onmouseup = () => { - window.location.href = encodeURI(url); - } -} - // Generate button from user const generateFromManual = (id, icon, callback) => { @@ -28,10 +21,6 @@ const generateFromManual = (id, icon, callback) => { dock.appendChild(dockButton); } -// Create callback event for onmouse up -const addCallbackEvent = (element, callback) => { - element.onmouseup = callback; -} // Generate buttons from array const generateFromList = () => { @@ -42,10 +31,13 @@ const generateFromList = () => { var icon = dockSites[i].icon; var url = dockSites[i].url; + var aDock = document.createElement('a'); + aDock.className = 'dockLink'; + aDock.href = url; + var dockButton = document.createElement('div'); dockButton.id = 'button' + i; dockButton.className = 'dockButton'; - addMouseUpEvent(dockButton, url); var buttonImage = document.createElement('div'); buttonImage.id = 'buttonImage' + i; @@ -55,7 +47,8 @@ const generateFromList = () => { // Append divs dockButton.appendChild(buttonImage); - dock.appendChild(dockButton); + aDock.appendChild(dockButton); + dock.appendChild(aDock); }; } diff --git a/js/web-menu.js b/js/web-menu.js index d02f12c..6a8ea3e 100644 --- a/js/web-menu.js +++ b/js/web-menu.js @@ -9,16 +9,11 @@ let webItemFocus; let webListIndex = 0; // Create mouse event for passed li -const createMouseUpEvent = (li, url) => { +const createCallback = (li, url) => { // Create a callback property for the passed li li.callback = () => { window.location.href = encodeURI(url); } - - // Create onmouseup event for the li - li.onmouseup = () => { - li.callback(); - } } // Sort list alphabetically @@ -41,7 +36,11 @@ const populateWebMenu = () => { var li = document.createElement('li'); // Add mouseup event - createMouseUpEvent(li, url); + createCallback(li, url); + + var aWebLink = document.createElement('a'); + aWebLink.className = 'webMenuLink'; + aWebLink.href = url; // Create an outer div, child of li let webItemDiv = document.createElement('div') @@ -79,7 +78,9 @@ const populateWebMenu = () => { webItemBody.appendChild(webItemIconContainer); webItemBody.appendChild(webItemName); - li.appendChild(webItemDiv); + aWebLink.appendChild(webItemDiv); + + li.appendChild(aWebLink); webMenuList.appendChild(li); }