diff --git a/yadc/assets/css/base-types.scss b/yadc/assets/css/base-types.scss index e70d5bb..6fae144 100644 --- a/yadc/assets/css/base-types.scss +++ b/yadc/assets/css/base-types.scss @@ -214,6 +214,10 @@ label { &:not(:empty) { padding: .2em; } + + > a.sug-sel { + background-color: #242424; + } } } .tag-container { diff --git a/yadc/assets/js/taginput.js b/yadc/assets/js/taginput.js index 9cd10bf..7ab3694 100644 --- a/yadc/assets/js/taginput.js +++ b/yadc/assets/js/taginput.js @@ -140,12 +140,21 @@ taginputs.forEach(function (tinput) { // }) // } let vals = suggest_input.value.split(' ') - console.log(vals) + // console.log(vals) vals.forEach(tag => { if (tag == '') return add_selected(tag) }); suggest_input.removeAttribute('value') // Disable prefill by browser + + function select_suggestion(tagelement) { + add_selected(tagelement.dataset.tagname) + suggest_input.value = '' + render_suggestions([]) + + // yeeeeeeeet + setTimeout(() => suggest_input.focus(), 2) + } function render_suggestions(data) { // 3 references let drop = suggest_dropdown @@ -163,9 +172,7 @@ taginputs.forEach(function (tinput) { let sugtag = create_suggestion_tag(el.content) sugtag.addEventListener('click', (event) => { - add_selected(event.target.dataset.tagname) - sug_input.value = '' - render_suggestions([]) + select_suggestion(event.target) event.preventDefault() }) @@ -195,15 +202,58 @@ taginputs.forEach(function (tinput) { // fill suggestions // console.log(data) render_suggestions(data) + update_sug_selection('0') }) }, 500) }) - // search_input.addEventListener('keypress', (event) => { - // if (event.keyCode == 13) { - // // event.preventDefault() - // } - // }) + let sug_selected = 0 + function update_sug_selection(move) { + let suggs = suggest_dropdown.querySelectorAll('a.tagsuggestion') + let last_selected = sug_selected + + let subs = move.substring(0, 1) + if (subs == '+') { + sug_selected += parseInt(move.substring(1)) + } else if (subs == '-') { + sug_selected -= parseInt(move.substring(1)) + } else { + sug_selected = parseInt(move) + } + + sug_selected = sug_selected%suggs.length + if (sug_selected < 0) sug_selected += suggs.length + + try { + suggs[last_selected].classList.remove('sug-sel') + } catch (error) { + // console.log(error) + } + try { + suggs[sug_selected].classList.add('sug-sel') + } catch (error) { + // console.log(error) + } + } + + suggest_input.addEventListener('keydown', (event) => { + // console.log(event) + if (event.keyCode == 13) { + if (suggest_input.value) { + select_suggestion(suggest_dropdown.querySelector('a.tagsuggestion.sug-sel')) + event.preventDefault() + } + } + if (event.keyCode == 40 || (event.keyCode == 9 && !event.shiftKey)) { + update_sug_selection('+1') + event.preventDefault() + } + if (event.keyCode == 38 || (event.keyCode == 9 && event.shiftKey)) { + update_sug_selection('-1') + event.preventDefault() + } + }) + // search_input.addEventListener('blur', (event) => { // if (event.explicitOriginalTarget != null) { // classlist = event.explicitOriginalTarget.parentNode.classList diff --git a/yadc/bp/manage.py b/yadc/bp/manage.py index 6574343..6e9a7d9 100644 --- a/yadc/bp/manage.py +++ b/yadc/bp/manage.py @@ -80,7 +80,7 @@ def modify_user(): flash('New {} has been created.'.format(str(el))) else: - el = User.query.filter_by(id=form.id.data).first() + el = User.query.get(form.id.data) if form.delete.data: if el.is_current: @@ -117,7 +117,7 @@ def modify_post(): if form.create.data: pass else: - el = Post.query.filter_by(id=form.id.data).first() + el = Post.query.get(form.id.data) if not current_user.is_moderator and not (el.author.is_current if el.author is not None else None): flash("You don't have sufficient rights to do this.") return redirect(url_for('main.index')) @@ -152,10 +152,10 @@ def modify_post(): flash('Approved post {}'.format(str(el))) # redirect(url_for('post.post_show', id=el.id)) - if form.referer.data == 'post_show': - return redirect(url_for('post.post_show', id=el.id)) - flasherrors(form) + if form.referer.data == 'post_show': + return redirect(url_for('post.post_show', id=form.id.data)) + return redirect(url_for('.manage_posts')) # Example perfect create/edit/delete form endpoint @@ -176,7 +176,7 @@ def modify_tag(): db.session.commit() flash('New {} has been created.'.format(str(el))) else: - el = Tag.query.filter_by(id=form.id.data).first() + el = Tag.query.get(form.id.data) if form.delete.data: db.session.delete(el) diff --git a/yadc/forms.py b/yadc/forms.py index 396aecc..0ab9386 100644 --- a/yadc/forms.py +++ b/yadc/forms.py @@ -1,6 +1,6 @@ from wtforms import Form from wtforms import StringField, PasswordField, BooleanField, SubmitField, FileField, MultipleFileField, ValidationError, RadioField, TextAreaField, HiddenField, SelectField -from wtforms.validators import DataRequired, InputRequired, Email, EqualTo, AnyOf, optional, StopValidation +from wtforms.validators import DataRequired, InputRequired, Email, EqualTo, AnyOf, optional, StopValidation, URL from werkzeug.utils import cached_property @@ -65,7 +65,7 @@ def validate_file(form, field): class UploadForm(CSRFForm): post_img = FileField('Image', validators=[validate_file], render_kw={'required':''}) - sauce = StringField('Sauce', validators=[DataRequired()], render_kw=dict(placeholder='Source URL', autocomplete='off')) + sauce = StringField('Sauce', validators=[DataRequired(), URL()], render_kw=dict(placeholder='Source URL', autocomplete='off')) tags = StringField('Tags', validators=[DataRequired()], render_kw=dict(placeholder='Tags', autocomplete='off')) # CUSTOM VALIDATOR (also for Post edits) rating = RadioField('Rating', choices=[(e.name, e.name.capitalize()) for e in RATING], @@ -153,7 +153,7 @@ class PostForm(EditForm): status = SelectField('Status', choices=[(e.name, e.name.capitalize()) for e in POST_STATUS], validators=[optional()]) - source = StringField('Source', render_kw=dict(placeholder='Source URL', autocomplete='off')) + source = StringField('Source', validators=[optional(), URL()], render_kw=dict(placeholder='Source URL', autocomplete='off')) referer = HiddenField() approve = SubmitField('Approve') diff --git a/yadc/static/all.css b/yadc/static/all.css index 6ef4cb7..cb484d3 100644 --- a/yadc/static/all.css +++ b/yadc/static/all.css @@ -1 +1 @@ -.flash_msgs{display:flex;flex-flow:column-reverse nowrap;position:fixed;z-index:20;bottom:0;right:0;margin:0;padding:10px;font-size:.9em;pointer-events:none}.flash_msgs>li{width:250px;padding:10px;list-style-type:none;background-color:#000c;overflow:hidden;opacity:0;animation:fade 7s normal}.flash_msgs>li:not(:first-child){margin-bottom:10px}@keyframes fade{0%,100%{opacity:0}20%,80%{opacity:1}}.flash_msgs>li.error{background-color:#500c}h2{margin:0;margin-bottom:.5em}h3{margin:0;margin-bottom:.5em;font-size:1.3em}h4{margin:0;margin-bottom:.8em;margin-top:.4em}.comment-form{margin-left:10px;max-width:500px}.comment-form input:required{box-shadow:none}.editingable:not(.time-to-edit) .edit{display:none}.editingable.time-to-edit .notedit{display:none}input[type=text],input[type=password],textarea{background:#444a;border:1px solid #444;color:inherit;display:block;padding:.5em;margin:.3em 0}input[type=text],input[type=password]{width:100%}textarea{resize:vertical;width:100%}input[type=submit]{background:#444a;border:2px solid #666a;border-radius:4px;color:inherit;padding:.4em 1.8em}input[type=submit]:active{background:#000a;border:2px solid #444a}label{padding:.4em}.baseform input[type=text],.baseform input[type=password],.baseform textarea,.pageform input[type=text],.pageform input[type=password],.pageform textarea{width:100%}.baseform input[type=checkbox],.pageform input[type=checkbox]{margin:.5em}.baseform input[type=submit],.pageform input[type=submit]{margin:.2em 0}.baseform form>input,.baseform form>div,.pageform form>input,.pageform form>div{margin:.8em 0}.baseform div.row,.pageform div.row{padding:.2em;display:flex;align-items:center}.baseform div.row.stretch,.pageform div.row.stretch{justify-content:space-between}.baseform ul,.pageform ul{padding:0;margin:0}.baseform ul li,.pageform ul li{list-style-type:none}.pageform{padding:1em;width:300px;margin:0 auto}.tag-input .tag-suggester{width:100%;position:relative}.tag-input .tag-suggester>.suggest-dropdown{display:flex;align-items:start;width:100%;top:100%;position:absolute;z-index:10;overflow:auto;background-color:#2d2d2de0}.tag-input .tag-suggester>.suggest-dropdown:not(:empty){padding:.2em}.tag-input .tag-container{display:flex;flex-flow:row wrap}.tag-input .tag-container:empty{display:none}.tag-input .tag-container>a{display:flex;justify-content:space-between;overflow:hidden;align-items:baseline;margin:.2em;padding:.35em .6em;border-radius:4px;background-color:#121212ff;cursor:pointer}.tag-input .tag-container>a .content{margin:0 .4em;flex-grow:1;flex-basis:100%;word-break:break-all;word-wrap:break-word}.tag-input .tag-container>a .count{font-size:.8em;margin-right:.4em}.tag-input .tag-container>a>*{pointer-events:none}.tag-input .tag-container>a:not(:hover) span.close{opacity:0}.tag-input .tag-container>a:not(:hover) span.plus{opacity:0}.tag-input .tag-container>a.tagselected{background-color:#400808ff}.tag-input .tag-container>a.tag_hide{display:none}header{display:flex;align-items:baseline;padding:0 10px;background-color:#222}header>a.logo{font-size:2em;margin:6px}@media(max-width:559px){header{position:relative}}header>nav{flex-grow:1;display:flex}header>nav>._overlay{display:none}@media(max-width:559px){header>nav{display:none}header>nav._drop{display:flex;flex-flow:column nowrap;position:absolute;margin:0;top:100%;left:0;right:0;z-index:10;background-color:#111d}header>nav>a,header>nav a#user-menu,header>nav .user_dropdown>a{padding:12px;padding-left:24px}header>nav>a:hover,header>nav>a:active,header>nav a#user-menu:hover,header>nav a#user-menu:active,header>nav .user_dropdown>a:hover,header>nav .user_dropdown>a:active{background-color:#333}header>nav .user::before{content:"";display:block;border-top:1px solid grey;margin:2px 12px}header>nav .user #user-menu{display:block}header>nav .user .user_dropdown{display:flex;flex-flow:column nowrap}header>nav>._overlay{display:block;position:fixed;width:100%;height:100%;z-index:-1;background-color:#0006}html.oh{overflow:hidden}}@media(min-width:560px){header>nav{margin:0 5px;align-items:center}header>nav>*{margin:0 5px;padding:6px 0}header>nav>.user{padding:0;margin-left:auto;margin-right:0;position:relative}header>nav>.user #user-menu{display:block;padding:6px 10px}header>nav>.user .user_dropdown{display:none}header>nav>.user .user_dropdown a{padding:10px}header>nav>.user .user_dropdown a:hover{background-color:#333}header>nav>.user:hover>.user_dropdown{display:flex;flex-flow:column nowrap;position:absolute;margin:0;top:100%;right:0;z-index:10;background-color:#111d}}header>#nav-menu{display:none}@media(max-width:559px){header>#nav-menu{display:block;margin:5px;margin-left:auto;padding:0 2px;align-self:center;font-size:2em;cursor:pointer}}.main-wrap{margin:0 auto;max-width:1300px;padding:8px;padding-top:0;padding-bottom:0}.main-wrap .important-subwrap{display:flex;overflow:visible}@media(max-width:899px){.main-wrap .important-subwrap{flex-flow:column nowrap}}@media(min-width:900px){.main-wrap .important-subwrap{flex-flow:row nowrap}}.main-wrap .important-subwrap>section.sidepanel{flex-shrink:0;padding:10px}@media(min-width:900px){.main-wrap .important-subwrap>section.sidepanel{width:18rem;height:0}}.main-wrap .important-subwrap>section.sidepanel article:not(:last-child){margin-bottom:10px}@media(max-width:899px){.main-wrap .important-subwrap>section.sidepanel article.tags .tag-container,.main-wrap .important-subwrap>section.sidepanel article.post-edit .tag-container{flex-flow:row wrap}}@media(min-width:900px){.main-wrap .important-subwrap>section.sidepanel article.tags .tag-container,.main-wrap .important-subwrap>section.sidepanel article.post-edit .tag-container{flex-flow:column nowrap;align-items:start}.main-wrap .important-subwrap>section.sidepanel article.tags .suggest-dropdown,.main-wrap .important-subwrap>section.sidepanel article.post-edit .suggest-dropdown{flex-flow:row wrap}.main-wrap .important-subwrap>section.sidepanel article.tags .suggest-dropdown a,.main-wrap .important-subwrap>section.sidepanel article.post-edit .suggest-dropdown a{width:100%}}.main-wrap .important-subwrap>section.sidepanel article.rating ul{padding:0}.main-wrap .important-subwrap>section.sidepanel article.rating ul li{list-style-type:none}.main-wrap .important-subwrap>section.sidepanel article.post-desc{display:flex;flex-flow:column nowrap;font-size:.9em}.main-wrap .important-subwrap>section.sidepanel article.post-desc>img{display:block;max-width:128px}.main-wrap .important-subwrap>section.sidepanel article.sidenav>a{display:block;padding:.3em 1em}@media(min-width:900px){.main-wrap .important-subwrap>section:not(.sidepanel){width:100%}}.main-wrap section.post-list{overflow:hidden}@media(max-width:559px){.main-wrap section.post-list{margin-left:-8px;margin-right:-8px}}.main-wrap section.post-list .posts{display:flex;flex-flow:row wrap}@media(max-width:899px){.main-wrap section.post-list .posts{margin-left:-8px;margin-right:-8px}}.main-wrap section.post-list .posts::after{content:"";flex:10000 0 350px}.main-wrap section.post-list .posts>figure{position:relative;margin:8px}.main-wrap section.post-list .posts>figure img{display:block;width:100%;height:100%;transition:.2s ease}.main-wrap section.post-list .posts>figure:hover img{opacity:.7}@media(min-width:900px){.main-wrap section.post-single{padding:8px}}@media(max-width:899px){.main-wrap section.post-single{order:-1;margin-bottom:8px}}@media(max-width:559px){.main-wrap section.post-single{margin-left:-8px;margin-right:-8px}}.main-wrap section.post-single img{display:block;max-width:100%}.main-wrap section.comments{padding:10px}@media(min-width:900px){.main-wrap section.comments{margin-left:18rem}}.main-wrap section.comments>.comment-container{padding:0 10px;max-width:500px}.main-wrap section.comments>.comment-container article.comment{overflow:hidden;margin-bottom:1em}.main-wrap section.comments>.comment-container article.comment p,.main-wrap section.comments>.comment-container article.comment textarea{margin:0}.main-wrap section.comments>.comment-container article.comment p.deleted,.main-wrap section.comments>.comment-container article.comment textarea.deleted{color:red}.main-wrap section.comments>.comment-container article.comment .comment-head{display:flex;justify-content:space-between}.main-wrap section.management-table table{margin:0 auto}.main-wrap section.management-table tr{background-color:#303030}.main-wrap section.management-table tr th,.main-wrap section.management-table tr td{padding:6px 10px}.main-wrap section.management-table tr th{background-color:#606060}.main-wrap section.management-table tr label>input{display:none}.main-wrap section.management-table tr .fa{padding:4px 4px;align-self:center;font-size:1.5em;cursor:pointer}@media(min-width:900px){.main-wrap section.manage-profile{margin-right:18rem}}.main-wrap .pagin{margin:10px 0;display:flex;flex-flow:row nowrap;justify-content:center}.main-wrap .pagin>a{display:block;background-color:#0005;padding:8px 12px;margin:0 2px}footer{padding:10px;text-align:center}*{box-sizing:border-box}body{margin:0;font-family:Verdana,Geneva,Tahoma,sans-serif;background-color:#222;color:#fff}a{color:#bbb;text-decoration:none}a:hover{color:#909090;text-decoration:none} \ No newline at end of file +.flash_msgs{display:flex;flex-flow:column-reverse nowrap;position:fixed;z-index:20;bottom:0;right:0;margin:0;padding:10px;font-size:.9em;pointer-events:none}.flash_msgs>li{width:250px;padding:10px;list-style-type:none;background-color:#000c;overflow:hidden;opacity:0;animation:fade 7s normal}.flash_msgs>li:not(:first-child){margin-bottom:10px}@keyframes fade{0%,100%{opacity:0}20%,80%{opacity:1}}.flash_msgs>li.error{background-color:#500c}h2{margin:0;margin-bottom:.5em}h3{margin:0;margin-bottom:.5em;font-size:1.3em}h4{margin:0;margin-bottom:.8em;margin-top:.4em}.comment-form{margin-left:10px;max-width:500px}.comment-form input:required{box-shadow:none}.editingable:not(.time-to-edit) .edit{display:none}.editingable.time-to-edit .notedit{display:none}input[type=text],input[type=password],textarea{background:#444a;border:1px solid #444;color:inherit;display:block;padding:.5em;margin:.3em 0}input[type=text],input[type=password]{width:100%}textarea{resize:vertical;width:100%}input[type=submit]{background:#444a;border:2px solid #666a;border-radius:4px;color:inherit;padding:.4em 1.8em}input[type=submit]:active{background:#000a;border:2px solid #444a}label{padding:.4em}.baseform input[type=text],.baseform input[type=password],.baseform textarea,.pageform input[type=text],.pageform input[type=password],.pageform textarea{width:100%}.baseform input[type=checkbox],.pageform input[type=checkbox]{margin:.5em}.baseform input[type=submit],.pageform input[type=submit]{margin:.2em 0}.baseform form>input,.baseform form>div,.pageform form>input,.pageform form>div{margin:.8em 0}.baseform div.row,.pageform div.row{padding:.2em;display:flex;align-items:center}.baseform div.row.stretch,.pageform div.row.stretch{justify-content:space-between}.baseform ul,.pageform ul{padding:0;margin:0}.baseform ul li,.pageform ul li{list-style-type:none}.pageform{padding:1em;width:300px;margin:0 auto}.tag-input .tag-suggester{width:100%;position:relative}.tag-input .tag-suggester>.suggest-dropdown{display:flex;align-items:start;width:100%;top:100%;position:absolute;z-index:10;overflow:auto;background-color:#2d2d2de0}.tag-input .tag-suggester>.suggest-dropdown:not(:empty){padding:.2em}.tag-input .tag-suggester>.suggest-dropdown>a.sug-sel{background-color:#242424}.tag-input .tag-container{display:flex;flex-flow:row wrap}.tag-input .tag-container:empty{display:none}.tag-input .tag-container>a{display:flex;justify-content:space-between;overflow:hidden;align-items:baseline;margin:.2em;padding:.35em .6em;border-radius:4px;background-color:#121212ff;cursor:pointer}.tag-input .tag-container>a .content{margin:0 .4em;flex-grow:1;flex-basis:100%;word-break:break-all;word-wrap:break-word}.tag-input .tag-container>a .count{font-size:.8em;margin-right:.4em}.tag-input .tag-container>a>*{pointer-events:none}.tag-input .tag-container>a:not(:hover) span.close{opacity:0}.tag-input .tag-container>a:not(:hover) span.plus{opacity:0}.tag-input .tag-container>a.tagselected{background-color:#400808ff}.tag-input .tag-container>a.tag_hide{display:none}header{display:flex;align-items:baseline;padding:0 10px;background-color:#222}header>a.logo{font-size:2em;margin:6px}@media(max-width:559px){header{position:relative}}header>nav{flex-grow:1;display:flex}header>nav>._overlay{display:none}@media(max-width:559px){header>nav{display:none}header>nav._drop{display:flex;flex-flow:column nowrap;position:absolute;margin:0;top:100%;left:0;right:0;z-index:10;background-color:#111d}header>nav>a,header>nav a#user-menu,header>nav .user_dropdown>a{padding:12px;padding-left:24px}header>nav>a:hover,header>nav>a:active,header>nav a#user-menu:hover,header>nav a#user-menu:active,header>nav .user_dropdown>a:hover,header>nav .user_dropdown>a:active{background-color:#333}header>nav .user::before{content:"";display:block;border-top:1px solid grey;margin:2px 12px}header>nav .user #user-menu{display:block}header>nav .user .user_dropdown{display:flex;flex-flow:column nowrap}header>nav>._overlay{display:block;position:fixed;width:100%;height:100%;z-index:-1;background-color:#0006}html.oh{overflow:hidden}}@media(min-width:560px){header>nav{margin:0 5px;align-items:center}header>nav>*{margin:0 5px;padding:6px 0}header>nav>.user{padding:0;margin-left:auto;margin-right:0;position:relative}header>nav>.user #user-menu{display:block;padding:6px 10px}header>nav>.user .user_dropdown{display:none}header>nav>.user .user_dropdown a{padding:10px}header>nav>.user .user_dropdown a:hover{background-color:#333}header>nav>.user:hover>.user_dropdown{display:flex;flex-flow:column nowrap;position:absolute;margin:0;top:100%;right:0;z-index:10;background-color:#111d}}header>#nav-menu{display:none}@media(max-width:559px){header>#nav-menu{display:block;margin:5px;margin-left:auto;padding:0 2px;align-self:center;font-size:2em;cursor:pointer}}.main-wrap{margin:0 auto;max-width:1300px;padding:8px;padding-top:0;padding-bottom:0}.main-wrap .important-subwrap{display:flex;overflow:visible}@media(max-width:899px){.main-wrap .important-subwrap{flex-flow:column nowrap}}@media(min-width:900px){.main-wrap .important-subwrap{flex-flow:row nowrap}}.main-wrap .important-subwrap>section.sidepanel{flex-shrink:0;padding:10px}@media(min-width:900px){.main-wrap .important-subwrap>section.sidepanel{width:18rem;height:0}}.main-wrap .important-subwrap>section.sidepanel article:not(:last-child){margin-bottom:10px}@media(max-width:899px){.main-wrap .important-subwrap>section.sidepanel article.tags .tag-container,.main-wrap .important-subwrap>section.sidepanel article.post-edit .tag-container{flex-flow:row wrap}}@media(min-width:900px){.main-wrap .important-subwrap>section.sidepanel article.tags .tag-container,.main-wrap .important-subwrap>section.sidepanel article.post-edit .tag-container{flex-flow:column nowrap;align-items:start}.main-wrap .important-subwrap>section.sidepanel article.tags .suggest-dropdown,.main-wrap .important-subwrap>section.sidepanel article.post-edit .suggest-dropdown{flex-flow:row wrap}.main-wrap .important-subwrap>section.sidepanel article.tags .suggest-dropdown a,.main-wrap .important-subwrap>section.sidepanel article.post-edit .suggest-dropdown a{width:100%}}.main-wrap .important-subwrap>section.sidepanel article.rating ul{padding:0}.main-wrap .important-subwrap>section.sidepanel article.rating ul li{list-style-type:none}.main-wrap .important-subwrap>section.sidepanel article.post-desc{display:flex;flex-flow:column nowrap;font-size:.9em}.main-wrap .important-subwrap>section.sidepanel article.post-desc>img{display:block;max-width:128px}.main-wrap .important-subwrap>section.sidepanel article.sidenav>a{display:block;padding:.3em 1em}@media(min-width:900px){.main-wrap .important-subwrap>section:not(.sidepanel){width:100%}}.main-wrap section.post-list{overflow:hidden}@media(max-width:559px){.main-wrap section.post-list{margin-left:-8px;margin-right:-8px}}.main-wrap section.post-list .posts{display:flex;flex-flow:row wrap}@media(max-width:899px){.main-wrap section.post-list .posts{margin-left:-8px;margin-right:-8px}}.main-wrap section.post-list .posts::after{content:"";flex:10000 0 350px}.main-wrap section.post-list .posts>figure{position:relative;margin:8px}.main-wrap section.post-list .posts>figure img{display:block;width:100%;height:100%;transition:.2s ease}.main-wrap section.post-list .posts>figure:hover img{opacity:.7}@media(min-width:900px){.main-wrap section.post-single{padding:8px}}@media(max-width:899px){.main-wrap section.post-single{order:-1;margin-bottom:8px}}@media(max-width:559px){.main-wrap section.post-single{margin-left:-8px;margin-right:-8px}}.main-wrap section.post-single img{display:block;max-width:100%}.main-wrap section.comments{padding:10px}@media(min-width:900px){.main-wrap section.comments{margin-left:18rem}}.main-wrap section.comments>.comment-container{padding:0 10px;max-width:500px}.main-wrap section.comments>.comment-container article.comment{overflow:hidden;margin-bottom:1em}.main-wrap section.comments>.comment-container article.comment p,.main-wrap section.comments>.comment-container article.comment textarea{margin:0}.main-wrap section.comments>.comment-container article.comment p.deleted,.main-wrap section.comments>.comment-container article.comment textarea.deleted{color:red}.main-wrap section.comments>.comment-container article.comment .comment-head{display:flex;justify-content:space-between}.main-wrap section.management-table table{margin:0 auto}.main-wrap section.management-table tr{background-color:#303030}.main-wrap section.management-table tr th,.main-wrap section.management-table tr td{padding:6px 10px}.main-wrap section.management-table tr th{background-color:#606060}.main-wrap section.management-table tr label>input{display:none}.main-wrap section.management-table tr .fa{padding:4px 4px;align-self:center;font-size:1.5em;cursor:pointer}@media(min-width:900px){.main-wrap section.manage-profile{margin-right:18rem}}.main-wrap .pagin{margin:10px 0;display:flex;flex-flow:row nowrap;justify-content:center}.main-wrap .pagin>a{display:block;background-color:#0005;padding:8px 12px;margin:0 2px}footer{padding:10px;text-align:center}*{box-sizing:border-box}body{margin:0;font-family:Verdana,Geneva,Tahoma,sans-serif;background-color:#222;color:#fff}a{color:#bbb;text-decoration:none}a:hover{color:#909090;text-decoration:none} \ No newline at end of file diff --git a/yadc/static/all.js b/yadc/static/all.js index eccb6fb..8dd5ae6 100644 --- a/yadc/static/all.js +++ b/yadc/static/all.js @@ -197,12 +197,21 @@ taginputs.forEach(function (tinput) { // }) // } let vals = suggest_input.value.split(' ') - console.log(vals) + // console.log(vals) vals.forEach(tag => { if (tag == '') return add_selected(tag) }); suggest_input.removeAttribute('value') // Disable prefill by browser + + function select_suggestion(tagelement) { + add_selected(tagelement.dataset.tagname) + suggest_input.value = '' + render_suggestions([]) + + // yeeeeeeeet + setTimeout(() => suggest_input.focus(), 2) + } function render_suggestions(data) { // 3 references let drop = suggest_dropdown @@ -220,9 +229,7 @@ taginputs.forEach(function (tinput) { let sugtag = create_suggestion_tag(el.content) sugtag.addEventListener('click', (event) => { - add_selected(event.target.dataset.tagname) - sug_input.value = '' - render_suggestions([]) + select_suggestion(event.target) event.preventDefault() }) @@ -252,15 +259,58 @@ taginputs.forEach(function (tinput) { // fill suggestions // console.log(data) render_suggestions(data) + update_sug_selection('0') }) }, 500) }) - // search_input.addEventListener('keypress', (event) => { - // if (event.keyCode == 13) { - // // event.preventDefault() - // } - // }) + let sug_selected = 0 + function update_sug_selection(move) { + let suggs = suggest_dropdown.querySelectorAll('a.tagsuggestion') + let last_selected = sug_selected + + let subs = move.substring(0, 1) + if (subs == '+') { + sug_selected += parseInt(move.substring(1)) + } else if (subs == '-') { + sug_selected -= parseInt(move.substring(1)) + } else { + sug_selected = parseInt(move) + } + + sug_selected = sug_selected%suggs.length + if (sug_selected < 0) sug_selected += suggs.length + + try { + suggs[last_selected].classList.remove('sug-sel') + } catch (error) { + // console.log(error) + } + try { + suggs[sug_selected].classList.add('sug-sel') + } catch (error) { + // console.log(error) + } + } + + suggest_input.addEventListener('keydown', (event) => { + // console.log(event) + if (event.keyCode == 13) { + if (suggest_input.value) { + select_suggestion(suggest_dropdown.querySelector('a.tagsuggestion.sug-sel')) + event.preventDefault() + } + } + if (event.keyCode == 40 || (event.keyCode == 9 && !event.shiftKey)) { + update_sug_selection('+1') + event.preventDefault() + } + if (event.keyCode == 38 || (event.keyCode == 9 && event.shiftKey)) { + update_sug_selection('-1') + event.preventDefault() + } + }) + // search_input.addEventListener('blur', (event) => { // if (event.explicitOriginalTarget != null) { // classlist = event.explicitOriginalTarget.parentNode.classList