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

Tami/boolean operators #10

Draft
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 3 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
8 changes: 8 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,11 @@
.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; }

.chip
{
border: 1px solid transparent;
}
.chip:hover {
border: 1px solid black;
}
Copy link
Member

Choose a reason for hiding this comment

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

You can't override mystique classes here, this will apply to all chips in the page, replacing the style everywhere.

Create a class for this purpose, like autocomplete-chip.

40 changes: 39 additions & 1 deletion auto-complete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,44 @@
});
}


window.changeText = () => {
Copy link
Member

Choose a reason for hiding this comment

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

Avoid using global object window for this, it's considered bad practice because of the unscoped access, you could easily replace this function in another place and will break this code.

Instead, create a local function

function changeText() { ... }

And add it using JS

var buttons = document.getElementsByClassName('autocomplete-boolean-button');
for (var i = 0; i < buttons.length; i++) {
  var button = buttons[i];
  button.addEventListener('click', changeText);
}


const newText =
`
Copy link
Member

Choose a reason for hiding this comment

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

Do not use ES2015+ syntax features, like arrow function, const or template string. Doing this will break the whole JS script for older browsers, all code from the Topbar JS will not work.

Use ES5 syntax.

<div style="margin: 0.4em" class="row">
Copy link
Member

Choose a reason for hiding this comment

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

margin: 0.4em? This does not seem to be correct, check with Predo.

<span style="font-size: 10px" type="button" class="chip chip--outline chip--sm" data-toggle="tooltip" data-placement="bottom-right"
Copy link
Member

Choose a reason for hiding this comment

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

type="button" is not a valid attribute here, also, it does not behave as a button.

Suggested change
<span style="font-size: 10px" type="button" class="chip chip--outline chip--sm" data-toggle="tooltip" data-placement="bottom-right"
<span style="font-size: 10px" class="chip chip--outline chip--sm" data-toggle="tooltip" data-placement="bottom-right"

Change in every other span.

data-tooltip ="Identifique as palavras ou termos que, obrigatoriamente, estejam na sua pesquisa.
Copy link
Member

Choose a reason for hiding this comment

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

Remove this space in other elements too

Suggested change
data-tooltip ="Identifique as palavras ou termos que, obrigatoriamente, estejam na sua pesquisa.
data-tooltip="Identifique as palavras ou termos que, obrigatoriamente, estejam na sua pesquisa.

Exemplo: Direitos E Humanos">
Copy link
Member

Choose a reason for hiding this comment

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

Line breaks are ignored and collapsed when using like this. I think this is not possible 🤔

E
</span>
<span style="font-size: 10px" type="button" class="chip chip--outline chip--sm" data-toggle="tooltip" data-placement="bottom-right"
data-tooltip ="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)" >
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
É possível utilizar parênteses para agrupar frases.Exemplo: (Dano moral) OU (Recurso Especial)" >
É possível utilizar parênteses para agrupar frases.Exemplo: (Dano moral) OU (Recurso Especial)">

OU
</span>
<span style="font-size: 12px" type="button" class="chip chip--outline chip--sm" data-toggle="tooltip" data-placement="bottom-right"
data-tooltip ="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
</span>
<span style="font-size: 12px" type="button" class="chip chip--outline chip--sm" data-toggle="tooltip" data-placement="bottom-right"
data-tooltip ="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
</span>
</div> `

document.getElementById('search').innerHTML = newText;
Copy link
Member

Choose a reason for hiding this comment

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

Avoid using id, this won't work if there is 2 or more elements in the same page with same id. Also, search is too common name to be used for id and likely to conflict.

Suggested change
document.getElementById('search').innerHTML = newText;
this.parentElement.innerHTML = newText;


}
var footerBooleanOperators = `
Copy link
Member

Choose a reason for hiding this comment

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

Do not use template string, for the same reason I said above.

<hr style="margin: 0.4em">
<div id= "search" style="margin-left: 0.6em" >
Copy link
Member

Choose a reason for hiding this comment

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

Do not use id, this script will be executed more than once in SERP home for example and the id will conflict.

Suggested change
<div id= "search" style="margin-left: 0.6em" >
<div style="margin-left: 0.6em">

Copy link
Member

Choose a reason for hiding this comment

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

Also, all sizes using em unit seems to be wrong, ask Predo about this.

<button class="btn btn--flat btn--blue" style="font-size: 10px" onclick= "changeText()" >
Copy link
Member

Choose a reason for hiding this comment

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

Like I said above

Suggested change
<button class="btn btn--flat btn--blue" style="font-size: 10px" onclick= "changeText()" >
<button class="btn btn--flat btn--blue autocomplete-boolean-button" style="font-size: 10px">

DICAS PARA ESPECIFICAR SUA BUSCA
</button>
</div>`
Copy link
Member

Choose a reason for hiding this comment

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

We use 2 spaces for indentation level

Suggested change
DICAS PARA ESPECIFICAR SUA BUSCA
</button>
</div>`
DICAS PARA ESPECIFICAR SUA BUSCA
</button>
</div>`



var o = {
selector: 0,
source: 0,
Expand Down Expand Up @@ -196,7 +234,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 + footerBooleanOperators;
that.updateSC(0);
}
else
Expand Down
1 change: 1 addition & 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