bug fix

ignore firefox issue #14 re-support fullscreen polyfill HTMLCanvasElement.toBlob()
sunghwan2789 · Feb 9, 2016 · 87f01e9 · 87f01e9
1 parent 3477d4e
commit 87f01e9
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 12 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,13 +1,15 @@
 var gulp = require('gulp'),
     usemin = require('gulp-usemin'),
     uglify = require('gulp-uglify'),
-    cssnano = require('gulp-cssnano');
+    cssnano = require('gulp-cssnano'),
+    strip = require('gulp-strip-comments');
 
 gulp.task('default', function() {
     return gulp.src('src/preview.html')
         .pipe(usemin({
             inlinejs: [ uglify() ],
             inlinecss: [ cssnano() ]
         }))
+        .pipe(strip())
         .pipe(gulp.dest('dist/'));
 });
diff --git a/package.json b/package.json
@@ -5,8 +5,9 @@
     "gulp": "^3.9.0",
     "gulp-concat": "^2.6.0",
     "gulp-cssnano": "^2.1.0",
+    "gulp-strip-comments": "^2.2.1",
     "gulp-uglify": "^1.3.0",
     "gulp-usemin": "^0.3.11",
     "gulp-util": "^3.0.6"
   }
-}
+}
diff --git a/src/js/standard/standard.js b/src/js/standard/standard.js
@@ -122,7 +122,13 @@ Standard.prototype.update = function(ctx)
     ctx.shadowColor = '#666';
     ctx.lineCap = 'round';
     ctx.lineJoin = 'round';
-    ctx.font = this.circleRadius + 'px "Comic Sans MS", cursive, sans-serif';
+    try
+    {
+        // this code will fail in Firefox(<~ 44)
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=941146
+        ctx.font = this.circleRadius + 'px "Comic Sans MS", cursive, sans-serif';
+    }
+    catch (e) {}
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
     ctx.translate((Beatmap.WIDTH - Beatmap.MAX_X) / 2, (Beatmap.HEIGHT - Beatmap.MAX_Y) / 2);

diff --git a/src/js/util.js b/src/js/util.js
@@ -34,3 +34,23 @@ Math.ccw = function(a, b, c)
     }
     return 0;
 };
+// https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
+if (!HTMLCanvasElement.prototype.toBlob)
+{
+    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+        value: function (callback, type, quality)
+        {
+
+            var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
+                len = binStr.length,
+                arr = new Uint8Array(len);
+
+            for (var i = 0; i < len; i++)
+            {
+                arr[i] = binStr.charCodeAt(i);
+            }
+
+            callback(new Blob([ arr ], { type: type || 'image/png' }));
+        }
+    });
+}
diff --git a/src/preview.html b/src/preview.html
@@ -2,11 +2,9 @@
 <html>
 <head>
     <meta charset="UTF-8">
-    <!--**********************************************
-        YOU CAN CONTACT ME at sunghwan2789 @ github
-    ***********************************************-->
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <meta name="robots" content="nofollow, noindex, noarchive">
+    <meta name="creator" content="https://github.com/sunghwan2789/osu-Preview">
     <title>미리보기 - osu! 비트맵 미러</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <!-- build:inlinecss -->
@@ -15,13 +13,29 @@
 <body class="h">
     <div id="container" class="x-viewbox"></div>
     <button id="play" class="material-icons">&#xE037;</button>
-    <div id="speed"><button value="1.5">DT</button><button class="e" value="1">-</button><button value="0.75">HT</button></div>
-    <div id="mania"><button value="1">+</button><button id="scroll">20</button><button value="-1">-</button></div>
-    <div id="control"><input id="progress" type="range" min="0" max="0" value="0"><input id="volume" type="range" min="0" max="100" value="100"><button id="fullscreen" class="material-icons">&#xE5D0;</button></div>
-    <div id="title"><img src="/_data/BloodCat.svg" width="20" height="30" alt="아까네코 종이모형"><a href="//osu.ppy.sh/b/" target="_blank">-</a><button id="share" class="material-icons">&#xE80D;</button></div>
-
+    <div id="speed"><!--
+         --><button value="1.5">DT</button><!--
+         --><button class="e" value="1">-</button><!--
+         --><button value="0.75">HT</button><!--
+     --></div>
+    <div id="mania"><!--
+         --><button value="1">+</button><!--
+         --><button id="scroll">20</button><!--
+         --><button value="-1">-</button><!--
+     --></div>
+    <div id="control"><!--
+         --><input id="progress" type="range" min="0" max="0" value="0"><!--
+         --><input id="volume" type="range" min="0" max="100" value="100"><!--
+         --><button id="fullscreen" class="material-icons">&#xE5D0;</button><!--
+     --></div>
+    <div id="title"><!--
+         --><img src="/_data/BloodCat.svg" width="20" height="30" alt="아까네코 종이모형"><!--
+         --><a href="//osu.ppy.sh/b/" target="_blank">-</a><!--
+         <button id="share" class="material-icons">&#xE80D;</button>
+     --></div>
+<!--
     <div id="sharePrompt"></div>
-
+ -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     <!-- build:inlinejs -->
     <script src="js/util.js"></script>
@@ -173,6 +187,23 @@
         audio.pause();
     }
 });
+
+$('#fullscreen').on('click', function(e) {
+    e.preventDefault();
+    var doc = window.document;
+    var docEl = doc.documentElement;
+
+    var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
+    var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
+
+    if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
+        requestFullScreen.call(docEl);
+    }
+    else {
+        cancelFullScreen.call(doc);
+    }
+});
+
     </script>
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){