rizzo-next

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../../"> <title data-ice="title">src/components/search/search_component.js | API Document</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css"> <script src="script/prettify/prettify.js"></script> <script src="script/manual.js"></script> <link data-ice="userStyle" rel="stylesheet" href="user/css/0-docs.css"> </head> <body class="layout-container" data-ice="rootContainer"> <header> <a href="./">Home</a> <a href="identifiers.html">Reference</a> <a href="source.html">Source</a> <a href="test.html" data-ice="testLink">Test</a> <a data-ice="repoURL" href="https://github.com/lonelyplanet/rizzo-next.git" class="repo-url-github">Repository</a> <div class="search-box"> <img src="./image/search.png"> <input class="search-input"> <ul class="search-result"></ul> </div> </header> <nav class="navigation" data-ice="nav"><div> <ul> <li data-ice="doc">V<a href="variable/index.html#static-variable-rizzo">rizzo</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/action_sheet</div>C<a href="class/src/components/action_sheet/index.js~ActionSheetComponent.html">ActionSheetComponent</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-actionSheetComponent">actionSheetComponent</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/article_body</div>C<a href="class/src/components/article_body/index.js~ArticleBodyComponent.html">ArticleBodyComponent</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/articles</div>C<a href="class/src/components/articles/index.js~ArticlesComponent.html">ArticlesComponent</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-articlesComponent">articlesComponent</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/footer</div>C<a href="class/src/components/footer/footer_component.js~Footer.html">Footer</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-footer">footer</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/header</div>C<a href="class/src/components/header/header_component.js~Header.html">Header</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-header">header</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/hotels</div>C<a href="class/src/components/hotels/hotels_widget.js~HotelsWidget.html">HotelsWidget</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-hotelsWidget">hotelsWidget</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/image_gallery</div>C<a href="class/src/components/image_gallery/image_gallery.js~ImageGalleryComponent.html">ImageGalleryComponent</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/login</div>C<a href="class/src/components/login/login_manager.js~LoginManager.html">LoginManager</a></li> <li data-ice="doc">C<a href="class/src/components/login/user.js~User.html">User</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/map</div>C<a href="class/src/components/map/interactive-map.js~InteractiveMap.html">InteractiveMap</a></li> <li data-ice="doc">C<a href="class/src/components/map/map_component.js~MapComponent.html">MapComponent</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-MapActions">MapActions</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-MapAPI">MapAPI</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-interactiveMap">interactiveMap</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-mapComponent">mapComponent</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-MapState">MapState</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/map/mapbox</div>C<a href="class/src/components/map/mapbox/index.js~MapProvider.html">MapProvider</a></li> <li data-ice="doc">C<a href="class/src/components/map/mapbox/markerset.js~MarkerSet.html">MarkerSet</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-mapProvider">mapProvider</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-markerSet">markerSet</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/map/views</div>C<a href="class/src/components/map/views/about-panel.jsx~AboutPanel.html">AboutPanel</a></li> <li data-ice="doc">C<a href="class/src/components/map/views/alert.jsx~AlertView.html">AlertView</a></li> <li data-ice="doc">C<a href="class/src/components/map/views/item.jsx~ItemView.html">ItemView</a></li> <li data-ice="doc">C<a href="class/src/components/map/views/main.jsx~MainView.html">MainView</a></li> <li data-ice="doc">C<a href="class/src/components/map/views/map.jsx~MapView.html">MapView</a></li> <li data-ice="doc">C<a href="class/src/components/map/views/panel.jsx~PanelView.html">PanelView</a></li> <li data-ice="doc">C<a href="class/src/components/map/views/pin.jsx~PinView.html">PinView</a></li> <li data-ice="doc">C<a href="class/src/components/map/views/sidebar-details.jsx~SidebarDetailsView.html">SidebarDetailsView</a></li> <li data-ice="doc">C<a href="class/src/components/map/views/sidebar-dropdown.jsx~SidebarDropdown.html">SidebarDropdown</a></li> <li data-ice="doc">C<a href="class/src/components/map/views/sidebar-fetching.jsx~SidebarFetchingView.html">SidebarFetchingView</a></li> <li data-ice="doc">C<a href="class/src/components/map/views/sidebar.jsx~SidebarView.html">SidebarView</a></li> <li data-ice="doc">C<a href="class/src/components/map/views/tab.jsx~TabView.html">TabView</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/masthead</div>C<a href="class/src/components/masthead/masthead_component.js~MastheadComponent.html">MastheadComponent</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/navigation</div>C<a href="class/src/components/navigation/navigation_component.js~NavigationComponent.html">NavigationComponent</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-NavigationActions">NavigationActions</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-navigationComponent">navigationComponent</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-NavigationState">NavigationState</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/notification</div>C<a href="class/src/components/notification/notification.js~Notification.html">Notification</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-notification">notification</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/overlay</div>C<a href="class/src/components/overlay/index.js~Overlay.html">Overlay</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-overlay">overlay</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/related_guidebook</div>C<a href="class/src/components/related_guidebook/index.js~RelatedGuidebookComponent.html">RelatedGuidebookComponent</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-relatedGuidebookComponent">relatedGuidebookComponent</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/search</div>C<a href="class/src/components/search/search_component.js~SearchComponent.html">SearchComponent</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-SearchActions">SearchActions</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-SearchApi">SearchApi</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-searchComponent">searchComponent</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-SearchServerActions">SearchServerActions</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-SearchState">SearchState</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/search/search_item</div>C<a href="class/src/components/search/search_item/index.js~SearchItemComponent.html">SearchItemComponent</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-searchItemComponent">searchItemComponent</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/slideshow</div>C<a href="class/src/components/slideshow/slide_component.js~SlideComponent.html">SlideComponent</a></li> <li data-ice="doc">C<a href="class/src/components/slideshow/slideshow.js~Slideshow.html">Slideshow</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-slideComponent">slideComponent</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/stacks</div>C<a href="class/src/components/stacks/stack_component.js~Stack.html">Stack</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-StackActions">StackActions</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-stack">stack</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-StackState">StackState</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/sub_nav</div>C<a href="class/src/components/sub_nav/index.js~SubNav.html">SubNav</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/tabs</div>C<a href="class/src/components/tabs/tabs_component.js~Tabs.html">Tabs</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/things_to_do</div>C<a href="class/src/components/things_to_do/things_to_do.js~ThingsToDo.html">ThingsToDo</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-thingsToDo">thingsToDo</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/tooltip</div>C<a href="class/src/components/tooltip/tooltip.js~Tooltip.html">Tooltip</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-tooltip">tooltip</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/top_places</div>C<a href="class/src/components/top_places/top_places_component.js~TopPlaces.html">TopPlaces</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-topPlaces">topPlaces</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/tours</div>C<a href="class/src/components/tours/index.js~ToursComponent.html">ToursComponent</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-toursComponent">toursComponent</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/usabilla</div>C<a href="class/src/components/usabilla/index.js~Usabilla.html">Usabilla</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-usabilla">usabilla</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">components/video</div>C<a href="class/src/components/video/brightcove.js~Brightcove.html">Brightcove</a></li> <li data-ice="doc">C<a href="class/src/components/video/index.js~Video.html">Video</a></li> <li data-ice="doc">C<a href="class/src/components/video/video_player.js~VideoPlayer.html">VideoPlayer</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-brightcove">brightcove</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-video">video</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-videoPlayer">videoPlayer</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">core</div>C<a href="class/src/core/component.js~Component.html">Component</a></li> <li data-ice="doc">C<a href="class/src/core/component_registry.js~ComponentRegistry.html">ComponentRegistry</a></li> <li data-ice="doc">C<a href="class/src/core/cookie_util.js~CookieUtil.html">CookieUtil</a></li> <li data-ice="doc">C<a href="class/src/core/logger.js~Logger.html">Logger</a></li> <li data-ice="doc">C<a href="class/src/core/mobile_util.js~MobileUtil.html">MobileUtil</a></li> <li data-ice="doc">C<a href="class/src/core/perf_monitor.js~PerfMonitor.html">PerfMonitor</a></li> <li data-ice="doc">C<a href="class/src/core/rizzo.js~Rizzo.html">Rizzo</a></li> <li data-ice="doc">C<a href="class/src/core/shop_cookie_util.js~ShopCookieUtil.html">ShopCookieUtil</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-Arkham">Arkham</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-mobileUtil">mobileUtil</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-shopCookieUtil">shopCookieUtil</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">core/decorators</div>F<a href="function/index.html#static-function-channel">channel</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-publish">publish</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-subscribe">subscribe</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">core/mixins</div>V<a href="variable/index.html#static-variable-Events">Events</a></li> <li data-ice="doc"><div data-ice="dirPath" class="nav-dir-path">core/utils</div>F<a href="function/index.html#static-function-highlight">highlight</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-getScrollbarWidth">getScrollbarWidth</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-mark">mark</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-measure">measure</a></li> </ul> </div> </nav> <div class="content" data-ice="content"><h1 data-ice="title">src/components/search/search_component.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import { Component } from "../../core/bane"; import Overlay from "../overlay"; import waitForTransition from "../../core/utils/waitForTransition"; import SearchActions from "./search_actions"; import SearchState from "./search_state"; import template from "./search.hbs"; import "./_search.scss"; import SearchItemComponent from "./search_item"; class SearchComponent extends Component { static get className() { return "search"; } get isOpen() { if(this._isOpen === undefined) { this._isOpen = false; } return this._isOpen; } set isOpen(val){ this._isOpen = val || false; } get collection(){ if(this._collection === undefined){ this._collection = []; } return this._collection; } set collection(arr) { this._collection = arr; if(this._collection.length > 0) { this.$searchResults.addClass("search-results--visible"); } else { this.$searchResults.removeClass("search-results--visible"); } } initialize() { this.build(); this.events = { "click .js-close": (e) => { e.preventDefault(); this.hide(); }, "keydown .search__input": "onKeyup" }; //$(document.body).on("keyup", this.onKeyup.bind(this)); this.collection = []; this.overlay = new Overlay(); this.listenTo(this.overlay, "click", this.hide); SearchState.on("change:results", this.searchComplete.bind(this)); } build(){ this.$el = $(template()); this.$input = this.$el.find(".js-search-input"); this.$searchResults = this.$el.find(".js-search-results"); this.$list = this.$searchResults.find(".js-search-results-list"); this.$resultsLink = this.$searchResults.find(".js-search-results-more"); } show() { if(this.isOpen) { return Promise.all([]); } this.isOpen = true; this.$el.appendTo(document.body); this.overlay.show(); setTimeout(() => { this.$el.addClass(SearchComponent.className + "--visible"); }, 10); return waitForTransition(this.$el, { fallbackTime: 100 }) .then(() => { this.$input.focus(); }); } hide() { if(!this.isOpen) { return Promise.all([]); } this.isOpen = false; this.$el.removeClass(SearchComponent.className + "--visible"); this.overlay.hide(); return waitForTransition(this.$el, { fallbackTime: 100 }) .then(() => { this.$el.detach(); }); } searchComplete(data) { let collection = []; this.$list.empty(); this.currentPosition = -1; this.$resultsLink.attr("href", "http://www.lonelyplanet.com/search?q=" + this.$input.val()); data.results.forEach((model) => { collection.push(this.addOne(model)); }); this.collection = collection; } onKeyup(e) { if(!this.isOpen){ return; } switch(e.keyCode){ case 13: // enter if(this.currentPosition !== -1){ this.collection[this.currentPosition].navigate(); break; } window.location.href = `http://www.lonelyplanet.com/search?q=${this.$input.val()}`; break; case 27: // esc this.hide(); break; case 38: //up e.preventDefault(); this.goUp(); break; case 40: //down e.preventDefault(); this.goDown(); break; default: clearTimeout(this.searchTimer); this.searchTimer = window.setTimeout(() => { SearchActions.typing({ query: this.$input.val() }); }, 200); break; } } goUp() { this.currentPosition--; if(this.currentPosition < 0) { this.currentPosition = 0; return; } let currentItem = this.collection[this.currentPosition]; this.collection.forEach((itemComponent) => { itemComponent.unselect(); }); currentItem.select(); } goDown() { this.currentPosition++; if(this.currentPosition >= this.collection.length) { this.currentPosition = this.collection.length - 1; } let currentItem = this.collection[this.currentPosition]; this.collection.forEach((itemComponent) => { itemComponent.unselect(); }); currentItem.select(); } addOne(model) { let itemComponent = new SearchItemComponent({ model: model, searchString: this.$input.val() }); itemComponent.render().$el.appendTo(this.$list); return itemComponent; } } export default SearchComponent; </code></pre> </div> <footer class="footer"> Generated by <a href="https://esdoc.org">ESDoc(0.4.3)</a> </footer> <script src="script/search_index.js"></script> <script src="script/search.js"></script> <script src="script/pretty-print.js"></script> <script src="script/inherited-summary.js"></script> <script src="script/test-summary.js"></script> <script src="script/inner-link.js"></script> <script src="script/patch-for-local.js"></script> </body> </html>