You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2017/11/24 12:33:34 UTC
[myfaces-tobago] 01/02: TOBAGO-1827 Markup for render suggest menu
directly on component * menu rendered on component if markup 'localMenu' is
used * add a demo * tobago.scss: menu on component should be as long as the
component itself
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit ccb408b1af3b5fa792c73ba8cf3ff3fb04e05c2c
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Nov 24 12:46:40 2017 +0100
TOBAGO-1827 Markup for render suggest menu directly on component
* menu rendered on component if markup 'localMenu' is used
* add a demo
* tobago.scss: menu on component should be as long as the component itself
---
tobago-core/src/main/resources/scss/_tobago.scss | 5 ++++
.../010-input/20-suggest/suggest.xhtml | 13 ++++++++++
.../tobago-bootstrap/_version/js/tobago-suggest.js | 29 +++++++++++++++-------
3 files changed, 38 insertions(+), 9 deletions(-)
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 9c76c59..c6425bc 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -1092,6 +1092,11 @@ th.tobago-sheet-headerCell-markup-filler > .tobago-sheet-header {
display: block;
}
+.twitter-typeahead .tt-open {
+ /* for markup 'localMenu' - if suggest menu rendered directly on component - not in .tobago-page-menuStore */
+ width: 100%;
+}
+
.tt-empty {
display: none;
}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/suggest.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/suggest.xhtml
index 92cc107..a27b9a3 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/suggest.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/20-suggest/suggest.xhtml
@@ -84,4 +84,17 @@
</tc:suggest>
</tc:in>
</tc:section>
+
+ <tc:section label="Render local menu">
+ <p>By default, the suggest menu is rendered in the <code>.tobago-page-menuStore</code>
+ and positioned relative to the page. The suggest menu will be scrolled with the page.</p>
+ <p>Sometimes this behavior causes problems. For example if tc:suggest is used in a fixed header.
+ In this case the suggest menu must not scroll with the page. Instead it should stick on the input component.</p>
+ <p>To render a suggest menu local on the component, markup <code>localMenu</code> can be used.</p>
+ <tc:in id="inLocalMenu" markup="localMenu">
+ <tc:suggest totalCount="10" query="#{suggestController.query}">
+ <tc:selectItems value="#{suggestController.solarObjects}" var="name" itemValue="#{name}"/>
+ </tc:suggest>
+ </tc:in>
+ </tc:section>
</ui:composition>
diff --git a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-suggest.js b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-suggest.js
index ae6b242..81a1766 100644
--- a/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-suggest.js
+++ b/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/resources/tobago/standard/tobago-bootstrap/_version/js/tobago-suggest.js
@@ -17,7 +17,7 @@
Tobago.Suggest = {};
-Tobago.Suggest.loadFromServer = function(input) {
+Tobago.Suggest.loadFromServer = function (input) {
var timeout;
@@ -33,7 +33,7 @@ Tobago.Suggest.loadFromServer = function(input) {
var delay = suggest.data("tobago-suggest-delay");
- timeout = setTimeout(function() {
+ timeout = setTimeout(function () {
suggest.val(query);
suggest.data("tobago-suggest-callback", asyncResults);
suggest.removeData("tobago-suggest-data"); // clear jQuery-data-cache
@@ -54,7 +54,7 @@ Tobago.Suggest.loadFromServer = function(input) {
};
};
-Tobago.Suggest.fromClient = function(data) {
+Tobago.Suggest.fromClient = function (data) {
return function findMatches(query, syncResults) {
var result = [];
for (i = 0; i < data.length; i++) {
@@ -66,11 +66,11 @@ Tobago.Suggest.fromClient = function(data) {
};
};
-Tobago.Suggest.init = function(elements) {
+Tobago.Suggest.init = function (elements) {
var suggests = Tobago.Utils.selectWithJQuery(elements, ".tobago-suggest");
- suggests.each(function() {
+ suggests.each(function () {
var suggest = jQuery(this);
var input = jQuery(Tobago.Utils.escapeClientId(suggest.data("tobago-suggest-for")));
@@ -80,6 +80,17 @@ Tobago.Suggest.init = function(elements) {
var update = typeof suggest.data("tobago-suggest-update") != "undefined";
var totalCount = suggest.data("tobago-suggest-total-count"); // todo
+ var localMenu = false;
+ var dataTobagoMarkup = jQuery(Tobago.Utils.escapeClientId(input.attr("name"))).attr("data-tobago-markup");
+ if (dataTobagoMarkup !== undefined) {
+ var markups = jQuery.parseJSON(jQuery(Tobago.Utils.escapeClientId(input.attr("name"))).attr("data-tobago-markup"));
+ markups.forEach(function (markup) {
+ if (markup === "localMenu") {
+ localMenu = true;
+ }
+ });
+ }
+
if (update && input.hasClass("tt-input")) { // already initialized: so only update data
var asyncResults = suggest.data("tobago-suggest-callback"); // comes from "findMatches()"
if (asyncResults) {
@@ -108,7 +119,7 @@ Tobago.Suggest.init = function(elements) {
$suggestPopup = jQuery($suggestPopup.selector);
input.typeahead({
- menu: $suggestPopup,
+ menu: localMenu ? null : $suggestPopup,
minLength: minChars,
hint: true,// todo
highlight: true // todo
@@ -116,14 +127,14 @@ Tobago.Suggest.init = function(elements) {
//name: 'test',// todo
limit: maxItems,
source: source
- }).on('typeahead:change', function(event) {
+ }).on('typeahead:change', function (event) {
input.trigger('change');
});
- input.bind('typeahead:open', function() {
+ input.bind('typeahead:open', function () {
var $input = jQuery(this);
var $suggest = $input.parent().siblings(".tobago-suggest");
- if($suggest.length == 0) {
+ if ($suggest.length == 0) {
$suggest = $input.parent().parent().parent().siblings(".tobago-suggest");
}
var $suggestPopup = jQuery(Tobago.Utils.escapeClientId($suggest.attr('id') + "::popup"));
--
To stop receiving notification emails like this one, please contact
"commits@myfaces.apache.org" <co...@myfaces.apache.org>.