SGH / COMPONENTS

Commit 478a3abefcd091c38d2ec3e0594ea41b54ff892e

Authored by Luigi Serra
1 parent a53fbbed
master

document card for cocreation with etherpad

Inline Side-by-side
Showing 1 changed file with 194 additions and 0 deletions
controllets/document-card-controllet/document-card-controllet.html 0 → 100644
  View file @478a3ab
  1 +<link rel="import" href="../../bower_components/polymer/polymer.html"/>
  2 +<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
  3 +<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
  4 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
  5 +<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
  6 +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
  7 +
  8 +<script src="../../locales/paper_card_controllet_ln.js"></script>
  9 +
  10 +<dom-module id="document-card-controllet">
  11 +
  12 + <template>
  13 + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  14 + <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  15 + <style>
  16 +
  17 + #paper_card_container {
  18 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  19 + font-size: 16px;
  20 + background-color: white;
  21 + }
  22 +
  23 + #content {
  24 + padding: 4px 4px 0px 4px;
  25 + position:relative;
  26 + width: 98%;
  27 + height: 90%;
  28 + }
  29 +
  30 + .footer {
  31 + height: 16px;
  32 + }
  33 +
  34 + .comment {
  35 + position: relative;
  36 + top: -50px;
  37 + height: 50px;
  38 + background-color: white;
  39 + padding: 8px;
  40 + font-size: small;
  41 + color: #727272;
  42 + word-wrap: break-word;
  43 + overflow: hidden;
  44 + }
  45 +
  46 + paper-fab#fullscreen-button {
  47 + position: absolute;
  48 + /*z-index: 10;*/
  49 + top: 11px;
  50 + right: 15px;
  51 + --paper-fab-background:#FFFFFF;
  52 + padding : 0px;
  53 + margin: 0px;
  54 + height: 24px;
  55 + width: 24px;
  56 + color: #666666;
  57 + }
  58 +
  59 + paper-dialog {
  60 + margin: 0px;
  61 + padding: 0px;
  62 + z-index: 1100;
  63 + }
  64 +
  65 + #fullscreen_container {
  66 + display: inline;
  67 + position: fixed;
  68 + width: 90%;
  69 + height: 80vh;
  70 + right: 0;
  71 + left: 0;
  72 + top: 64px;
  73 + margin-right: auto;
  74 + margin-left: auto;
  75 + padding: 8px;
  76 + background-color: white;
  77 + }
  78 +
  79 + #fullscreen_content {
  80 + margin: 0px;
  81 + }
  82 +
  83 + #resource{
  84 + height: 100%;
  85 + width: 100%;
  86 + }
  87 +
  88 + :host #docs-header{
  89 + display : none;
  90 + }
  91 +
  92 + </style>
  93 +
  94 +
  95 + <paper-material id="paper_card_container" elevation="{{elevation}}">
  96 +
  97 + <div id="content">
  98 + <iframe id="resource" src="{{resourceUrl}}?userName={{userName}}&showLineNumbers=false"></iframe>
  99 + <!--<iframe id="resource" src="{{resourceUrl}}"></iframe>-->
  100 + </div>
  101 +
  102 + <paper-fab id="fullscreen-button" class="open" mini icon="fullscreen" on-click="_handleOpenClick"></paper-fab>
  103 +
  104 + <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
  105 + <!--with-backdrop-->
  106 + <div id="fullscreen_content"></div>
  107 + </paper-dialog>
  108 +
  109 + </paper-material>
  110 +
  111 + </template>
  112 +
  113 + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  114 +
  115 + <script>
  116 + _this = null;
  117 +
  118 + Polymer({
  119 + is: "document-card-controllet",
  120 + properties: {
  121 +
  122 + width: {
  123 + type: Number,
  124 + observer: "_changeWidth"
  125 + },
  126 +
  127 + height: {
  128 + type: Number,
  129 + observer: "_changeHeight"
  130 + },
  131 +
  132 + elevation:{
  133 + type: Number,
  134 + value: 3
  135 + },
  136 +
  137 + createNewType : {
  138 + type : String,
  139 + value : undefined
  140 + },
  141 +
  142 + comment:{
  143 + cardType: String,
  144 + value: ""
  145 + },
  146 +
  147 + resourceUrl : {
  148 + type : String,
  149 + value : undefined
  150 + },
  151 +
  152 + userName: {
  153 + type: String,
  154 + value: undefined
  155 + },
  156 + lang:{
  157 + type: String,
  158 + value: navigator.language
  159 + }
  160 + },
  161 +
  162 + ready : function(){
  163 + },
  164 +
  165 + attached: function(){
  166 + $(this.$.fullscreen_container).perfectScrollbar();
  167 + },
  168 +
  169 +
  170 + _changeWidth: function(){
  171 + //this.style.width = this.width + "px";
  172 + //this.$.paper_card_container.style.width = this.width + "px";
  173 + //this.$.content.style.width = this.width - 8 + "px";
  174 + },
  175 +
  176 + _changeHeight: function(){
  177 + this.style.height = this.height + "vh";
  178 + //this.$.content.width = this.width - 4 + "vh";
  179 + this.$.paper_card_container.style.height = this.height + "vh";
  180 + this.$.content.style.height = this.height - 1 + "vh";
  181 + $(this.$.content).perfectScrollbar();
  182 + },
  183 +
  184 + _handleOpenClick: function(){
  185 + this.$.fullscreen_content.style.height = "80vh";
  186 + this.$.fullscreen_content.innerHTML = this.$.content.innerHTML;
  187 + this.$.fullscreen_container.style.display = "inline";//datalet res
  188 + this.$.fullscreen_container.open();
  189 + }
  190 +
  191 + })
  192 + </script>
  193 +
  194 +</dom-module>
0 \ No newline at end of file 195 \ No newline at end of file