From 706dd519af1ca14abf0c84e50ed53b1dcb99f990 Mon Sep 17 00:00:00 2001 From: Ryan Cramer Date: Tue, 26 Feb 2019 08:07:45 -0500 Subject: [PATCH] Fix issue in InputfieldPageAutocomplete where it was displaying the wrong icon for item-sort, and it was also wasn't positioned quite right if the autocomplete appeared in a non-default tab. --- .../InputfieldPageAutocomplete.css | 2 +- .../InputfieldPageAutocomplete.js | 50 ++++++++++++------- .../InputfieldPageAutocomplete.module | 4 +- .../InputfieldPageAutocomplete.scss | 8 +-- 4 files changed, 36 insertions(+), 28 deletions(-) diff --git a/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.css b/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.css index 07ef7334..adecc2b3 100644 --- a/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.css +++ b/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.css @@ -1 +1 @@ -.pw-content .InputfieldPageAutocomplete p{margin:0}.pw-content .InputfieldPageAutocomplete ol{margin:0;list-style:none}.pw-content .InputfieldPageAutocomplete ol li{position:relative;margin:0 0 1px 0;padding-left:0;list-style:none;width:100%;line-height:1em;display:block;cursor:move}.pw-content .InputfieldPageAutocomplete ol li i.fa-sort{display:inline;float:left;margin-right:7px;position:relative;top:3px;left:3px;opacity:.7}.pw-content .InputfieldPageAutocomplete ol li .ui-icon-arrowthick-2-n-s{float:left;margin-top:1px}.pw-content .InputfieldPageAutocomplete ol li:last-child{margin-bottom:.5em}.pw-content .InputfieldPageAutocomplete input.no_list{padding-right:22px}.InputfieldPageAutocomplete ol li .itemLabel{display:block;padding:3px 0 3px 5px;cursor:move}.InputfieldPageAutocomplete ol li .itemRemove{position:absolute;right:3px;top:0}.InputfieldPageAutocomplete ol li .itemValue{display:none}.InputfieldPageAutocomplete ol li i.fa-trash{position:relative;top:2px;right:3px}.InputfieldPageAutocomplete ol li.itemTemplate{display:none !important}.InputfieldPageAutocomplete input[type=text]{width:100%;padding-left:18px}.InputfieldPageAutocomplete p{position:relative;margin-bottom:0}.InputfieldPageAutocomplete p i.fa{position:absolute;top:.5em;left:1px;opacity:.5}.InputfieldPageAutocomplete p i.fa.InputfieldPageAutocompleteRemove{left:auto;right:3px;cursor:pointer}.InputfieldPageAutocomplete p i.fa.InputfieldPageAutocompleteRemove:hover{opacity:1}.InputfieldPageAutocomplete .InputfieldPageAdd{display:none}.ui-autocomplete{max-height:230px;overflow-y:auto;overflow-x:hidden;box-shadow:0 1px 2px 2px rgba(0,0,0,.2)}.InputfieldPageAutocompleteNote{display:none} +.pw-content .InputfieldPageAutocomplete p{margin:0}.pw-content .InputfieldPageAutocomplete ol{margin:0;list-style:none}.pw-content .InputfieldPageAutocomplete ol li{position:relative;margin:0 0 1px 0;padding-left:0;list-style:none;width:100%;line-height:1em;display:block;cursor:move}.pw-content .InputfieldPageAutocomplete ol li .itemSort{display:inline;float:left;margin-right:7px;position:relative;top:3px;left:3px;opacity:.7}.pw-content .InputfieldPageAutocomplete ol li:last-child{margin-bottom:.5em}.pw-content .InputfieldPageAutocomplete input.no_list{padding-right:22px}.InputfieldPageAutocomplete ol li .itemLabel{display:block;padding:3px 0 3px 5px;cursor:move}.InputfieldPageAutocomplete ol li .itemRemove{position:absolute;right:3px;top:0}.InputfieldPageAutocomplete ol li .itemValue{display:none}.InputfieldPageAutocomplete ol li i.fa-trash{position:relative;top:2px;right:3px}.InputfieldPageAutocomplete ol li.itemTemplate{display:none !important}.InputfieldPageAutocomplete input[type=text]{width:100%;padding-left:18px}.InputfieldPageAutocomplete p{position:relative;margin-bottom:0}.InputfieldPageAutocomplete p i.fa{position:absolute;top:.5em;left:1px;opacity:.5}.InputfieldPageAutocomplete p i.fa.InputfieldPageAutocompleteRemove{left:auto;right:3px;cursor:pointer}.InputfieldPageAutocomplete p i.fa.InputfieldPageAutocompleteRemove:hover{opacity:1}.InputfieldPageAutocomplete .InputfieldPageAdd{display:none}.ui-autocomplete{max-height:230px;overflow-y:auto;overflow-x:hidden;box-shadow:0 1px 2px 2px rgba(0,0,0,.2)}.InputfieldPageAutocompleteNote{display:none} diff --git a/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.js b/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.js index 61dbf56b..caa75e9a 100644 --- a/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.js +++ b/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.js @@ -25,22 +25,6 @@ var InputfieldPageAutocomplete = { var disableChars = $input.attr('data-disablechars'); var noList = $input.hasClass('no_list'); - function setIconPosition($icon, side) { - var iconHeight = $icon.height(); - if(iconHeight) { - var pHeight = $icon.parent().height(); - var iconTop = ((pHeight - iconHeight) / 2); - $icon.css('top', iconTop + 'px'); - if(side == 'left') { - $icon.css('left', (iconTop / 2) + 'px'); - } else if(side == 'right') { - $icon.css('right', (iconTop / 4) + 'px'); - } - } else { - // icon is not visible (in a tab or collapsed field), we'll leave it alone - } - } - function hasDisableChar(str) { if(!disableChars || !disableChars.length) return false; var disable = false; @@ -53,14 +37,14 @@ var InputfieldPageAutocomplete = { return disable; } - setIconPosition($icon, 'left'); + InputfieldPageAutocomplete.setIconPosition($icon, 'left'); if(noList) { // specific to single-item autocompletes, where there is no separate "selected" list $input.attr('data-selectedLabel', $input.val()); var $remove = $input.siblings('.InputfieldPageAutocompleteRemove'); - setIconPosition($remove, 'right'); + InputfieldPageAutocomplete.setIconPosition($remove, 'right'); $remove.click(function() { $value.val('').change(); @@ -289,6 +273,28 @@ var InputfieldPageAutocomplete = { $a.addClass('InputfieldPageAutocompleteInit'); }, + /** + * Set position of icon within parent element + * + * @param $icon + * @param side Either 'left' or 'right' + * + */ + setIconPosition: function($icon, side) { + var iconHeight = $icon.height(); + if(iconHeight) { + var pHeight = $icon.parent().height(); + var iconTop = ((pHeight - iconHeight) / 2); + $icon.css('top', iconTop + 'px'); + if(side == 'left') { + $icon.css('left', (iconTop / 2) + 'px'); + } else if(side == 'right') { + $icon.css('right', (iconTop / 4) + 'px'); + } + } else { + // icon is not visible (in a tab or collapsed field), we'll leave it alone + } + }, /** * Callback function executed when a page is selected from PageList @@ -379,6 +385,14 @@ $(document).ready(function() { InputfieldPageAutocomplete.rebuildInput($ol); return false; }); + + $(document).on('wiretabclick', function(a, $tab) { + // update positions of icons that previously were not calculable + var $icon = $tab.find('.InputfieldPageAutocompleteStatus'); + InputfieldPageAutocomplete.setIconPosition($icon, 'left'); + $icon = $tab.find('.InputfieldPageAutocompleteRemove'); + InputfieldPageAutocomplete.setIconPosition($icon, 'right'); + }); }); diff --git a/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.module b/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.module index b93a3a53..0040f7ce 100644 --- a/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.module +++ b/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.module @@ -5,7 +5,7 @@ * * This Inputfield connects the jQuery UI Autocomplete widget with the ProcessWire ProcessPageSearch AJAX API. * - * ProcessWire 3.x, Copyright 2016 by Ryan Cramer + * ProcessWire 3.x, Copyright 2019 by Ryan Cramer * https://processwire.com * * @property int $parent_id Limit results to this parent, or if combined with findPagesSelector, the search is performed as $pages->get($parent_id)->find() rather than $pages->find(). @@ -108,7 +108,7 @@ class InputfieldPageAutocomplete extends Inputfield implements InputfieldHasArra $label = $this->wire('sanitizer')->entities($label); $out = "
  • " . - " " . + " " . "$value" . "$label " . "" . diff --git a/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.scss b/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.scss index ef9a44a9..0c76d51d 100644 --- a/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.scss +++ b/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.scss @@ -18,7 +18,7 @@ display: block; cursor: move; - i.fa-sort { + .itemSort { display: inline; float: left; margin-right: 7px; @@ -27,12 +27,6 @@ left: 3px; opacity: 0.7; } - - .ui-icon-arrowthick-2-n-s { - float: left; - margin-top: 1px; - } - } li:last-child { margin-bottom: 0.5em;