From 3839dfbf90ab38b31373ee7b2f80fbefa74b88ec Mon Sep 17 00:00:00 2001 From: rubenwardy Date: Fri, 5 Feb 2021 16:19:34 +0000 Subject: [PATCH] Fix tag selector dropdown style --- app/public/static/tagselector.js | 242 ++++++------------------ app/scss/components.scss | 8 + app/templates/base.html | 4 +- app/templates/macros/forms.html | 38 +--- app/templates/packages/create_edit.html | 15 +- app/templates/packages/screenshots.html | 2 +- 6 files changed, 68 insertions(+), 241 deletions(-) diff --git a/app/public/static/tagselector.js b/app/public/static/tagselector.js index c9ea4a57..e842e461 100644 --- a/app/public/static/tagselector.js +++ b/app/public/static/tagselector.js @@ -1,6 +1,6 @@ /*! * Tag Selector plugin for jQuery: Facilitates selecting multiple tags by extending jQuery UI Autocomplete. - * You may use Tag Selector under the terms of either the MIT License or the GNU General Public License (GPL) Version 2. + * License: MIT * https://petprojects.googlecode.com/svn/trunk/MIT-LICENSE.txt */ (function($) { @@ -20,7 +20,6 @@ function show_error(input, msg) { const err = input.parent().parent().find(".invalid-remaining"); - console.log(err.length); err.text(msg); err.show(); } @@ -30,14 +29,22 @@ const selector = $(this), input = $('input[type=text]', this); - selector.click(function() { input.focus(); }) + const lookup = {}; + for (let i = 0; i < source.length; i++) { + lookup[source[i].id] = source[i]; + } + + selector.click(() => input.focus()) .delegate('.badge a', 'click', function() { const id = $(this).parent().data("id"); select.find("option[value=" + id + "]").attr("selected", false) recreate(); }); - function addTag(id, text) { + function addTag(item) { + const id = item.id; + + let text = item.text; const idx = text.indexOf(':'); if (idx > 0) { text = text.substr(0, idx); @@ -57,7 +64,7 @@ selector.find("span").remove(); select.find("option").each(function() { if (this.hasAttribute("selected")) { - addTag(this.getAttribute("value"), this.innerText); + addTag(lookup[this.getAttribute("value")]); } }); } @@ -65,185 +72,44 @@ input.focusout(function() { const value = input.val().trim(); - if (value != "") { - show_error(input, "Please select an existing tag, it;s not possible to add custom ones."); + if (value !== "") { + show_error(input, "Please select an existing tag, it's not possible to add custom ones."); } }) input.keydown(function(e) { - if (e.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) - e.preventDefault(); - }) - .autocomplete({ - minLength: 0, - source: source, - select: function(event, ui) { - addTag(ui.item.id, ui.item.toString()); - input.val(""); - return false; - } - }).focus(function() { - // The following works only once. - // $(this).trigger('keydown.autocomplete'); - // As suggested by digitalPBK, works multiple times - // $(this).data("autocomplete").search($(this).val()); - // As noted by Jonny in his answer, with newer versions use uiAutocomplete - $(this).data("ui-autocomplete").search($(this).val()); - }); + if (e.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) { + e.preventDefault(); + } + }).autocomplete({ + minLength: 0, + source: source, + select: function(event, ui) { + addTag(ui.item); + input.val(""); + return false; + } + }).focus(function() { + $(this).data("ui-autocomplete").search($(this).val()); + }); input.data('ui-autocomplete')._renderItem = function(ul, item) { - return $('
  • ') - .data('item.autocomplete', item) - .append($('').html(item.toString())) - .appendTo(ul); - }; + return $('
  • ') + .data('item.autocomplete', item) + .append($('').html(item.toString())) + .appendTo(ul); + }; - input.data('ui-autocomplete')._resizeMenu = function(ul, item) { - var ul = this.menu.element; - ul.outerWidth(Math.max( - ul.width('').outerWidth(), - selector.outerWidth() - )); - }; + input.data('ui-autocomplete')._resizeMenu = function() { + const ul = this.menu.element; + ul.outerWidth(Math.max( + ul.width('').outerWidth(), + selector.outerWidth() + )); + }; }); } - $.fn.csvSelector = function(source, name, result, allowSlash) { - return this.each(function() { - const selector = $(this), - input = $('input[type=text]', this); - - let selected = []; - const lookup = {}; - for (var i = 0; i < source.length; i++) { - lookup[source[i].id] = source[i]; - } - - selector.click(function() { input.focus(); }) - .delegate('.badge a', 'click', function() { - const id = $(this).parent().data("id"); - for (let i = 0; i < selected.length; i++) { - if (selected[i] == id) { - selected.splice(i, 1); - } - } - recreate(); - }); - - function selectItem(id) { - for (let i = 0; i < selected.length; i++) { - if (selected[i] == id) { - return false; - } - } - selected.push(id); - return true; - } - - function addTag(id, value) { - const tag = $('') - .text(value) - .data("id", id) - .append(' x') - .insertBefore(input); - - input.attr("placeholder", null); - hide_error(input); - } - - function recreate() { - selector.find("span").remove(); - for (let i = 0; i < selected.length; i++) { - const value = lookup[selected[i]] || {value: selected[i]}; - addTag(selected[i], value.value); - } - result.val(selected.join(",")) - } - - function readFromResult() { - selected = []; - const selected_raw = result.val().split(","); - for (let i = 0; i < selected_raw.length; i++) { - const raw = selected_raw[i].trim(); - if (lookup[raw] || raw.match(/^([a-z0-9_]+)$/)) { - selected.push(raw); - } - } - - recreate(); - } - readFromResult(); - - result.change(readFromResult); - - input.focusout(function() { - const item = input.val(); - if (item.length == 0) { - input.data("ui-autocomplete").search(""); - } else if (item.match(/^([a-z0-9_]+)$/)) { - selectItem(item); - recreate(); - input.val(""); - } - return true; - }); - - input.keydown(function(e) { - if (e.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) - e.preventDefault(); - else if (e.keyCode === $.ui.keyCode.COMMA) { - var item = input.val(); - if (item.length == 0) { - input.data("ui-autocomplete").search(""); - } else if (item.match(/^([a-z0-9_]+)$/)) { - selectItem(item); - recreate(); - input.val(""); - } else { - show_error(input, "Only lowercase alphanumeric and number names allowed."); - } - e.preventDefault(); - return true; - } else if (e.keyCode === $.ui.keyCode.BACKSPACE) { - if (input.val() == "") { - var item = selected[selected.length - 1]; - selected.splice(selected.length - 1, 1); - recreate(); - if (!(item.indexOf("/") > 0)) - input.val(item); - e.preventDefault(); - return true; - } - } - }) - .autocomplete({ - minLength: 0, - source: source, - select: function(event, ui) { - selectItem(ui.item.id); - recreate(); - input.val(""); - return false; - } - }); - - input.data('ui-autocomplete')._renderItem = function(ul, item) { - return $('
  • ') - .data('item.autocomplete', item) - .append($('').text(item.toString())) - .appendTo(ul); - }; - - input.data('ui-autocomplete')._resizeMenu = function(ul, item) { - var ul = this.menu.element; - ul.outerWidth(Math.max( - ul.width('').outerWidth(), - selector.outerWidth() - )); - }; - }); - } - $(function() { $(".multichoice_selector").each(function() { const ele = $(this); @@ -253,27 +119,25 @@ const options = []; sel.find("option").each(function() { const text = $(this).text(); - options.push({ + const option = { id: $(this).attr("value"), - value: text, + text: text, selected: !!$(this).attr("selected"), toString: function() { return make_bold(text); }, - }); + }; + + const idx = text.indexOf(":"); + if (idx > 0) { + option.title = text.substring(0, idx); + option.description = text.substring(idx + 1); + } else { + option.title = text + } + + options.push(option); }); ele.selectSelector(options, sel); }); - - $(".metapackage_selector").each(function() { - const input = $(this).parent().children("input[type='text']"); - input.hide(); - $(this).csvSelector(meta_packages, input.attr("name"), input); - }); - - $(".deps_selector").each(function() { - const input = $(this).parent().children("input[type='text']"); - input.hide(); - $(this).csvSelector(all_packages, input.attr("name"), input); - }); }); })(jQuery); diff --git a/app/scss/components.scss b/app/scss/components.scss index 31b72684..36b607c5 100644 --- a/app/scss/components.scss +++ b/app/scss/components.scss @@ -9,6 +9,7 @@ border: 1px solid #444 !important; overflow-x: hidden; overflow-y: auto; + max-width: 700px; max-height: 400px; li { @@ -22,6 +23,13 @@ padding: 0.3em 0.5em !important; margin: 0 !important; } + + a:hover, a:focus, li:focus a { + font-weight: normal !important; + text-decoration: none; + padding: 0.3em 0.5em !important; + margin: 0 !important; + } } .bulletselector { diff --git a/app/templates/base.html b/app/templates/base.html index b73aaf52..1d09b91d 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -6,7 +6,7 @@ {% block title %}title{% endblock %} - {{ config.USER_APP_NAME }} - + @@ -196,7 +196,7 @@ - + {% block scriptextra %}{% endblock %} diff --git a/app/templates/macros/forms.html b/app/templates/macros/forms.html index 45412127..dec9bf2d 100644 --- a/app/templates/macros/forms.html +++ b/app/templates/macros/forms.html @@ -58,9 +58,9 @@ {%- endmacro %} {% macro form_scripts() -%} - - - + + + {% endmacro %} {% macro package_lists() -%} @@ -113,38 +113,6 @@ {% endmacro %} -{% macro render_mpackage_field(field, label=None, label_visible=true, right_url=None, right_label=None) -%} -
    - {% if field.type != 'HiddenField' and label_visible %} - {% if not label %}{% set label=field.label.text %}{% endif %} - - {% endif %} -
    - -
    -
    - {{ field(class_='form-control', **kwargs) }} -
    - {{ render_errors(field) }} -
    -{% endmacro %} - -{% macro render_deps_field(field, label=None, label_visible=true, right_url=None, right_label=None) -%} -
    - {% if field.type != 'HiddenField' and label_visible %} - {% if not label %}{% set label=field.label.text %}{% endif %} - - {% endif %} -
    - -
    -
    - {{ field(class_='form-control', **kwargs) }} -
    - {{ render_errors(field) }} -
    -{% endmacro %} - {% macro render_checkbox_field(field, label=None) -%} {% if not label %}{% set label=field.label.text %}{% endif %}
    diff --git a/app/templates/packages/create_edit.html b/app/templates/packages/create_edit.html index 3cb8f039..2e0076d9 100644 --- a/app/templates/packages/create_edit.html +++ b/app/templates/packages/create_edit.html @@ -8,7 +8,7 @@ {% endblock %} {% from "macros/forms.html" import render_field, render_field_prefix_button, render_submit_field, form_scripts, - render_multiselect_field, render_mpackage_field, render_deps_field, package_lists %} + render_multiselect_field, package_lists %} {% block scriptextra %} {{ form_scripts() }} @@ -87,19 +87,6 @@ {{ render_field(form.desc, class_="pkg_meta", fieldclass="form-control markdown") }} -
    - {{ _("Dependencies") }} - -

    - - - {{ _("Note: This information is now updated automatically when creating a release.") }} -

    - - {# {{ render_deps_field(form.harddep_str, class_="not_txp not_game", placeholder="Comma separated list") }} - {{ render_deps_field(form.softdep_str, class_="not_txp not_game", placeholder="Comma separated list") }} #} -
    -
    {{ _("Repository and Links") }} diff --git a/app/templates/packages/screenshots.html b/app/templates/packages/screenshots.html index 03d83ea9..0c7cea88 100644 --- a/app/templates/packages/screenshots.html +++ b/app/templates/packages/screenshots.html @@ -77,7 +77,7 @@ {% endblock %} {% block scriptextra %} - +