<html><head><link rel="import" href="../bower_components/polymer/polymer.html">

<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/effects/waterfall.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-icons/av-icons.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/iron-label/iron-label.html">
<link rel="import" href="../bower_components/iron-list/iron-list.html">

<link rel="”import”" href="../bower_components/iron-flex-layout/iron-flex-layout.html">

<link rel="import" href="../bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/fade-out-animation.html">

<link rel="import" href="../bower_components/paper-badge/paper-badge.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-styles/color.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">


<link rel="import" href="thumb-div.html">
<link rel="import" href="toggle-fullscreen-button.html">
<link rel="import" href="detail-dialog.html">
<link rel="import" href="scroll-control.html">


</head><body><dom-module id="poly-ebook-view">
    <template>

        <style is="custom-style">:root{--ebooks-green:#95c373;--ebooks-red:#e16971;--ebooks-yellow:#face5c;--pink-color:#c776df;--blue-color:#6292f0;--white-color:#fff;--fab-text-color:#c8d5ef;--fab-text-hover-color:#fff;--primary-text-color:var(--dark-theme-text-color);--primary-background-color:var(--dark-theme-background-color);--paper-input-container-label:{color:var(--primary-text-color);};--paper-listbox-background-color:#31343F;--paper-toolbar-background:#262831;--paper-toolbar-color:var(--primary-text-color);--paper-input-container-color:#99a6b9;--paper-input-container-focus-color:#4994f6;--paper-input-container-invalid-color:var(--ebooks-red);--paper-input-container-input-color:var(--primary-text-color);--paper-tabs-selection-bar-color:var(--ebooks-yellow);--photo-content-detail:{background:transparent;};--header-background:#20242a;--thumb-background:#272b33;--thumb-link-color:#60657d;--thumb-link-color-hover:#fff;--theme-config-box-shadow:inset 0 0 3px hsla(0, 0%, 100%, .4), 0 1px 3px hsla(0, 0%, 0%, .2);--theme-config-box-shadow-selected:inset 0 1px 3px hsla(0, 0%, 0%, .1);--theme-config-border-selected:hsla(0, 0%, 100%, .75);--scrollbar-background-color:#000;--scrollbar-color:#050505;--indicator-theme:{color:var(--white-color);background:var(--blue-color);};--indicator-button-theme:{background:var(--paper-toolbar-background);color:var(--white-color);};}:host{display:block;@apply (--paper-font-common-base);}app-drawer{--app-drawer-width:350px;--app-drawer-content-container:{background-color:var(--paper-listbox-background-color);color:var(--primary-text-color);};}#sectionTabs{@apply (--layout-self-end);.deleteIcon{--paper-fab-background:var(--blue-color);--paper-fab-keyboard-focus-background:var(--blue-color);}app-header paper-dropdown-menu{margin-left:40px;margin-right:40px;}app-header{position:fixed;top:0;left:0;right:0;z-index:1;background-color:var(--header-background);color:var(--primary-text-color);--app-header-background-front-layer:{background:var(--header-background);};}app-header paper-tabs{margin-right:40px;}span.green{color:var(--ebooks-green);}span.yellow{color:var(--ebooks-yellow);}span.red{color:var(--ebooks-red);}iron-list{margin-top:80px;padding-bottom:20px;background:var(--thumb-background);}#toastSuccess{--paper-toast-background-color:var(--ebooks-yellow);--paper-toast-color:var(--paper-listbox-background-color);}#toastError{--paper-toast-background-color:var(--ebooks-red);--paper-toast-color:var(--thumb-link-color);}.container > paper-badge{--paper-badge-margin-left:-10px;--paper-badge-margin-bottom:-10px;}app-header h4{margin-left:15px;}#leftDrawer p{margin-left:15px;padding-top:60px;}#leftDrawer #selectedItemsList p{margin-left:0;margin-right:0;padding-left:15px;padding-right:15px;}}</style>

        <iron-ajax auto="" url="../init.json" handle-as="json" last-response="{{options}}"></iron-ajax>
        <iron-ajax auto="" url="{{_getLoadFilesUrl(options.sectionIndex)}}" handle-as="json" last-response="{{files}}" on-response="_calcScrollLetter"></iron-ajax>
        <iron-ajax id="ajaxGet" method="GET" last-response="{{ajaxGetResponse}}"></iron-ajax>

        <paper-toast id="toastSuccess" class="fit-bottom" text="[[toastSuccessText]]"></paper-toast>
        <paper-toast id="toastError" class="fit-bottom" text="[[toastErrorText]]"></paper-toast>

        <app-header condenses="" fixed="" effects="blend-background waterfall">
            <app-toolbar>

                <div class="container" tabindex="0">
                    <paper-icon-button icon="icons:star" on-tap="toggleDrawer"></paper-icon-button>
                    <paper-badge hidden$="[[!selectedItems.length]]" label$="[[selectedItems.length]]"></paper-badge>
                </div>
                <h4 title="">[[options.title]] (<span class$="{{counterclass}}"><span hidden$="{{itemCounterHidden}}">{{filteredFiles.length}} / </span>{{files.length}}</span>)</h4>

                <paper-tabs id="sectionTabs" selected="{{options.sectionIndex}}" class="bottom">
                    <template is="dom-repeat" items="{{options.sections}}">
                        <paper-tab>{{item.label}}</paper-tab>
                    </template>
                </paper-tabs>

                <paper-input label="Search" value="{{searchText::input}}">
                    <iron-icon icon="search" prefix=""></iron-icon>
                    <iron-icon suffix="" hidden$="{{!searchText}}" on-tap="clearInput" icon="clear" alt="clear" title="clear"></iron-icon>
                </paper-input>

                <paper-dropdown-menu label="Thumb Sizes">
                    <paper-listbox class="dropdown-content" selected="{{thumbDimsIndex}}">
                        <template is="dom-repeat" items="{{thumbDims}}">
                            <paper-item>{{item.width}} x {{item.height}}</paper-item>
                        </template>
                    </paper-listbox>
                </paper-dropdown-menu>

                <toggle-fullscreen-button></toggle-fullscreen-button>
            </app-toolbar>
        </app-header>

        <iron-list id="list" items="{{filteredFiles}}" as="file" scroll-target="document" grid="" selected-items="{{selectedItems}}" selection-enabled="" multi-selection="" on-tap="_listTap">
            <template>
                <thumb-div file="[[file]]" selected="{{selected}}" thumb-css="[[thumbCss]]" tab-index="[[tabIndex]]" index="[[index]]" epub-reader-visible="[[epubReaderVisible]]" delete-visible="[[deleteVisible]]" copy-visible="[[copyVisible]]" sendlink-visible="[[sendLinkVisible]]" sendattachment-visible="[[sendAttachmentVisible]]"></thumb-div>
            </template>
        </iron-list>

        <scroll-control label="[[scrollLetter]]" indicatorvisible="{{scrollLetterVisible}}"></scroll-control>

        <detail-dialog id="dialog" file="[[currentFile]]" thumb-css="[[thumbCss]]" tab-index="[[tabIndex]]" index="[[index]]" epub-reader-visible="[[epubReaderVisible]]" delete-visible="[[deleteVisible]]" copy-visible="[[copyVisible]]" send-link-visible="[[sendLinkVisible]]" send-attachment-visible="[[sendAttachmentVisible]]"></detail-dialog>

        <app-drawer id="leftDrawer" swipe-open="">
            <p>Selected items: [[selectedItems.length]]</p>
            <div hidden$="[[!selectedItems.length]]">
                <paper-button on-tap="deleteFiles" hidden$="[[!deleteVisible]]">Delete</paper-button>
                <paper-button on-tap="copyFiles" hidden$="[[!copyVisible]]">Copy</paper-button>
                <paper-button on-tap="sendLinks" hidden$="[[!sendLinkVisible]]">Send Link</paper-button>
                <paper-button on-tap="sendAttachments" hidden$="[[!sendAttachmentVisible]]">Send Attachment</paper-button>

                <iron-list id="selectedItemsList" items="[[selectedItems]]" hidden$="[[!selectedItems.length]]">
                    <template>
                        <p>[[_computeLabel(item)]]</p>
                    </template>
                </iron-list>
            </div>

        </app-drawer>

    </template>

    <script>HTMLImports.whenReady(function(){Polymer({is:"poly-ebook-view",properties:{options:Object,files:Array,currentFile:Object,toastSuccessText:"File copied successfully.",toastErrorText:"",tabIndex:{type:Number,value:0},filteredFiles:{type:Array,value:[]},deleteVisible:{type:Boolean,value:!1},copyVisible:{type:Boolean,value:!1},sendLinkVisible:{type:Boolean,value:!1},sendAttachmentVisible:{type:Boolean,value:!1},thumbDims:Array,thumbDimsIndex:Number,thumbCss:{type:String},counterclass:{type:String,value:"green"},searchText:{type:String,value:""},itemCounterHidden:{type:Boolean,value:!0},scrollControlVisible:{type:Boolean,value:!1},scrollLetterVisible:{type:Boolean,value:!0},scrollLetter:"",listEle:HTMLElement,drawer:HTMLElement,ajaxGetResponse:Object,selectedItems:{type:Object},lastTapAt:{type:Number,value:0}},observers:["_filterFiles(files, searchText)","_resetBySectionIndex(options.sectionIndex)","_resetByThumbDimsIndex(thumbDimsIndex)","_onActionResponse(ajaxGetResponse)"],deleteFiles:function(e,t,i){this.fire("detailAction",{files:this.selectedItems,method:"delete"})},copyFiles:function(e,t,i){this.fire("detailAction",{files:this.selectedItems,method:"copy"})},sendAttachments:function(e,t,i){this.fire("detailAction",{files:this.selectedItems,method:"sendattachment"})},sendLinks:function(e,t,i){this.fire("detailAction",{files:this.selectedItems,method:"sendlink"})},_unselect:function(e){console.log("TODO",e)},toggleDrawer:function(){this.drawer.toggle()},_computeLabel:function(e){var t=Math.max(e.lastIndexOf("\\"),e.lastIndexOf("/"))+1;return e.substr(t)},scroll2Top:function(){this.filteredFiles&&this.filteredFiles.length>0&&this.listEle.scrollToIndex(0)},scrollUp:function(){this.filteredFiles&&this.filteredFiles.length>0&&this.listEle.scrollToIndex(Math.max(0,Math.round(this.listEle.firstVisibleIndex-this.filteredFiles.length/10)))},scrollDown:function(){this.filteredFiles&&this.filteredFiles.length>0&&this.listEle.scrollToIndex(Math.min(this.filteredFiles.length-1,Math.round(this.listEle.firstVisibleIndex+this.filteredFiles.length/10)))},scroll2End:function(){this.filteredFiles&&this.filteredFiles.length>0&&this.listEle.scrollToIndex(this.filteredFiles.length-1)},clearInput:function(){this.searchText=""},_onDoFilter:function(e){e&&e.detail&&(e=e.detail.text),this.searchText=e.replace(/,/g," ").replace(/\./g," ").replace(/\_/g," ").replace(/\-/g," ")},_resetByThumbDimsIndex:function(e){this.scrollLetter="",this.thumbCss=["width:",this.thumbDims[this.thumbDimsIndex].width,"px;","height:",this.thumbDims[this.thumbDimsIndex].height,"px;"].join(""),document.querySelector("iron-list").fire("iron-resize")},_resetBySectionIndex:function(e){this.scrollLetter="";var t=this.options.sections[e];this.searchText=t.initialFilter,this.thumbDims=t.thumbsDims,this.thumbDimsIndex=t.dimIndex,this.deleteVisible=!!t.trashDir,this.copyVisible=!!t.copyDir,this.epubReaderVisible=!!t.epubReader,this.sendLinkVisible=!(!t.sendOptions||!t.sendOptions.sendlink),this.sendAttachmentVisible=!(!t.sendOptions||!t.sendOptions.sendattachment),this._resetByThumbDimsIndex(this.thumbDimsIndex)},_filterFiles:function(e,t){var i;this.scrollLetter="";var s=function(e){for(var t=0;t<i.length;t++){var s=i[t];if(s&&s.length>0){var l=s.substr(0,1);if("!"===l||"-"===l){if(s.length>1&&e.toLowerCase().indexOf(s.substr(1))>-1)return!1}else if(e.toLowerCase().indexOf(s)===-1)return!1}}return!0},l=function(){return e?t?(i=t.toLowerCase().split(" "),e.filter(s)):e:null};this.filteredFiles=l(),this.itemCounterHidden=this.filteredFiles.length===this.files.length,this.counterclass=0===this.filteredFiles.length?"red":this.itemCounterHidden?"green":"yellow",this.scrollControlVisible=!1,this.scrollLetterVisible=0!==this.filteredFiles.length,this._calcScrollLetter(),this.listEle.fire("iron-resize")},_getLoadFilesUrl:function(e){return void 0==e?null:"/"+e+"/files.json"},_calcScrollLetter:function(){var e=this.filteredFiles[this.listEle.firstVisibleIndex];if(e){var t=Math.max(e.lastIndexOf("/"),e.lastIndexOf("\\"));this.scrollLetter=e?e.substr(t+1,1).trim().toUpperCase():""}else this.scrollLetter=""},getScrollPercent:function(){var e=document.documentElement,t=document.body,i=(this.listEle,"scrollTop"),s="scrollHeight";return e[i]||t[i]/((e[s]||t[s])-e.clientHeight)*100},_scrollListener:function(e){this._calcScrollLetter(e),this.listEle.lastVisibleIndex<this.filteredFiles.length-1&&this.getScrollPercent()>99.99&&(console.info("fire..."),this.listEle.fire("iron-resize"))},_listTap:function(){var e=Date.now();e-this.lastTapAt<800&&this._fireResize(),this.lastTapAt=e},_fireResize:function(){console.info("fire resize"),this.listEle.fire("iron-resize")},_onDetailAction:function(e){var t=e.detail,i=t.files;if("delete"!==t.method||confirm("Do you really want to delete?")){for(var s=0;s<i.length;s++){var l=i[s];this.$.ajaxGet.url=l.replace(/file[\/|\\]/,t.method+"/"),this.$.ajaxGet.generateRequest()}this.listEle.clearSelection()}},_onActionResponse:function(e){if(e){var t=e.file;if(e.error)this.toastErrorText=e.msg,this.$.toastError.open();else if(console.info("response.method:",e.method),"delete"===e.method){var i=this.options.sectionIndex+"/file"+t,s=this.filteredFiles.indexOf(i);s>-1&&this.filteredFiles.splice(s,1),s=this.files.indexOf(i),s>-1&&this.files.splice(s,1),this.listEle.fire("iron-resize")}else this.toastSuccessText=e.msg,this.$.toastSuccess.open()}},_onOpenDetailDialog:function(e){this.currentFile=e.detail.file,this.$.dialog.open()},attached:function(){console.info("attached..."),this.listEle=this.$.list,this.drawer=this.$.leftDrawer;var e=this;Polymer.RenderStatus.afterNextRender(this,function(){this.listen(window,"scroll","_scrollListener"),this.listen(document.body,"scroll","_scrollListener"),this.listen(e.listEle,"scroll","_scrollListener"),this.listen(e,"detailAction","_onDetailAction"),this.listen(e,"openDetailDialog","_onOpenDetailDialog"),this.listen(e,"scroll2End","scroll2End"),this.listen(e,"scrollDown","scrollDown"),this.listen(e,"scrollUp","scrollUp"),this.listen(e,"scroll2Top","scroll2Top"),this.listen(e,"doFilter","_onDoFilter")})},ready:function(){}})});</script>

</dom-module>
</body></html>