Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

js/Add search term attributes #70

Closed
wants to merge 2 commits into from
Closed

js/Add search term attributes #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8894458
Add class `SimpleSearchField` and `simpleSuggestions`
sukhwinder33445 May 16, 2022
d2c7b49
Add less file `search-field.less`
sukhwinder33445 May 16, 2022
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
81 changes: 81 additions & 0 deletions asset/css/search-field.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
form.search-field {
.search-icon {
padding: 0.5em 0 0.5em 0.5em;
background-color: @searchbar-bg;
.rounded-corners(0.25em);
border-top-right-radius: unset;
border-bottom-right-radius: unset;
min-height: 26px;
margin-bottom: 0.25em;
}

input.search-field {
.rounded-corners(0.25em);
.appearance(none);
padding: 0.5em;
margin-bottom: 0.5em;
margin-right: 1em;
background-color: @searchbar-bg;
border: none;
border-top-left-radius: unset;
border-bottom-left-radius: unset;
background-image: unset;
}

input[type="submit"] {
.rounded-corners(3px);
margin-bottom: 0.5em;
max-width: 10em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: @primary-button-bg;
color: @primary-button-color;
border: 2px solid @primary-button-bg;
padding: ~"calc(0.5em - 2px) 1em";
}

#term-container {
margin-top: 1em;

label {
position: relative;

.trash-icon {
display: none;
position: absolute;
right: 9px;
top: 1px;
}

&:hover {
//badge for read-only mode
input[type="button"] {
background-color: @search-term-selected-bg;
color: @search-term-selected-color;
}

.trash-icon {
display: inline-block;
color: @cancel-button-color;
background-color: @search-term-selected-bg;
}
}

//badge
input[type="button"], input[type="text"] {
.rounded-corners(0.25em);
border: none;
padding: 0.5em;
margin-right: 0.5em;
margin-bottom: 0.5em;
max-width: 10em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: @search-term-bg;
color: @search-term-color;
}
}
}
}
170 changes: 170 additions & 0 deletions src/Control/SimpleSearchField.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<?php

namespace ipl\Web\Control;

use ipl\Html\Attributes;
use ipl\Html\Form;
use ipl\Html\FormElement\InputElement;
use ipl\Html\FormElement\SubmitElement;
use ipl\Html\HtmlElement;
use ipl\Web\Url;
use ipl\Web\Widget\Icon;

use function ipl\I18n\t;

/**
* Form for simple value based search
*/
class SimpleSearchField extends Form
{
protected $defaultAttributes = [
'class' => 'search-field',
'name' => 'search-field',
'role' => 'search'
];

/** @var string The term separator */
public const TERM_SEPARATOR = ',';

/** @var string The default search parameter */
public const DEFAULT_SEARCH_PARAM = 'q';

/** @var string The search parameter */
protected $searchParameter;

/** @var Url The suggestion url */
protected $suggestionUrl;

/** @var string Submit label */
protected $submitLabel;

/**
* Set the search parameter
*
* @param string $name
*
* @return $this
*/
public function setSearchParameter(string $name): self
{
$this->searchParameter = $name;

return $this;
}

/**
* Get the search parameter
*
* @return string
*/
public function getSearchParameter(): string
{
return $this->searchParameter ?: self::DEFAULT_SEARCH_PARAM;
}

/**
* Set the suggestion url
*
* @param Url $url
*
* @return $this
*/
public function setSuggestionUrl(Url $url): self
{
$this->suggestionUrl = $url;

return $this;
}

/**
* Get the suggestion url
*
* @return Url
*/
public function getSuggestionUrl(): Url
{
return $this->suggestionUrl;
}

/**
* Set submit label
*
* @param string $label
*
* @return $this
*/
public function setSubmitLabel(string $label): self
{
$this->submitLabel = $label;

return $this;
}

/**
* Get submit label
*
* @return string
*/
public function getSubmitLabel(): string
{
return $this->submitLabel ?? t('Submit');
sukhwinder33445 marked this conversation as resolved.
Show resolved Hide resolved
}

public function assemble()
{
$filterInput = new InputElement(null, [
'type' => 'text',
'placeholder' => t('Type to search'),
'class' => 'search-field',
'id' => 'search-filed',
'autocomplete' => 'off',
'required' => true,
'data-no-auto-submit' => true,
'data-no-js-placeholder' => true,
nilmerg marked this conversation as resolved.
Show resolved Hide resolved
'data-enrichment-type' => 'terms',
'data-term-separator' => self::TERM_SEPARATOR,
'data-term-mode' => 'read-only',
'data-term-direction' => 'vertical',
'data-data-input' => '#data-input',
'data-term-input' => '#term-input',
'data-term-container' => '#term-container',
'data-term-suggestions' => '#term-suggestions',
'data-suggest-url' => $this->getSuggestionUrl()
]);

$dataInput = new InputElement('data', ['type' => 'hidden', 'id' => 'data-input']);

$termInput = new InputElement($this->getSearchParameter(), ['type' => 'hidden', 'id' => 'term-input']);
$this->registerElement($termInput);

$termContainer = new HtmlElement(
'div',
Attributes::create(['id' => 'term-container', 'class' => 'term-container'])
);

$termSuggestions = new HtmlElement(
'div',
Attributes::create(['id' => 'term-suggestions', 'class' => 'search-suggestions'])
);

$submitButton = new SubmitElement('submit', ['label' => $this->getSubmitLabel()]);

$this->registerElement($submitButton);

$this->add([
HtmlElement::create(
'div',
null,
[
new Icon('search', ['class' => 'search-icon']),
$filterInput,
$termSuggestions,
$dataInput,
$termInput,
$submitButton
]
),
$termContainer
]);
}
}
Loading