Add Oekaki to Quick Reply on /i/. #510

src/General/css/style.css

@@ -1346,8 +1346,8 @@ input.field.tripped:not(:hover):not(:focus) {
   position: static !important;
 }
 
-/* File Input, Submit Button */
-#file-n-submit {
+/* File Input, Submit Button, Oekaki */
+#file-n-submit, .oekaki {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: stretch;
@@ -1355,13 +1355,13 @@ input.field.tripped:not(:hover):not(:focus) {
   height: 25px;
   margin-top: 1px;
 }
-#file-n-submit > input {
+#file-n-submit > input, #qr-draw-button {
   background: linear-gradient(to bottom, #F8F8F8, #DCDCDC) no-repeat;
   border: 1px solid #BBB;
   border-radius: 2px;
   height: 100%;
 }
-#qr-file-button {
+#qr-file-button, #qr-draw-button {
   width: 15%;
 }
 #file-n-submit input[type="submit"] {
@@ -1401,6 +1401,28 @@ input#qr-filename {
 #qr-no-file {
   color: #AAA;
 }
+body:not(.board_i) .oekaki {
+  display: none;
+}
+.oekaki > label {
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 0;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  height: 100%;
+}
+.oekaki > label > span {
+  margin: 0 3px;
+}
+.oekaki > label > input {
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 0;
+  height: 100%;
+}
 #qr input[type="file"] {
   visibility: hidden;
   position: absolute;

src/General/css/tomorrow.css

@@ -110,7 +110,8 @@
   background: rgb(26, 27, 29);
 }
 :root.tomorrow #qr select,
-:root.tomorrow #file-n-submit > input {
+:root.tomorrow #file-n-submit > input,
+:root.tomorrow #qr-draw-button {
   border-color: rgb(40, 41, 42);
 }
 :root.tomorrow #qr-filename {

src/General/html/Features/QuickReply.html

@@ -23,6 +23,11 @@
     <div id="dump-list"></div>
     <a id="add-post" href="javascript:;" title="Add a post">+</a>
   </div>
+  <div class="oekaki">
+    <input type="button" id="qr-draw-button" value="Draw">
+    <label><span>Width:</span><input name="oekaki-width" value="400" type="number" class="field" size="1"></label>
+    <label><span>Height:</span><input name="oekaki-height" value="400" type="number" class="field" size="1"></label>
+  </div>
   <div id="file-n-submit">
     <input type="button" id="qr-file-button" value="Files">
     <span id="qr-filename-container" class="field">

src/General/lib/polyfill.coffee

@@ -2,7 +2,8 @@ Polyfill =
   init: ->
     @toBlob()
   toBlob: ->
-    HTMLCanvasElement::toBlob or= (cb) ->
+    return if HTMLCanvasElement::toBlob
+    HTMLCanvasElement::toBlob = (cb) ->
       data = atob @toDataURL()[22..]
       # DataUrl to Binary code from Aeosynth's 4chan X repo
       l = data.length
@@ -10,3 +11,4 @@ Polyfill =
       for i in [0...l] by 1
         ui8a[i] = data.charCodeAt i
       cb new Blob [ui8a], type: 'image/png'
+    $.globalEval "HTMLCanvasElement.prototype.toBlob = (#{HTMLCanvasElement::toBlob});"

src/Posting/QR.coffee

@@ -200,6 +200,22 @@ QR =
     QR.setCustomCooldown enabled
     $.set 'customCooldownEnabled', enabled
 
+  oekakiDraw: ->
+    $.globalEval '''
+      Tegaki.open({
+        onDone: function() {
+          Tegaki.flatten().toBlob(function (blob) {
+            var detail = {file: blob, name: 'tegaki.png'};
+            var event = new CustomEvent('QRSetFile', {bubbles: true, detail: detail});
+            document.dispatchEvent(event);
+          });
+        },
+        onCancel: function() {},
+        width: +document.querySelector('#qr [name=oekaki-width]').value,
+        height: +document.querySelector('#qr [name=oekaki-height]').value
+      });
+    '''
+
   error: (err, focusOverride) ->
     QR.open()
     if typeof err is 'string'
@@ -470,6 +486,7 @@ QR =
     setNode 'fileInput',     '[type=file]'
     setNode 'customCooldown', '#custom-cooldown-button'
     setNode 'flashTag',      '[name=filetag]'
+    setNode 'drawButton',    '#qr-draw-button'
 
     rules = $('ul.rules').textContent.trim()
     match_min = rules.match(/.+smaller than (\d+)x(\d+).+/)
@@ -530,6 +547,7 @@ QR =
     $.on nodes.fileInput,  'change', QR.handleFiles
     $.on nodes.sjisToggle, 'click',  QR.toggleSJIS
     $.on nodes.customCooldown, 'click', QR.toggleCustomCooldown
+    $.on nodes.drawButton, 'click',  QR.oekakiDraw
 
     window.addEventListener 'focus', QR.focus, true
     window.addEventListener 'blur',  QR.focus, true