diff --git a/src/General/css/style.css b/src/General/css/style.css
index 84bab93a1..11094103b 100755
--- a/src/General/css/style.css
+++ b/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;
diff --git a/src/General/css/tomorrow.css b/src/General/css/tomorrow.css
index f4c58fc5d..57bce5767 100755
--- a/src/General/css/tomorrow.css
+++ b/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 {
diff --git a/src/General/html/Features/QuickReply.html b/src/General/html/Features/QuickReply.html
index 07ac51aa2..29bb60c72 100755
--- a/src/General/html/Features/QuickReply.html
+++ b/src/General/html/Features/QuickReply.html
@@ -23,6 +23,11 @@
+
+
+
+
+
+
diff --git a/src/General/lib/polyfill.coffee b/src/General/lib/polyfill.coffee
index 2f78e2d59..ed7f2d846 100755
--- a/src/General/lib/polyfill.coffee
+++ b/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});"
diff --git a/src/Posting/QR.coffee b/src/Posting/QR.coffee
index 6e8369585..50534925e 100644
--- a/src/Posting/QR.coffee
+++ b/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