rizzo-next

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../../"> <title data-ice="title">src/components/articles/index.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/articles/index.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import { Component } from "../../core/bane"; import $clamp from "clamp-js/clamp.js"; import Tabs from "../tabs/tabs_component"; import $ from "jquery"; import "./_articles.scss"; class ArticlesComponent extends Component { initialize(options) { this.articles = this.$el.find(".article"); this.maxLines = options.maxLines || 6; // Retrieved via getComputedStyle($0)["line-height"] ish this.titleLineHeight = options.titleLineHeight || { desktop: 35, mobile: 23 }; this.blurbLineHeight = options.blurbLineHeight || { desktop: 27, mobile: 18 }; this.mobileWidth = options.mobileWidth || 717; this.screen = "mobile"; this.tabs = new Tabs({ el: $(".articles").find(".tabs") }); if (!$("html").hasClass("ie9")) { this._detectScreen(); this._clampText(); this.listenTo(this.tabs, "tabs.activate", this._reclamp.bind(this)); $(window).on("resize", this._reclamp.bind(this)); } } widthWindow() { return $(window).width(); } isDesktop() { return this.widthWindow() >= this.mobileWidth; } _reclamp() { this._detectScreen(); this._clampText(); } _detectScreen() { return this.screen = this.isDesktop() ? "desktop" : "mobile"; } _clampText() { this.articles.each((index, article) => { let { titleLines, teaserLines, teaser, blurb } = this._findElements(article); // aka 2 + 5 or something if (titleLines + teaserLines > this.maxLines) { let teaserClamp = Math.ceil(this.maxLines - titleLines); $clamp(teaser.get(0), { clamp: teaserClamp }); teaser.addClass("article__info__teaser--small"); blurb.prop("hidden", true); } else { // Only clamp the blurb let blurbClamp = Math.ceil(this.maxLines - titleLines - teaserLines); $clamp(blurb.get(0), { clamp: blurbClamp }); } }); } _findElements(article) { // Select all necessary elements let $article = $(article), title = $article.find(".article__info__title"), teaser = $article.find(".article__info__teaser"), blurb = $article.find(".article__info__blurb"), // Find elements heights titleHeight = parseInt(title.height(), 10) || 0, teaserHeight = parseInt(teaser.height(), 10) || 0, blurbHeight = parseInt(blurb.height(), 10) || 0, // Figure out how many lines each element actually is based on line heights and height blurbLines = blurbHeight / this.blurbLineHeight[this.screen], teaserLines = teaserHeight / this.blurbLineHeight[this.screen], titleLines = titleHeight / this.titleLineHeight[this.screen], // Figure out how many lines need to be removed linesAllowed = this.maxLines - titleLines, removeLines = Math.floor(blurbLines + teaserLines - linesAllowed); return { removeLines: removeLines, titleLines: titleLines, teaserLines: teaserLines, blurbLines: blurbLines, teaser: teaser, blurb: blurb }; } } export default ArticlesComponent; </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>