Skip to content
This repository was archived by the owner on Apr 8, 2022. It is now read-only.

Tami/boolean operators #10

Draft
tamirissg wants to merge 12 commits into
base: master
Choose a base branch
from
Draft

Tami/boolean operators #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0ad5a22
Init boolean operators feature
felipemsantana Aug 17, 2020
9939561
boolean search
tamirissg Sep 8, 2020
02ecf21
boolean search
tamirissg Sep 9, 2020
7dd8fd2
refactoring and correcting
tamirissg Sep 10, 2020
a85102a
Fix tooltips
felipemsantana Sep 10, 2020
6a82ee5
Add enableFooterBooleanOperators option
felipemsantana Sep 10, 2020
7bf6241
refactoring and correcting
tamirissg Sep 10, 2020
dfdc314
refactoring and correcting
tamirissg Sep 10, 2020
bffc2d8
tests
tamirissg Sep 11, 2020
0788af3
tests
tamirissg Sep 11, 2020
6b90e92
boolean search tests
tamirissg Sep 11, 2020
fff0120
tooltip-lg implementation
tamirissg Sep 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions auto-complete.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,30 @@
.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
.autocomplete-suggestion.selected { background: #f0f0f0; }

.autocomplete-chip {
border: 1px solid transparent;
margin-right: 12px;
}

.autocomplete-chip:hover {
border-color:black;

@felipemsantana felipemsantana Sep 14, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
border-color:black;
border-color: black;

}

.autocomplete-chip::before {

@felipemsantana felipemsantana Sep 14, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This element does not have any text, also it should keep the mystique default style, remove

font-size: 14px;
line-height: 16px;
letter-spacing: 0.4px;
}

.autocomplete-boolean-button {
font-size: 10px;
line-height: 16px;
margin-inline-start: 10px;
align-items: center;

@felipemsantana felipemsantana Sep 14, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does not work without flex, remove

letter-spacing: 0.4px;
}

.row{
margin-inline-start: 5px;
}
Comment on lines +34 to +36

@felipemsantana felipemsantana Sep 14, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this, it's a mystique class

79 changes: 77 additions & 2 deletions auto-complete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,78 @@
});
}


function createTooltipChip(tooltip, text) {

return (
'<span class="autocomplete-chip chip chip--outline chip--sm tooltip-lg" data-toggle="tooltip" data-placement="bottom-right" data-tooltip ="' +
tooltip +
'">' +
text +
'</span>'
);
}

var booleanTooltips = (
'<div class="row">' +
createTooltipChip('Identifique as palavras ou termos que, obrigatoriamente,estejam na sua pesquisa. Exemplo: Direitos E Humanos', 'E') +
createTooltipChip('Identifique palavras ou termos para obter resultados com pelo menos uma das palavras-chave especificadas. É possível utilizar parênteses para agrupar frases. Exemplo: (Dano moral) OU (Recurso Especial)', 'OU') +
createTooltipChip('Nenhum dos resultados conterão o(s) termo(s) excludentes, indicados após o NÃO. Exemplo: (dano moral) NÃO material', 'Não Incluir') +
createTooltipChip('Os resultados conterão os termos na ordem exata e com a exata grafia indicada. Exemplo: princípio da presunção de inocência', 'Exatamente') +
'</div>'
);

function cumulativeOffset(element) {
var top = 0;
var left = 0;
do {
top += element.offsetTop || 0;
left += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return {
top: top,
left: left,
};
}

function createOverElemTooltip() {
var pos = cumulativeOffset(this);
// + 1 to consider border as offset
var left = pos.left + 1;
var top = pos.top + 1;
var clonedNode = this.cloneNode(true);
clonedNode.style =
'color:transparent;box-shadow:none;z-index:10000;position:absolute;left:' + left + 'px;top:' + top + 'px';

@felipemsantana felipemsantana Sep 14, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
'color:transparent;box-shadow:none;z-index:10000;position:absolute;left:' + left + 'px;top:' + top + 'px';
'color:transparent;box-shadow:none;z-index:10000;position:absolute;left:' + left + 'px;top:' + top + 'px';


addEvent(clonedNode, 'mouseout', function () {

@felipemsantana felipemsantana Sep 14, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where is the remove child function?

});
document.body.appendChild(clonedNode);
}

function replaceButtonWithTooltips() {
var parentElement = this.parentElement;
if (parentElement) {
parentElement.innerHTML = booleanTooltips;

var chips = document.getElementsByClassName('autocomplete-chip');
for (var i = 0; i < chips.length; i++) {
var chip = chips[i];
addEvent(chip, 'mouseenter', createOverElemTooltip);
}
}
}

var footerBooleanOperators = (
'<hr style= "width: 575px">' +
'<div>' +
'<button class="btn btn--flat btn--sm btn--blue autocomplete-boolean-button">' +
'DICAS PARA ESPECIFICAR SUA BUSCA' +
'</button>' +
'</div>'
);

var o = {
selector: 0,
source: 0,
Expand All @@ -81,7 +153,8 @@
queryHistoryStorageName: null,
formSelector: null,
buildTerm: function (term) { return term },
target: null
target: null,
enableFooterBooleanOperators: false
};
for (var k in options) { if (options.hasOwnProperty(k)) o[k] = options[k]; }

Expand Down Expand Up @@ -170,6 +243,8 @@
removeQueryFromLocalStorage(o.queryHistoryStorageName, rawData[index]);
}, that.sc);

live('autocomplete-boolean-button', 'click', replaceButtonWithTooltips);

that.blurHandler = function () {
try { var over_sb = document.querySelector('.autocomplete-suggestions:hover'); } catch (e) { var over_sb = 0; }
if (!over_sb) {
Expand All @@ -196,7 +271,7 @@
if (data.length) {
var s = '';
for (var i = 0; i < data.length; i++) s += o.renderItem(data[i], val, i);
that.sc.innerHTML = s;
that.sc.innerHTML = s + (o.enableFooterBooleanOperators ? footerBooleanOperators : '');
that.updateSC(0);
}
else
Expand Down
2 changes: 2 additions & 0 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300">
<link rel="stylesheet" href="https://cdn.rawgit.com/yahoo/pure-release/v0.6.0/pure-min.css">
<link rel="stylesheet" href="https://static.jusbr.com/mystique/2.18.5/css/mystique.min.css">
<style>
body { margin: 0; padding: 0; border: 0; min-width: 320px; color: #777; }
html, button, input, select, textarea, .pure-g [class *= "pure-u"] { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.02em; }
Expand Down Expand Up @@ -273,6 +274,7 @@ <h4>Advanced suggestions handling and custom layout</h4>
var demo1 = new autoComplete({
selector: '#hero-demo',
minChars: 1,
enableFooterBooleanOperators: true,
source: function(term, suggest){
term = term.toLowerCase();
var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML'];
Expand Down
Loading