publications-view.html

<link rel="import" href="nextprot-elements-shared-styles.html">

<link rel="import" href="external-scripts.html">
<link rel="import" href="protein-overview.html">
<link rel="import" href="publication-item.html">
<link rel="import" href="paginator-element.html">

<!--
`publications-view`
Publications listing used in curated and additional publications pages.

@demo demo/publications-view-demo.html
-->

<dom-module id="publications-view">
    <template>
        <style is="custom-style" include="nextprot-elements-shared-styles">
            :host {
                display: block;
                --paper-toggle-button-checked-button-color: #428bca;
                --paper-toggle-button-checked-bar-color: #428bca;
                background: #f8f8f8;
                overflow-y: auto;
            }

            .control-header {
                margin: 10px 0;
                padding-bottom: 5px;
                display: flex;
                border-bottom: 1px solid #E7EAEC;
            }

            .mode-toggle {
                display: inline-flex;
                margin-top: -3px;
            }

            .toggle-label {
                padding: 5px 10px 5px 3px;
            }

            a.disabled {
                pointer-events: none;
                color: black;
                font-weight: bolder;
            }

            .bg-grey {
                background: #F3F3F3;
                border-radius: 5px;
                margin-right: 5px;
                padding: 2px;
            }

        </style>

        <div class="row">
            <div id="nxOverview" class="col-md-12">
                <protein-overview nx-config="[[nxConfig]]"></protein-overview>
            </div>
        </div>
        <div class="row">
            <div class="nxSection col-md-12">
                <div id="publications-header" class="category-header">
                    <h4 id="publications-title" class="category-title">
                        [[header]]
                    </h4>
                    <paper-spinner-lite id="spinner" active></paper-spinner-lite>
                </div>
                <template is="dom-if" if="[[entries.length]]">
                    <div class="control-header">
                        <div class="no-padding col-lg-5">
                            <template is="dom-if" if="[[entries]]">
                                Publications [[from]] to [[to]] of [[entries.length]]
                            </template>
                        </div>
                        <div class="col-lg-10 ">
                            <span class="bg-grey">
                                show&nbsp;
                                <select on-change="_changePageSize">
                                    <template is="dom-repeat" items="{{pageSizeOptions}}" as="pageSizeOption">
                                        <option value="{{pageSizeOption}}"
                                                selected$="{{_isPageSizeOptionSelected(pageSizeOption)}}">{{pageSizeOption}}
                                        </option>
                                    </template>
                                </select>
                            </span>
                            <span class="bg-grey">
                                <a id="summary-link" class$="[[_summaryLinkClass]]" role="button" on-click="_updateLinks">summary</a> |
                                <a id="details-link" class$="[[_detailsLinkClass]]" role="button" on-click="_updateLinks">details</a>
                            </span>
                        </div>

                    </div>
                    <paginator-element entries="[[entries]]" layout="publication-item" related-entry-count="[[relatedEntryCount]]"
                                    page-size="{{pageSize}}" bind-attribute="summary" bind-value="[[summary]]"
                                    from="{{from}}" to="{{to}}"></paginator-element>
                </template>
                <template is="dom-if" if="[[!entries.length]]"><span class="grey-x">Nothing to show</span></template>
            </div>
        </div>
    </template>
    <script>
        Polymer({
            is: 'publications-view',
            properties: {
                nxConfig: {
                    type: Object,
                    value: {}
                },
                entries: {
                    type: Array,
                    notify: true
                },
                expectedPubTypes: {
                    type: Object,
                    value: {
                        "curated": "Curated publications",
                        "additional": "Additional publications",
                        "submission": "Submissions",
                        "patent": "Patents",
                        "web_resource": "Online resources"
                    }
                },
                count: {
                    type: Number,
                    notify: true
                },
                relatedEntryCount: {
                    type: Number,
                    notify: true
                },
                pageSize: {
                    type: Number,
                    notify: true,
                },
                pageSizeOptions: {
                    type: Array,
                    value: [10, 20, 50, 100]
                },
                summary: {
                    type: Boolean,
                    value: false
                },
                _preferedPageSizeName: {
                    type: String,
                    value: "publications-view.prefered-size",
                    readOnly: true
                },
                _summaryLinkClass: {
                    type: String,
                    value: ""
                },
                _detailsLinkClass: {
                    type: String,
                    value: "disabled"
                }
            },
            attached: function () {

                this.pageSize = this._getPreferedPageSizeFromLocalStorage();

                this._initApiClient();

                if (this.nxConfig.pubType in this.expectedPubTypes) {

                    var self = this;

                    this._npClient.getJSON("/entry-publications/entry/" + this.nxConfig.entry + "/category/" + this.nxConfig.pubType + ".json")
                        .then(function (response) {
                            self._handleResponseData(response);
                        })
                        .catch(function (error) {
                            self._handleError(error);
                        });
                }
                else {
                    this._handleError("invalid publication type " + this.nxConfig.pubType + " is not recognized as a valid publication type (expected: [" + Object.keys(this.expectedPubTypes) + "])");
                }
            },
            _initApiClient: function () {
                this._npClient = new Nextprot.Client("neXtProt publications", "Calipho Group");

                if (this.nxConfig.env) {
                    this._npClient.updateEnvironment(this.nxConfig.env);
                }
            },
            _isPageSizeOptionSelected: function (pageSizeValue) {

                return this._getPreferedPageSizeFromLocalStorage() == pageSizeValue;
            },
            _getPreferedPageSizeFromLocalStorage: function () {

                var localStorageSizeValue = localStorage.getItem(this._preferedPageSizeName);

                // does not exist
                if (localStorageSizeValue === null) {
                    localStorageSizeValue = 10;
                    localStorage.setItem(this._preferedPageSizeName, localStorageSizeValue);
                }

                return parseInt(localStorageSizeValue);
            },
            _changePageSize: function (evt) {
                this.pageSize = parseInt(evt.target[evt.target.selectedIndex].value);
                localStorage.setItem(this._preferedPageSizeName, this.pageSize);
            },
            _handleResponseData: function (data) {
                var publications = [];
                data.forEach(function (publidata) {
                    publications.push(publidata);
                });
                this.header = this.expectedPubTypes[this.nxConfig.pubType];
                this.entries = publications;
                this.count = publications.length;
                this.relatedEntryCount = this.count;
                this.$.spinner.active = false;
            },
            _handleError: function (error) {
                console.error("Error: ", error);
                this.$.spinner.active = false;
                this.count = 0;
            },
            _updateLinks: function (evt) {
                // WARNING: do not use srcElement - srcElement is a proprietary property originally coming from IE.
                // The standardized property is target
                this.summary = (evt.target.id === "summary-link");

                if (this.summary) {
                    this._detailsLinkClass = "";
                    this._summaryLinkClass = "disabled";
                }
                else {
                    this._detailsLinkClass = "disabled";
                    this._summaryLinkClass = "";
                }
            }
        });
    </script>
</dom-module>