mirror/processwire
1
0
Fork 0
mirror of https://github.com/processwire/processwire.git synced 2025-08-24 07:13:08 +02:00
Code Issues Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Ryan Cramer
2019-02-26 08:07:45 -05:00
parent c80ae0acd8
commit 706dd519af
4 changed files with 36 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.css
View File

@@ -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}

50
wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.js
View File

@@ -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');
});
});

4
wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.module
View File

@@ -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 =
"<li class='ui-state-default$class'>" .
"<i class='fa fa-sort fa-fw'></i> " .
"<i class='itemSort fa fa-arrows fa-fw'></i> " .
"<span class='itemValue'>$value</span>" .
"<span class='itemLabel'>$label</span> " .
"<a class='itemRemove' href='#'><i class='fa fa-trash'></i></a>" .

8
wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.scss
View File

@@ -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;