This commit is contained in:
Aevann1 2021-09-16 16:30:40 +02:00
parent 42a78177bf
commit 6c5fd61d3b
4 changed files with 121 additions and 104 deletions

View file

@ -1,8 +1,12 @@
(function(l, r) { if (!l || l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (self.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(self.document);
(function () {
(function (marked) {
'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var marked__default = /*#__PURE__*/_interopDefaultLegacy(marked);
function noop() { }
function add_location(element, file, line, column, char) {
element.__svelte_meta = {
@ -24,14 +28,6 @@
function safe_not_equal(a, b) {
return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
}
let src_url_equal_anchor;
function src_url_equal(element_src, url) {
if (!src_url_equal_anchor) {
src_url_equal_anchor = document.createElement('a');
}
src_url_equal_anchor.href = url;
return element_src === src_url_equal_anchor.href;
}
function is_empty(obj) {
return Object.keys(obj).length === 0;
}
@ -50,6 +46,13 @@
function space() {
return text(' ');
}
function empty() {
return text('');
}
function listen(node, event, handler, options) {
node.addEventListener(event, handler, options);
return () => node.removeEventListener(event, handler, options);
}
function attr(node, attribute, value) {
if (value == null)
node.removeAttribute(attribute);
@ -59,11 +62,47 @@
function children(element) {
return Array.from(element.childNodes);
}
function set_input_value(input, value) {
input.value = value == null ? '' : value;
}
function custom_event(type, detail, bubbles = false) {
const e = document.createEvent('CustomEvent');
e.initCustomEvent(type, bubbles, false, detail);
return e;
}
class HtmlTag {
constructor() {
this.e = this.n = null;
}
c(html) {
this.h(html);
}
m(html, target, anchor = null) {
if (!this.e) {
this.e = element(target.nodeName);
this.t = target;
this.c(html);
}
this.i(anchor);
}
h(html) {
this.e.innerHTML = html;
this.n = Array.from(this.e.childNodes);
}
i(anchor) {
for (let i = 0; i < this.n.length; i += 1) {
insert(this.t, this.n[i], anchor);
}
}
p(html) {
this.d();
this.h(html);
this.i(this.a);
}
d() {
this.n.forEach(detach);
}
}
let current_component;
function set_current_component(component) {
@ -277,6 +316,19 @@
dispatch_dev('SvelteDOMRemove', { node });
detach(node);
}
function listen_dev(node, event, handler, options, has_prevent_default, has_stop_propagation) {
const modifiers = options === true ? ['capture'] : options ? Array.from(Object.keys(options)) : [];
if (has_prevent_default)
modifiers.push('preventDefault');
if (has_stop_propagation)
modifiers.push('stopPropagation');
dispatch_dev('SvelteDOMAddEventListener', { node, event, handler, modifiers });
const dispose = listen(node, event, handler, options);
return () => {
dispatch_dev('SvelteDOMRemoveEventListener', { node, event, handler, modifiers });
dispose();
};
}
function attr_dev(node, attribute, value) {
attr(node, attribute, value);
if (value == null)
@ -312,41 +364,67 @@
}
/* src\App.svelte generated by Svelte v3.42.6 */
const file = "src\\App.svelte";
function create_fragment(ctx) {
let h1;
let t1;
let img;
let img_src_value;
let textarea;
let t;
let html_tag;
let raw_value = marked__default['default'](/*text*/ ctx[0]) + "";
let html_anchor;
let mounted;
let dispose;
const block = {
c: function create() {
h1 = element("h1");
h1.textContent = "Average svelte enjoyer:";
t1 = space();
img = element("img");
add_location(h1, file, 5, 0, 112);
if (!src_url_equal(img.src, img_src_value = /*src*/ ctx[0])) attr_dev(img, "src", img_src_value);
attr_dev(img, "alt", /*name*/ ctx[1]);
add_location(img, file, 6, 0, 145);
textarea = element("textarea");
t = space();
html_tag = new HtmlTag();
html_anchor = empty();
attr_dev(textarea, "form", "submitform");
attr_dev(textarea, "id", "post-text");
attr_dev(textarea, "class", "form-control rounded");
attr_dev(textarea, "aria-label", "With textarea");
attr_dev(textarea, "placeholder", "Optional if you have a link or an image.");
attr_dev(textarea, "rows", "3");
attr_dev(textarea, "name", "body");
attr_dev(textarea, "oninput", "charLimit('post-text','character-count-submit-text-form');checkForRequired()");
attr_dev(textarea, "maxlength", "10000");
textarea.required = true;
add_location(textarea, file, 5, 0, 66);
html_tag.a = html_anchor;
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
},
m: function mount(target, anchor) {
insert_dev(target, h1, anchor);
insert_dev(target, t1, anchor);
insert_dev(target, img, anchor);
insert_dev(target, textarea, anchor);
set_input_value(textarea, /*text*/ ctx[0]);
insert_dev(target, t, anchor);
html_tag.m(raw_value, target, anchor);
insert_dev(target, html_anchor, anchor);
if (!mounted) {
dispose = listen_dev(textarea, "input", /*textarea_input_handler*/ ctx[1]);
mounted = true;
}
},
p: function update(ctx, [dirty]) {
if (dirty & /*text*/ 1) {
set_input_value(textarea, /*text*/ ctx[0]);
}
if (dirty & /*text*/ 1 && raw_value !== (raw_value = marked__default['default'](/*text*/ ctx[0]) + "")) html_tag.p(raw_value);
},
p: noop,
i: noop,
o: noop,
d: function destroy(detaching) {
if (detaching) detach_dev(h1);
if (detaching) detach_dev(t1);
if (detaching) detach_dev(img);
if (detaching) detach_dev(textarea);
if (detaching) detach_dev(t);
if (detaching) detach_dev(html_anchor);
if (detaching) html_tag.d();
mounted = false;
dispose();
}
};
@ -364,26 +442,29 @@
function instance($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('App', slots, []);
let src = 'https://rdrama.net/assets/images/emojis/gigachad2.webp';
let name = 'Gigachad';
let text = ``;
const writable_props = [];
Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<App> was created with unknown prop '${key}'`);
});
$$self.$capture_state = () => ({ src, name });
function textarea_input_handler() {
text = this.value;
$$invalidate(0, text);
}
$$self.$capture_state = () => ({ marked: marked__default['default'], text });
$$self.$inject_state = $$props => {
if ('src' in $$props) $$invalidate(0, src = $$props.src);
if ('name' in $$props) $$invalidate(1, name = $$props.name);
if ('text' in $$props) $$invalidate(0, text = $$props.text);
};
if ($$props && "$$inject" in $$props) {
$$self.$inject_state($$props.$$inject);
}
return [src, name];
return [text, textarea_input_handler];
}
class App extends SvelteComponentDev {
@ -404,5 +485,5 @@
target: document.querySelector('#svelte-app')
});
}());
}(marked));
//# sourceMappingURL=bundle.js.map

View file

@ -8,10 +8,6 @@ from os import path
site = environ.get("DOMAIN").strip()
site_name = environ.get("SITE_NAME").strip()
@app.route("/svelte")
def svelte():
return render_template('svelte.html')
@app.get('/rules')
@auth_desired
def static_rules(v):

View file

@ -4,8 +4,6 @@
{% include "bootstrap.html" %}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/remarkable/1.7.1/remarkable.min.js"></script>
<script>
$(document).ready(function() {
@ -327,7 +325,9 @@
<div class="input-group">
<textarea v-model="post_body" form="submitform" id="post-text" class="form-control rounded" aria-label="With textarea" placeholder="Optional if you have a link or an image." rows="3" name="body" oninput="charLimit('post-text','character-count-submit-text-form');checkForRequired()" maxlength="10000" required>{{text}}</textarea>
<div id="svelte-app"></div>
<textarea form="submitform" id="post-text" class="form-control rounded" aria-label="With textarea" placeholder="Optional if you have a link or an image." rows="3" name="body" oninput="charLimit('post-text','character-count-submit-text-form');checkForRequired()" maxlength="10000" required>{{text}}</textarea>
<span class="position-absolute text-small font-weight-bold" id="character-count-submit-text-form" style="right: 1rem; bottom: 0.5rem; z-index: 3;"></span>
@ -357,10 +357,6 @@
<div id="emoji-reply-btn" onclick="loadEmojis('post-text')" aria-hidden="true" data-toggle="modal" data-target="#emojiModal" data-toggle="tooltip" data-placement="bottom" title="Add Emoji"><i class="fas fa-smile-beam"></i></div>
</label>
<div class="btn btn-secondary" @click="togglePreview()" style="float: right;">
[[ show_preview ? 'Hide preview' : 'Show preview' ]]
</div>
<pre></pre>
<div class="form-text text-small"><a href="/formatting" target="_blank">Formatting help</a></div>
<pre></pre>
@ -410,62 +406,9 @@
</form>
<div v-show="show_preview" class="card-blank" id="submit-page" style="height:max-content; min-height: 25rem; transition: 15s;">
<h1 class="m-3">Markdown Preview</h1>
<hr>
<div class="m-3">
<div id="post-body-markdown" v-html="post_body_markdown" style="max-height: 500px; overflow-y: scroll;"></div>
</div>
</div>
</div>
{% endblock %}
<style>
@media(min-width: 768px){
.submit-grid-view{
display: grid;
grid-template-columns: 1fr 3fr 3fr 1fr;
grid-column-gap: 1rem;
}
}
#post-body-markdown img{
max-height: 100px !important;
max-width: 100px !important;
border-radius: 0.35rem;
margin: 0.5rem 0;
}
</style>
<script>
var md = new Remarkable();
new Vue({
el: "#submitapp",
delimiters: ['[[', ']]'],
data: {
post_body: "",
post_tag: "",
show_preview: false,
},
computed: {
post_body_markdown: function(){
markdown = md.render(this.post_body)
emojis = Array.from(markdown.matchAll(/:(.{1,30}?):/gi))
if(emojis != null){
for(i = 0; i < emojis.length; i++){
markdown = markdown.replace(emojis[i][0], "<img height=30 src='/assets/images/emojis/" + emojis[i][1] + ".webp'>")
}
}
return markdown
}
},
methods: {
togglePreview() {
this.show_preview = !this.show_preview
}
}
})
</script>
<!-- {{'SITE_NAME' | app_config}} JS -->
<script src="/assets/js/general26.js"></script>

View file

@ -1,3 +0,0 @@
<script defer src='/assets/js/svelte.js'></script>
fuck yes
<div id='svelte-app'></div>