Merge branch 'feature/optional-footer'

oof forms pass strings
and checkboxes are 'off' and 'on

bower.json

@@ -12,7 +12,8 @@
     "webcomponentsjs": "^2.0.1",
     "vaadin-upload": "^4.1.0",
     "clipboard-copy": "advanced-rest-client/clipboard-copy#^2.0.1",
-    "paper-tooltip": "PolymerElements/paper-tooltip#^2.1.1"
+    "paper-tooltip": "PolymerElements/paper-tooltip#^2.1.1",
+    "paper-toggle-button": "PolymerElements/paper-toggle-button#^2.1.1"
   },
   "resolutions": {
     "webcomponentsjs": "^v1.1.0"

memepolice.py

@@ -25,17 +25,22 @@ def meirl_upload():
         directory = os.path.join(app.config['UPLOAD_DIR'], 'itmeirlbot-protect')
         if not os.path.exists(directory):
             os.makedirs(directory)
+        filename = str(uuid.uuid4()) + '.jpg'
+        path = os.path.join(directory, filename)
 
-        watermark = Image(filename=os.path.join('static', 'watermark.png'))
         meme = Image(file=request.files['meme'])
+
+        if request.form.get('nomolest', 'off') == 'on':
+            meme.format = 'jpeg'
+            meme.save(filename=path)
+        else:
+            watermark = Image(filename=os.path.join('static', 'watermark.png'))
             with Image(width=meme.width, height=meme.height + watermark.height) as img:
                 img.composite(meme, 0, 0)
                 watermark.resize(width=meme.width)
                 img.composite(watermark, 0, meme.height)
 
                 img.format = 'jpeg'
-            filename = str(uuid.uuid4()) + '.jpg'
-            path = os.path.join(directory, filename)
                 img.save(filename=path)
             watermark.close()
         meme.close()
@@ -50,7 +55,7 @@ def meirl_upload():
 # Expecting lots of traffic? Do these via nginx before you kill your server
 @app.route('/files/itmeirlbot-protect/<file>')
 def meirl_show_reddit(file):
-    directory = os.path.join(app.config['UPLOAD_DIR'], 'itmeirl')
+    directory = os.path.join(app.config['UPLOAD_DIR'], 'itmeirlbot-protect')
     return send_from_directory(directory, file + '.jpg')
 
 @app.route('/files/itmeirlbot-protect/<file>.jpg')

static/style.css

@@ -51,6 +51,17 @@ body {
 #upload_button {
   width: 100%;
 }
+#upload_checkbox {
+  display: flex;
+  align-self: start;
+}
+#upload_checkbox > input {
+  margin: 16px;
+}
+
+#options {
+  padding: 16px 8px;
+}
 
 
 @keyframes fade { from { opacity: 1; } to { opacity: 0; } }
@@ -90,6 +101,14 @@ body {
   animation-duration: 0.5s;
 }
 
+.codeblock {
+  background-color: var(--secondary-background-color);
+  color: var(--secondary-foreground-color);
+  font-family: 'Roboto Mono', monospace;
+  padding: 8px 16px;
+  box-sizing: border-box;
+}
+
 a.nostyle:link {
   text-decoration: inherit;
   color: inherit;

templates/itmeirlbot-protect/index.html

@@ -3,8 +3,10 @@
 <script src="{{ url_for('components', path='webcomponentsjs/webcomponents-loader.js') }}"></script>
 <link rel="import" href="{{ url_for('components', path='polymer/lib/elements/dom-bind.html') }}">
 <link rel="import" href="{{ url_for('components', path='polymer/lib/elements/dom-repeat.html') }}">
+<link rel="import" href="{{ url_for('components', path='polymer/lib/elements/dom-if.html') }}">
 <link rel="import" href="{{ url_for('components', path='vaadin-upload/vaadin-upload.html') }}">
 <link rel="import" href="{{ url_for('custom_components', path='vaadin-permalinked-upload-file.html') }}">
+<link rel="import" href="{{ url_for('components', path='paper-toggle-button/paper-toggle-button.html') }}">
 {% endblock %}
 {% block body %}
   <div id="mainwrapper">
@@ -17,11 +19,23 @@
     <div id="upload_form">
       <form class="noscript" action="{{ url_for('meirl_upload')}}" method="POST" enctype="multipart/form-data">
         <input id="upload_input" name="meme" type="file" accept="image/*"></input>
+        <div id="upload_checkbox">
+          <input name="nomolest" type="checkbox"></input>
+          <p>No footer</p>
+        </div>
         <button id="upload_button">Upload</button>
       </form>
       <dom-bind>
         <template>
-          <vaadin-upload id="file_upload" files="{%raw%}{{files}}{%endraw%}" target="{{ url_for('meirl_upload') }}?noredirect" method="POST" form-data-name="meme" accept="image/*" max-file-size="5000000">
+          <vaadin-upload id="file_upload" files="{%raw%}{{files}}{%endraw%}" target="{{ url_for('meirl_upload') }}?noredirect" method="POST" form-data-name="meme" accept="image/*" max-file-size="5000000" nodrop="[[nodrop]]">
+            <style is="custom-style">
+              [nodrop] [part="upload-button"] {
+                width: 100%;
+              }
+              [nodrop] #addFiles {
+                width: 100%;
+              }
+            </style>
             <div slot="drop-label-icon"></div>
             <span slot="drop-label" class="font-headline">or drag a file here (5MB maximum)</span>
             <div slot="file-list">
@@ -30,6 +44,27 @@
               </template>
             </div>
           </vaadin-upload>
+          <div id="options">
+            <paper-toggle-button checked="{%raw%}{{add_footer}}{%endraw%}">Add footer</paper-toggle-button>
+          </div>
+          <template is="dom-if" if="[[!add_footer]]">
+            <p>
+              That's cool, we understand you don't want your meme molested, but if you could add something like the following as a comment that would be rad:
+            </p>
+            <div class="codeblock" on-click="onCommentClick">
+              <p>
+                This meme is protected from the Twitter bot using ✨ computer magic ✨
+                <br />
+                <br />
+                See [the original post](https://www.reddit.com/r/me_irl/comments/8r8nxj/meirl/e0pc5q8/) or just [flex on those Twitter users](https://memepolice.xyz/itmeirlbot-protect)
+              </p>
+            </div>
+            <template is="dom-if" if="[[files.length]]">
+              <p>
+                Also, it looks like you've already uploaded. Please note that you'll have to reupload any files for this option will take effect!
+              </p>
+            </template>
+          </template>
         </template>
       </dom-bind>
     </div>
@@ -55,10 +90,29 @@ window.addEventListener('WebComponentsReady', function() {
   }
 
   var upload = document.querySelector('vaadin-upload#file_upload');
+  var binder = document.querySelector('dom-bind');
 
   upload.addEventListener('upload-response', function(event) {
     event.detail.file.url = event.detail.xhr.response;
   });
+
+  upload.addEventListener('upload-request', function(event) {
+    event.detail.formData.append('nomolest', binder.add_footer ? 'off' : 'on');
+  });
+
+  binder.files = [];
+  binder.add_footer = true;
+  binder.onCommentClick = function(event) {
+    var sel, range;
+    sel = window.getSelection();
+    console.log(event.target);
+    if(sel.toString() == '') {
+      range = document.createRange();
+      range.selectNodeContents(event.target);
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+  }
 });
 </script>
 {% endblock %}

templates/skel.html

@@ -8,7 +8,7 @@
     <meta name="description" content="meme steal no more">
 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet" />
     <link href="{{ url_for('static', filename='style.css') }}" type="text/css" rel="stylesheet" />
 
     {% block imports %}