From 13ca4b6a77e8c2c5784ace54a1f6557bb5cd4531 Mon Sep 17 00:00:00 2001 From: marktaiwan Date: Thu, 12 Mar 2015 10:57:06 +0800 Subject: [PATCH 1/8] Minimize post form width change on options toggle Added linebreaks before the hints in the Options row --- templates/post_form.html | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/templates/post_form.html b/templates/post_form.html index 29c7f75d..6a28572d 100644 --- a/templates/post_form.html +++ b/templates/post_form.html @@ -154,17 +154,23 @@
+ {% trans %}Do not bump{% endtrans %} +
+ {% trans %}(you can also write sage in the email field){% endtrans %}
{% if config.spoiler_images %}
+ {% trans %}Spoiler images{% endtrans %} +
+ {% trans %}(this replaces the thumbnails of your images with question marks){% endtrans %}
{% endif %} {% if config.allow_no_country and config.country_flags %}
+ {% trans %}Hide country{% endtrans %} +
+ {% trans %}(this board displays your country when you post if this is unchecked){% endtrans %}
{% endif %} {% if mod %} From 2aeb4db98b7c673bb9f4592b451ea179695a3db4 Mon Sep 17 00:00:00 2001 From: marktaiwan Date: Thu, 12 Mar 2015 11:02:03 +0800 Subject: [PATCH 2/8] Added missing tag --- templates/post_form.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/templates/post_form.html b/templates/post_form.html index 6a28572d..56632970 100644 --- a/templates/post_form.html +++ b/templates/post_form.html @@ -7,7 +7,7 @@ {% endif %} {% if mod %}{% endif %} - +
{% if not config.field_disable_name or (mod and post.mod|hasPermission(config.mod.bypass_field_disable, board.uri)) %} -
{% trans %}Name{% endtrans %} @@ -111,7 +111,8 @@
Confused? See the FAQ.
+
+ {% if config.user_flag %} @@ -222,7 +223,7 @@

