118 lines
4.7 KiB
HTML
118 lines
4.7 KiB
HTML
{% extends '/skel.html' %}
|
|
{% block imports %}
|
|
<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">
|
|
<h1>
|
|
twitt normies get <i>hecked</i>
|
|
</h1>
|
|
<p>
|
|
Protect your memes from the evil clutches of @ItMeIRL.
|
|
</p>
|
|
<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" 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">
|
|
<template is="dom-repeat" items="[[files]]" as="file">
|
|
<vaadin-permalinked-upload-file file="[[file]]"></vaadin-permalinked-upload-file>
|
|
</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>
|
|
</div>
|
|
{% endblock %}
|
|
{% block script %}
|
|
<script>
|
|
function isES6()
|
|
{
|
|
try { Function("() => {};"); return true; }
|
|
catch(exception) { return false; }
|
|
}
|
|
|
|
window.addEventListener('WebComponentsReady', function() {
|
|
// Remove noscript / dinosaur componenets if both webcomponents and es6 avalible
|
|
if (isES6()){
|
|
var noscripts = document.querySelectorAll('.noscript');
|
|
for (var i = noscripts.length-1; i >= 0; i--){
|
|
noscripts[i].parentNode.removeChild(noscripts[i]);
|
|
}
|
|
} else {
|
|
// TODO: Abort polymer loading to fix IE become ing responsive for a bit
|
|
}
|
|
|
|
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 %}
|