wikimedia/mediawiki-extensions-MobileFrontend

const util = require( './util.js' ),
    mfExtend = require( './mfExtend' ),
    View = require( './View' ),
    browser = require( './Browser' ).getSingleton();

/**
 * List of items page view
 *
 * @class PageList
 * @extends module:mobile.startup/View
 */
function PageList() {
    View.apply( this, arguments );
}

mfExtend( PageList, View, {
    /**
     * @memberof PageList
     * @instance
     * @mixes module:mobile.startup/View#defaults
     * @property {Object} defaults Default options hash.
     * @property {Page[]} defaults.pages Array of Page objects. These should match
     *                              the Page model and not necessarily the
     *                              underlying API format used.
     * E.g. [
     *   {
     *     heading: "<strong>C</strong>laude Monet",
     *     id: undefined,
     *     title: "Claude Monet",
     *     displayTitle: "<i>Claude Monet</i>",
     *     url: "/wiki/Claude_Monet",
     *     thumbnail: {
     *       height: 62,
     *       source: "http://127.0.0.1:8080/images/thumb/thumb.jpg",
     *       width: 80,
     *       isLandscape: true
     *     }
     *   }
     * ]
     */
    defaults: {
        pages: []
    },
    /**
     * Render page images for the existing page list. Assumes no page images have been loaded.
     *
     * @memberof PageList
     * @instance
     */
    renderPageImages() {
        const self = this;

        setTimeout( () => {
            self.$el.find( '.list-thumb' ).each( function () {
                const style = self.$el.find( this ).data( 'style' );
                self.$el.find( this ).attr( 'style', style );
            } );
            // Delay an unnecessary load of images on mobile (slower?) connections
            // In particular on search results which can be regenerated quickly.
        }, browser.isWideScreen() ? 0 : 1000 );
    },
    /**
     * @inheritdoc
     * @memberof PageList
     * @instance
     */
    postRender() {
        this.renderPageImages();
    },
    template: util.template( `
<ul class="mw-mf-page-list thumbs actionable">
    {{#pages}}
        {{>item}}
    {{/pages}}
</ul>
    ` ),
    /**
     * @memberof PageList
     * @instance
     */
    templatePartials: {
        // The server uses a very different structure in
        // SpecialMobileEditWatchlist.getLineHtml(). Be aware of these differences
        // when updating server rendered items.
        item: util.template( `
<li title="{{title}}" data-id="{{id}}" class="page-summary">
  <a href="{{url}}" class="title {{#isMissing}}new{{/isMissing}}"
    {{#anchor}}name="{{anchor}}"{{/anchor}}
    {{#latitude}}data-latlng="{{latitude}},{{longitude}}"{{/latitude}}
    data-title="{{title}}">
    <div class="list-thumb
      {{#thumbnail.isLandscape}}list-thumb-y{{/thumbnail.isLandscape}}
      {{^thumbnail.isLandscape}}list-thumb-x{{/thumbnail.isLandscape}}"
      {{#thumbnail}}data-style="background-image: url( {{thumbnail.source}} )"{{/thumbnail}}>
      {{^thumbnail}}<span class="mf-icon-image"></span>{{/thumbnail}}
    </div>
    <h3>{{{displayTitle}}}</h3>
    {{#wikidataDescription}}
    <div class="wikidata-description">{{wikidataDescription}}</div>
    {{/wikidataDescription}}
    {{#proximity}}
    <div class="info proximity">{{proximity}}</div>
    {{/proximity}}
  </a>
</li>
    ` )
    }
} );

module.exports = PageList;