-
+ From 26ce0158d86401546cc0c8035a42b9a97b0afcbc Mon Sep 17 00:00:00 2001 From: marktaiwan Date: Sun, 15 Mar 2015 22:18:27 +0800 Subject: [PATCH 3/8] initial commit templates --- templates/post_form.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/templates/post_form.html b/templates/post_form.html index 2f6f02d2..b5ef767d 100644 --- a/templates/post_form.html +++ b/templates/post_form.html @@ -91,6 +91,12 @@ +
+
+
Select/drop/paste files here
+
+
+
{% if config.allow_upload_by_url %}
: From 72898dbecf04185ecf21acd5693bac6b7418e435 Mon Sep 17 00:00:00 2001 From: marktaiwan Date: Sun, 15 Mar 2015 22:18:47 +0800 Subject: [PATCH 4/8] initial commit stylesheet --- stylesheets/style.css | 81 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 81 insertions(+) diff --git a/stylesheets/style.css b/stylesheets/style.css index 52d02473..9941a1a3 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1181,3 +1181,84 @@ div.mix { #youtube-size input { width: 50px; } + +input#upload_file { + display: none; +} +/* File selector */ +.dropzone { + color: #000; + cursor: default; + margin: auto; + padding: 0px 4px; + text-align: center; + min-height: 50px; + max-height: 140px; + transition: 0.2s; + background-color: rgba(200, 200, 200, 0.5); + overflow-y: auto; +} +.dropzone-wrap { + width: 100%; +} +.dropzone .file-hint { + color: rgba(0, 0, 0, 0.5); + cursor: pointer; + position: relative; + margin-bottom: 5px; + padding: 10px 0px; + top: 5px; + transition: 0.2s; + border: 2px dashed rgba(125, 125, 125, 0.4); +} +.file-hint:hover, .dropzone.dragover .file-hint { + color: rgba(0, 0, 0, 1); + border-color: rgba(125, 125, 125, 0.8); +} +.dropzone.dragover { + background-color: rgba(200, 200, 200, 1); +} +.dropzone .file-thumbs { + text-align: left; + width: 100%; +} +.dropzone .tmb-container { + padding: 3px; + overflow-x: hidden; + white-space: nowrap; +} +.dropzone .file-tmb { + height: 40px; + width: 70px; + cursor: pointer; + display: inline-block; + text-align: center; + background-color: rgba(187, 187, 187, 0.5); + background-size: cover; + background-position: center; +} +.dropzone .file-tmb span { + font-weight: 600; + position: relative; + top: 13px; +} +.dropzone .tmb-filename { + display: inline-block; + vertical-align: bottom; + bottom: 12px; + position: relative; + margin-left: 5px; +} +.dropzone .remove-btn { + cursor: pointer; + color: rgba(125, 125, 125, 0.5); + display: inline-block; + vertical-align: bottom; + bottom: 10px; + position: relative; + margin-right: 5px; + font-size: 20px +} +.dropzone .remove-btn:hover { + color: rgba(125, 125, 125, 1); +} From 6e054239e7545087929b9d78a76351c614627feb Mon Sep 17 00:00:00 2001 From: marktaiwan Date: Sun, 15 Mar 2015 22:18:58 +0800 Subject: [PATCH 5/8] initial commit file-selector.js --- js/file-selector.js | 187 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 js/file-selector.js diff --git a/js/file-selector.js b/js/file-selector.js new file mode 100644 index 00000000..437e1d4a --- /dev/null +++ b/js/file-selector.js @@ -0,0 +1,187 @@ +/* + * file-selector.js - Add support for drag and drop file selection, and paste from clipbboard on supported browsers. + * + * Usage: + * $config['additional_javascript'][] = 'js/jquery.min.js'; + * $config['additional_javascript'][] = 'js/file-selector.js'; + */ + +onready(function () { + +// add options panel item +$(document).ready(function () { + if (window.Options && Options.get_tab('general')) { + Options.extend_tab('general', ''); + + $('#file-drag-drop>input').on('click', function() { + if ($('#file-drag-drop>input').is(':checked')) { + localStorage.file_dragdrop = 'true'; + } else { + localStorage.file_dragdrop = 'false'; + } + }); + + if (localStorage.file_dragdrop === 'undefined') localStorage.file_dragdrop = 'true'; + if (localStorage.file_dragdrop === 'true') $('#file-drag-drop>input').prop('checked', true); + } +}); + +// disabled by user, or incompatible browser. +// fallback to old +if (localStorage.file_dragdrop == 'false' || !(window.FileReader || window.File)) { + $('.dropzone-wrap').remove(); + $('#upload_file').show(); + + return; +} + +// multipost not enabled +if (typeof max_images == 'undefined') { + var max_images = 1; +} + +var files = []; + +function addFile(file) { + if (files.length == max_images) + return; + + files.push(file); + addThumb(file); +} + +function removeFile(file) { + files.splice(files.indexOf(file), 1); +} + +function getThumbElement(file) { + return $('.tmb-container').filter(function(){return($(this).data('file-ref')==file);}); +} + +function addThumb(file) { + + var fileName = (file.name.length < 24) ? file.name : file.name.substr(0, 22) + '…'; + var fileType = file.type.split('/')[0]; + var fileExt = file.type.split('/')[1]; + var $fileThumb; + + $('.file-thumbs').append($('
') + .addClass('tmb-container') + .data('file-ref', file) + .append( + $('
').addClass('remove-btn').html('✖'), + $('
').addClass('file-tmb'), + $('
').addClass('tmb-filename').html(fileName) + ) + ); + + if (fileType == 'image') { + // if image file, generate thumbnail + var reader = new FileReader(); + + reader.onloadend = function () { + var dataURL = reader.result; + var $fileThumb = getThumbElement(file).find('.file-tmb'); + $fileThumb.css('background-image', 'url('+ dataURL +')'); + }; + + reader.readAsDataURL(file); + } else { + $fileThumb = getThumbElement(file).find('.file-tmb'); + $fileThumb.html('' + fileExt.toUpperCase() + ''); + } +} + +$(document).on('ajax_before_post', function (e, formData) { + var i; + + for (i=0; i 0) key += i + 1; + formData.append(key, files[i]); + } + + // clear file queue and UI + files = []; + $('.file-thumbs').empty(); +}); + +var dragCounter = 0; +var dropHandlers = { + dragenter: function (e) { + e.stopPropagation(); + e.preventDefault(); + + if (dragCounter === 0) $(this).addClass('dragover'); + dragCounter++; + }, + dragover: function (e) { + // needed for webkit to work + e.stopPropagation(); + e.preventDefault(); + }, + dragleave: function (e) { + e.stopPropagation(); + e.preventDefault(); + + dragCounter--; + if (dragCounter === 0) $(this).removeClass('dragover'); + }, + drop: function (e) { + e.stopPropagation(); + e.preventDefault(); + + $(this).removeClass('dragover'); + dragCounter = 0; + + var fileList = e.originalEvent.dataTransfer.files; + for (var i=0; i'); + + $fileSelector.on('change', function (e) { + if (this.files.length > 0) { + for (var i=0; i Date: Sun, 15 Mar 2015 23:32:53 +0800 Subject: [PATCH 6/8] Run on index and thread Clear file queue after upload success corrected fallback detection --- js/file-selector.js | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/js/file-selector.js b/js/file-selector.js index 437e1d4a..c820db48 100644 --- a/js/file-selector.js +++ b/js/file-selector.js @@ -6,29 +6,28 @@ * $config['additional_javascript'][] = 'js/file-selector.js'; */ -onready(function () { +if (active_page == 'index' || active_page == 'thread') { +$(document).ready(function () { // add options panel item -$(document).ready(function () { - if (window.Options && Options.get_tab('general')) { - Options.extend_tab('general', ''); +if (window.Options && Options.get_tab('general')) { + Options.extend_tab('general', ''); - $('#file-drag-drop>input').on('click', function() { - if ($('#file-drag-drop>input').is(':checked')) { - localStorage.file_dragdrop = 'true'; - } else { - localStorage.file_dragdrop = 'false'; - } - }); + $('#file-drag-drop>input').on('click', function() { + if ($('#file-drag-drop>input').is(':checked')) { + localStorage.file_dragdrop = 'true'; + } else { + localStorage.file_dragdrop = 'false'; + } + }); - if (localStorage.file_dragdrop === 'undefined') localStorage.file_dragdrop = 'true'; - if (localStorage.file_dragdrop === 'true') $('#file-drag-drop>input').prop('checked', true); - } -}); + if (localStorage.file_dragdrop === 'undefined') localStorage.file_dragdrop = 'true'; + if (localStorage.file_dragdrop === 'true') $('#file-drag-drop>input').prop('checked', true); +} // disabled by user, or incompatible browser. // fallback to old -if (localStorage.file_dragdrop == 'false' || !(window.FileReader || window.File)) { +if (localStorage.file_dragdrop == 'false' || !(window.FileReader && window.File)) { $('.dropzone-wrap').remove(); $('#upload_file').show(); @@ -93,15 +92,15 @@ function addThumb(file) { } $(document).on('ajax_before_post', function (e, formData) { - var i; - - for (i=0; i 0) key += i + 1; formData.append(key, files[i]); } +}); - // clear file queue and UI +// clear file queue and UI on success +$(document).on('ajax_after_post', function () { files = []; $('.file-thumbs').empty(); }); @@ -185,3 +184,4 @@ $(document).on('paste', function (e) { }); }); +} From 6e35f12e3a7c99a18f2a09aed0e8fc679dc29b37 Mon Sep 17 00:00:00 2001 From: marktaiwan Date: Wed, 18 Mar 2015 18:44:47 +0800 Subject: [PATCH 7/8] Fallback for browsers that disables javascript --- js/file-selector.js | 3 ++- stylesheets/style.css | 3 --- templates/post_form.html | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/js/file-selector.js b/js/file-selector.js index c820db48..ddae2d09 100644 --- a/js/file-selector.js +++ b/js/file-selector.js @@ -140,7 +140,8 @@ var dropHandlers = { } }; -$('.dropzone').css('user-select', 'none') // let jquery add browser specific prefix +$('#upload input[type=file]').hide(); // hide the original file selector +$('.dropzone-wrap').css('user-select', 'none').show(); // let jquery add browser specific prefix // attach handlers $(document).on(dropHandlers, '.dropzone'); diff --git a/stylesheets/style.css b/stylesheets/style.css index 9941a1a3..8978780e 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1182,9 +1182,6 @@ div.mix { width: 50px; } -input#upload_file { - display: none; -} /* File selector */ .dropzone { color: #000; diff --git a/templates/post_form.html b/templates/post_form.html index b5ef767d..f118f5aa 100644 --- a/templates/post_form.html +++ b/templates/post_form.html @@ -91,7 +91,7 @@ -
+ + {% if config.allow_upload_by_url %}
: