rizzo-next

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../../"> <title data-ice="title">src/components/things_to_do/things_to_do.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/things_to_do/things_to_do.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import Component from "../../core/component"; import waitForTransition from "../../core/utils/waitForTransition"; import publish from "../../core/decorators/publish"; import $clamp from "clamp-js/clamp.js"; import rizzo from "../../rizzo"; class ThingsToDo extends Component { get title() { return `Top experiences in ${window.lp.place.name}`; } initialize() { this.currentIndex = (this.getCurrentIndex()) || 0; this.options = { numOfCards: 4 }; this.events = { "click .js-ttd-more": "loadMore", "click .js-ttd-less": "loadPrevious", "swiperight": "loadPrevious", "swipeleft": "loadMore" }; this.fetchCards().done(this.cardsFetched.bind(this)).fail((jqXHR) => { rizzo.logger.error({ error: jqXHR.responseText }); return this.nukeIt(); }); } getCurrentIndex() { let obj = window.localStorage && JSON.parse(window.localStorage.getItem("ttd.currentIndex")); if (!obj || obj.slug !== window.lp.place.slug) { return; } return obj.index; } fetchCards() { return $.ajax({ url: `/api/${window.lp.place.slug}/experiences` }); } @publish("ttd.removed") nukeIt() { $("#ttd").remove(); } // TODO: jc this is... smelly cardsFetched(cards) { if (!cards.length) { return this.nukeIt(); } this.$el.prepend($(`<h2 class='ttd__heading'>${this.title}</h2>`)); this.cards = cards; if (cards.length > 4) { this.addNavigationButtons(); } if (this.currentIndex >= this.options.numOfCards) { this.showPrevious(); } if (this.currentIndex + 4 >= this.cards.length) { this.hideShowMore(); } this.template = require("./thing_to_do_card.hbs"); this.render(this.nextCards()); this.clampImageCardTitle(); } addNavigationButtons() { let $left = $("<div />", { "class": "has-more--left is-invisible"}); // Lazy? Maybe... awesome? YES $left.html(` <button class="ttd__less js-ttd-less"> </button> `); this.$el.find(".js-ttd-list").before($left); let $right = $("<div />", { "class": "has-more--right"}); $right.html(` <button class="ttd__more js-ttd-more"> </button> `); this.$el.find(".js-ttd-list").after($right); } /** * Get the next 4 cards to render * @return {Array} An array of rendered templates */ nextCards() { if (this.currentIndex >= this.cards.length) { this.currentIndex = 0; } else if (this.currentIndex < 0) { this.currentIndex = this.cards.length - ((this.cards.length % this.options.numOfCards) || this.options.numOfCards); } return this.cards.slice(this.currentIndex, this.currentIndex + this.options.numOfCards) .map((card, i) => { Object.assign(card.card, { card_num: i + this.currentIndex + 1, order: i }); return this.template(card); }); } render(cards) { this.$el.find(".js-ttd-list").html(cards.join("")); this.loadImages(this.$el.find(".js-image-card-image")); } loadImages(images) { let imagePromises = []; images.each((index, element) => { let $el = $(element), imageUrl = $el.data("image-url"), backupUrl = $el.data("backupimage-url"); imagePromises.push(this.lazyLoadImage(imageUrl) .then(undefined, () => { return this.lazyLoadImage(backupUrl); }) .then((url) => { $el.css({ "background-image": "url(" + url + ")" }) .addClass("is-visible"); })); }); return Promise.all(imagePromises); } makeNextList() { let cards = this.nextCards(); if (window.localStorage) { window.localStorage.setItem("ttd.currentIndex", JSON.stringify({ index: this.currentIndex, slug: window.lp.place.slug })); } // Create a new list and place it on top of existing list return $("<ul />", { "class": "ttd__list js-ttd-list" }) .append(cards); } animate(reverse=false) { let $list = this.$el.find(".js-ttd-list"), ttdComponentWidth = this.$el.width(); let $nextList = this.makeNextList(); $nextList.css({ "margin-top": `-${$list.outerHeight(true)}px`, "transform": `translate3d(${reverse ? "-" : ""}${ttdComponentWidth}px, 0, 0)` }); this.loadImages($nextList.find(".js-image-card-image")); this.animating = true; $list.after($nextList) .css("transform", `translate3d(${reverse ? "" : "-"}${ttdComponentWidth}px, 0, 0)`); setTimeout(() => { $nextList .css("transform", "translate3d(0, 0, 0)"); }, 30); if (!reverse && this.currentIndex + 4 >= this.cards.length) { this.hideShowMore(); } else if (reverse && this.currentIndex - 4 < 0) { this.hideShowPrevious(); } return waitForTransition($nextList, { fallbackTime: 300 }) .then(() => { $list.remove(); $nextList.css("margin-top", 0); this.animating = false; }); } /** * Load more top things to do. Callback from click on load more button. * @param {jQuery.Event} e The DOM event */ @publish("ttd.loadmore"); loadMore(e) { e.preventDefault(); if (this.animating || this.currentIndex + 4 >= this.cards.length) { return; } // Grab the next 4 images this.showMoreAndPrevious(); this.currentIndex += this.options.numOfCards; // Forward this.animate(); return { "direction": "forward" }; } @publish("ttd.loadmore"); loadPrevious(e) { e.preventDefault(); if (this.animating || this.currentIndex - 4 < 0) { return; } // Grab the next 4 images this.showMoreAndPrevious(); this.currentIndex -= this.options.numOfCards; // Reverse this.animate(true); return { "direction": "reverse" }; } showMore() { this.$el.find(".has-more--right").removeClass("is-invisible"); this.$el.find(".js-ttd-more").removeClass("is-invisible"); } showPrevious() { this.$el.find(".has-more--left").removeClass("is-invisible"); this.$el.find(".js-ttd-less").removeClass("is-invisible"); } showMoreAndPrevious() { this.showMore(); this.showPrevious(); } hideShowMore() { this.$el.find(".js-ttd-more").addClass("is-invisible"); this.$el.find(".has-more--right").addClass("is-invisible"); } hideShowPrevious() { this.$el.find(".js-ttd-less").addClass("is-invisible"); this.$el.find(".has-more--left").addClass("is-invisible"); } /** * Lazy load an image * @param {String} url Image url to lazy load * @return {Promise} A promise that resolves when the image has loaded */ lazyLoadImage(url) { let self = this, image = new Image(); this.imagePromises = this.imagePromises || {}; if (this.imagePromises[url]) { return this.imagePromises[url]; } let promise = new Promise((resolve, reject) => { image.src = url; image.onload = function() { // Only cache the promise when it's successfully loading an image self.imagePromises[url] = promise; resolve(url); }; image.onerror = function() { reject(); }; if (!url) { reject(); } }); return promise; } /** * Clamp a card title * @return null */ clampImageCardTitle() { $.each($(".js-image-card-title"), function() { $clamp($(this).get(0), { clamp: 2 }); }); } } export default ThingsToDo; </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>