<link rel="import" href="../../bower_components/polymer/polymer.html"/> <link rel="import" href="../../bower_components/paper-material/paper-material.html"/> <link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/> <link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/> <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/> <link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/> <script src="../../locales/paper_card_controllet_ln.js"></script> <dom-module id="paper-card-controllet"> <template> <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css"> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <style> #paper_card_container { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; background-color: white; position: relative; float: left; margin: 40px; } #content { padding: 4px 4px 0px 4px; position:relative; } .legend { position: relative; top: -48px; height: 32px; padding: 16px 0px 0px 8px; /*z-index: 1000;*/ background: rgba(0,0,0,0.8); color: white; font-weight: 700; word-wrap: break-word; } .footer { height: 16px; } .comment { position: relative; top: -50px; height: 50px; background-color: white; padding: 8px; font-size: small; color: #727272; word-wrap: break-word; overflow: hidden; } paper-fab { position: absolute; z-index: 10; --paper-fab-background:#2196F3; } paper-fab.open { /*bottom: 28px;*/ bottom: -20px; right: 8px; } paper-fab.modify { top: -12px; right: 20px; --iron-icon-height: 18px; --iron-icon-width: 18px; width: 24px; height: 24px; --paper-fab-background:#B6B6B6; } paper-fab.delete { top: -12px; right: -12px; --iron-icon-height: 18px; --iron-icon-width: 18px; width: 24px; height: 24px; --paper-fab-background:#B6B6B6; } paper-dialog { margin: 0px; padding: 0px; } #fullscreen_container { display: inline; position: fixed; width: 80%; height: 70vh; right: 0; left: 0; top: 64px; margin-right: auto; margin-left: auto; z-index: 1100; padding: 8px; background-color: white; } #fullscreen_content { margin: 0px; } </style> <paper-material id="paper_card_container" elevation="{{elevation}}"> <paper-fab id="card_modify" class="modify" mini icon="create" on-click="_handleModifyClick"></paper-fab> <paper-fab id="card_delete" class="delete" mini icon="delete" on-click="_handleDeleteClick"></paper-fab> <div id="content"> <content></content> </div> <div class="legend"> {{cardTitle}} <template is="dom-if" if="{{checkType(cardType, 'link')}}"> <paper-fab id="card_open_link" class="open" mini icon="link" on-click="_handleOpenClick"></paper-fab> </template> <template is="dom-if" if="{{checkType(cardType, 'text')}}"> <paper-fab id="card_open_text" class="open" mini icon="text-format" on-click="_handleOpenClick"></paper-fab> </template> <template is="dom-if" if="{{checkType(cardType, 'datalet')}}"> <paper-fab id="card_open_datalet" class="open" mini icon="assessment" on-click="_handleOpenClick"></paper-fab> </template> </div> <div class="footer"> <div class="comment">{{comment}}</div> </div> <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation"> <!--with-backdrop--> <div id="fullscreen_content"></div> </paper-dialog> </paper-material> </template> <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> <script> Polymer({ is: "paper-card-controllet", properties: { width: { type: Number, observer: "_changeWidth" }, height: { type: Number, observer: "_changeHeight" }, elevation:{ type: Number, value: 3 }, cardType:{ type: String, value: "text" }, cardTitle:{ type: String, value: "" }, comment:{//cardDescription cardType: String, value: "" } }, attached: function(){ if(this.cardType == "text"){ this.$.content.style.backgroundColor = "#FFFFCC"; } $(this.$.fullscreen_container).perfectScrollbar(); this._translate(); }, _translate: function(){ paper_ln["ln"] = ODE.user_language; this.$.card_modify.setAttribute("title", paper_ln["modify_"+paper_ln["ln"]]); this.$.card_delete.setAttribute("title", paper_ln["delete_"+paper_ln["ln"]]); if(this.checkType(this.cardType, 'link')) if(this.$$("#card_open_link")) this.$$("#card_open_link").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]); if(this.checkType(this.cardType, 'text')) if(this.$$("#card_open_text")) this.$$("#card_open_text").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]); if(this.checkType(this.cardType, 'datalet')) if(this.$$("#card_open_datalet")) this.$$("#card_open_datalet").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]); }, _changeWidth: function(){ this.style.width = this.width + "px"; this.$.content.style.width = this.width - 8 + "px"; this.$.paper_card_container.style.width = this.width + "px"; }, _changeHeight: function(){ this.style.height = this.height + 64 + "px"; this.$.content.style.height = this.height - 4 + "px"; this.$.paper_card_container.style.height = this.height + "px"; $(this.$.content).perfectScrollbar(); }, checkType: function(type, check){ return (type == check); }, _handleDeleteClick: function(){ this.fire('paper-card-controllet_delete-clicked', {data : this}); }, _handleModifyClick: function(){ this.fire('paper-card-controllet_details-clicked', {data : this}); }, _handleOpenClick: function(){ var html; switch(this.cardType){ case 'text': this.$.fullscreen_container.style.backgroundColor = "#ffc"; break; case 'link': window.open(this.getAttribute('card-link'), '_blank'); return; } var html = this.$.content.innerHTML; this.$.fullscreen_content.innerHTML = html; this.$.fullscreen_container.open(); this.$.fullscreen_container.style.display = "inline";//datalet resize in chrome } }) </script> </dom-module>