Merge pull request #8236 from EverythingMe/shortcuts-to-canvas

[Bug 842213] Change shortcuts to use canvas instead of elements [c=crdlc]

apps/homescreen/everything.me/config/config.js

@@ -63,25 +63,25 @@ Evme.__config = {
     "maxHistoryEntries": "10",
     "iconsGroupSettings": [
         {
-            "x": 14,
+            "x": 28,
             "y": 13,
-            "rotate": 9,
             "size": 33,
+            "darken": 0.5,
             "shadowOffset": 2,
             "shadowBlur": 1,
             "shadowOpacity": 0.2
         },
         {
-            "x": 8,
+            "x": 22,
             "y": 7,
-            "rotate": -15,
             "size": 33,
+            "darken": 0.3,
             "shadowOffset": 2,
             "shadowBlur": 2,
             "shadowOpacity": 0.2
         },
         {
-            "x": -6,
+            "x": 8,
             "y": 3,
             "size": 38,
             "shadowOffset": 4,

apps/homescreen/everything.me/js/everything.me.js

@@ -75,6 +75,8 @@ var EverythingME = {
                     'js/Core.js',
                     'config/config.js',
                     'config/shortcuts.js',
+                    'js/developer/utils.1.3.js',
+                    'js/helpers/Utils.js',
                     'js/Brain.js',
                     'modules/Apps/Apps.js',
                     'modules/BackgroundImage/BackgroundImage.js',
@@ -90,12 +92,10 @@ var EverythingME = {
                     'modules/ConnectionMessage/ConnectionMessage.js',
                     'modules/SmartFolder/SmartFolder.js',
                     'js/helpers/Storage.js',
-                    'js/developer/utils.1.3.js',
                     'js/plugins/Scroll.js',
                     'js/external/uuid.js',
                     'js/api/apiv2.js',
                     'js/api/DoATAPI.js',
-                    'js/helpers/Utils.js',
                     'js/helpers/EventHandler.js',
                     'js/helpers/Idle.js',
                     'js/plugins/Analytics.js',

apps/homescreen/everything.me/js/helpers/Utils.js

@@ -21,10 +21,13 @@ Evme.Utils = new function Evme_Utils() {
             "GET_APP_NAME": "get-app-name"
         };
 
+
+    this.devicePixelRatio =  window.innerWidth / 320;
+
     this.isKeyboardVisible = false;
 
     this.EMPTY_IMAGE = "../../images/empty.gif";
-    
+
     this.ICONS_FORMATS = {
         "Small": 10,
         "Large": 20
@@ -195,6 +198,80 @@ Evme.Utils = new function Evme_Utils() {
         img.src = imageSrc;
     };
 
+    this.writeTextToCanvas = function writeTextToCanvas(options) {
+      var context = options.context,
+          text = options.text.split(' '),
+          offset = options.offset || 0,
+          lineWidth = 0,
+          currentLine = 0,
+          textToDraw = [],
+
+          WIDTH = context.canvas.width,
+          FONT_SIZE = 12 * self.devicePixelRatio;
+
+      if (!context || !text) {
+        return false;
+      }
+
+      context.textAlign = 'center';
+      context.textBaseline = 'top';
+      context.fillStyle = 'rgba(255,255,255,1)';
+      context.shadowOffsetX = 1;
+      context.shadowOffsetY = 1;
+      context.shadowBlur = 3;
+      context.shadowColor = 'rgba(0, 0, 0, 0.6)';
+      context.font = 'bold ' + FONT_SIZE + 'px MozTT';
+
+      for (var i=0,word; word=text[i++];) {
+        var size = context.measureText(word).width,
+            draw = false,
+            pushed = false;
+
+        if (lineWidth + size > WIDTH) {
+          draw = true;
+          if (textToDraw.length === 0) {
+            textToDraw.push(word);
+            pushed = true;
+          }
+        }
+
+        if (draw) {
+          drawText(textToDraw, WIDTH/2, offset + currentLine*FONT_SIZE);
+          currentLine++;
+          textToDraw = [];
+          lineWidth = 0;
+        }
+
+        if (!pushed) {
+          textToDraw.push(word);
+          lineWidth += size;
+        }
+      }
+
+      if (textToDraw.length > 0) {
+        drawText(textToDraw, WIDTH/2, offset + currentLine*FONT_SIZE);
+      }
+
+      function drawText(text, x, y) {
+        var isSingleWord = text.length === 1,
+            text = text.join(' '),
+            size = context.measureText(text).width;
+
+        if (isSingleWord && size > WIDTH) {
+          while (size > WIDTH) {
+            text = text.substring(0, text.length-1);
+            size = context.measureText(text + '...').width;
+          }
+
+          text += '...';
+        }
+
+        context.fillText(text, x, y);
+      }
+
+      return true;
+    };
+
     this.isNewUser = function isNewUser() {
         if (newUser === undefined) {
             newUser = !Evme.Storage.get("counter-ALLTIME");

apps/homescreen/everything.me/modules/Apps/Apps.css

@@ -247,27 +247,4 @@ body:not(.istouch) .evme-apps ul li:nth-child(5n+1) {
 
 #evmeContainer.loading-app .evme-apps ul {
     min-height: 100%;
-}
-
-.apps-group {
-    position: relative;
-    width: 64px;
-    height: 64px;
-}
-.apps-group span {
-    position: absolute;
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: contain;
-    -moz-transition: all .4s ease;
-    transition: all .4s ease;
-}
-.apps-group span:nth-child(1) {
-    box-shadow: 0 2px 1px 0 rgba(0, 0, 0, .4);
-}
-.apps-group span:nth-child(2) {
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .5);
-}
-.apps-group span:nth-child(3) {
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .6);
-}
+}