diff --git a/controllets/document-card-controllet/spreadsheet-card-controllet.html b/controllets/document-card-controllet/spreadsheet-card-controllet.html new file mode 100644 index 0000000..78fec9a --- /dev/null +++ b/controllets/document-card-controllet/spreadsheet-card-controllet.html @@ -0,0 +1,222 @@ +<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="spreadsheet-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; + } + + #content { + position:relative; + padding: 2px; + /*padding: 4px 4px 0px 4px; + width: 98%; + height: 90%;*/ + } + + .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#fullscreen-button { + position: absolute; + /*z-index: 10;*/ + top: 11px; + right: 15px; + --paper-fab-background:#FFFFFF; + padding : 0px; + margin: 0px; + height: 24px; + width: 24px; + color: #666666; + } + + paper-dialog { + margin: 0px; + padding: 0px; + z-index: 1100; + } + + #fullscreen_container { + display: inline; + position: fixed; + width: 90%; + height: 80vh; + right: 0; + left: 0; + top: 64px; + margin-right: auto; + margin-left: auto; + padding: 8px; + background-color: white; + } + + #fullscreen_content { + margin: 0px; + } + + #resource{ + height: 100%; + width: 100%; + } + + :host #docs-header{ + display : none; + } + + #info_close_button{ + z-index: 1; + color: #666666; + box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); + -webkit-transition: 0.2s ease-out; + -moz-transition: 0.2s ease-out; + -o-transition: 0.2s ease-out; + transition: 0.2s ease-out; + cursor: pointer; + background: linear-gradient(#f4f4f4,#e4e4e4); + float: right; + top: 11px; + right: 8px; + margin: 0px; + position: absolute; + height: 29px; + min-width: 30px; + padding: 5px; + } + + </style> + + + <paper-material id="paper_card_container" elevation="{{elevation}}"> + + <div id="content"> + <iframe id="resource" src="{{resourceUrl}}"></iframe> + <!--<iframe id="resource" src="{{resourceUrl}}"></iframe>--> + </div> + + <template id="dom-if" if="{{showControls}}"> + <paper-fab id="fullscreen-button" class="open" mini icon="fullscreen" on-click="_handleOpenClick"></paper-fab> + + <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation"> + <!--with-backdrop--> + <div id="fullscreen_content"></div> + <paper-button id="info_close_button" dialog-confirm autofocus>x</paper-button> + </paper-dialog> + </template> + + </paper-material> + + </template> + + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> + + <script> + + Polymer({ + is: "spreadsheet-card-controllet", + properties: { + + width: { + type: Number, + observer: "_changeWidth" + }, + + height: { + type: Number, + observer: "_changeHeight" + }, + + elevation:{ + type: Number, + value: 3 + }, + + createNewType : { + type : String, + value : undefined + }, + + comment:{ + cardType: String, + value: "" + }, + + resourceUrl : { + type : String, + value : undefined + }, + + userName: { + type: String, + value: undefined + }, + + showControls: { + type: Boolean, + value: false + }, + + lang:{ + type: String, + value: navigator.language + } + }, + + ready : function(){ + }, + + attached: function(){ + $(this.$.fullscreen_container).perfectScrollbar(); + }, + + _changeWidth: function(){ + //this.style.width = this.width + "px"; + //this.$.paper_card_container.style.width = this.width + "px"; + //this.$.content.style.width = this.width - 8 + "px"; + }, + + _changeHeight: function(){ + this.style.height = this.height + "vh"; + //this.$.content.width = this.width - 4 + "vh"; + this.$.paper_card_container.style.height = this.height + "vh"; + this.$.content.style.height = this.height - 1 + "vh"; + $(this.$.content).perfectScrollbar(); + }, + + _handleOpenClick: function(){ + this.$.fullscreen_content.style.height = "80vh"; + this.$.fullscreen_content.innerHTML = this.$.content.innerHTML; + this.$.fullscreen_container.style.display = "inline";//datalet res + this.$.fullscreen_container.open(); + } + + }) + </script> + +</dom-module> \ No newline at end of file diff --git a/controllets/text-element-controllet/metadata-element-controllet.html b/controllets/text-element-controllet/metadata-element-controllet.html new file mode 100644 index 0000000..bbe325b --- /dev/null +++ b/controllets/text-element-controllet/metadata-element-controllet.html @@ -0,0 +1,175 @@ +<!-- +@license + The MIT License (MIT) + + Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in + all copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + THE SOFTWARE. +--> + +<!-- +* Developed by : +* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu +* +--> + +<link rel="import" href="../../bower_components/polymer/polymer.html"> +<link rel="import" href="../../bower_components/paper-styles/color.html"> + +<!-- +`text-element-controllet` is a text area with heading. It fires an event when the text value is modified. This event can be useful when you have to monitor many af this elements. + + +Example: + + <text-element-controllet heading="myField" + description="myFieldDescription" + number="1"> + </text-element-controllet> + + +@element text-element-controllet +@status beta +@homepage +@group controllets +--> + + +<dom-module id="metadata-element-controllet"> + <template> + + <style is="custom-style"> + + .avatar { + display: inline-block; + position: relative; + float: left; + height: 1.7em; + width: 1.7em; + border-radius: 50%; + background: var(--paper-blue-500); + color: white; + line-height: 2em; + font-size: 0.74em; + text-align: center; + } + + .heading{ + /*width: 12.5em;*/ + } + + .big { + display: inline-block; + position: relative; + float: left; + font-size: 1em; + padding: 0.5em 0.25em 0.5em; + color: var(--google-grey-500); + } + + .medium { + position: relative; + float: left; + font-size: 0.8125em; + padding-bottom: 0px; + display: inline-block; + padding-left: 10px; + width: 100%; + } + + #text{ + margin: 20px; + } + + </style> + + <div class="layout vertical"> + <div class="heading layout horizontal"> + <div class="avatar">{{number}}</div> + <div class="medium">{{description}}</div> + </div> + <paper-textarea id="text" label="{{heading}}" value="{{value}}" always-float-label></paper-textarea> + </div> + + </template> + + <script> + + Polymer({ + + is: 'metadata-element-controllet', + + properties: { + /** + * It's the name of the elelent + * + * @attribute heading + * @type Strig + * @default 'Heading' + */ + heading : { + type : String, + value : "Heading" + }, + /** + * It's the description of the elelent + * + * @attribute description + * @type Strig + * @default 'Description' + */ + description: { + type: String, + value: "Description" + }, + /** + * It's a string value the represent the current number of elelent. It will be use in the label section. + * + * @attribute number + * @type Strig + * @default '0' + */ + number: { + type: String, + value : "0" + }, + + value :{ + type: String, + value: "" + }, + + timer :{ + type: Number, + value : 0 + } + }, + /** + * It returns the value in text area + * + * @method getValue + */ + getValue : function(){ + return this.$.text.value; + } + }); + + </script> + +</dom-module> \ No newline at end of file