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