WebCompDev / COMPONENTS

Commit d069de465402eb89c7a9d2311242ecd1d6f60ea0

Authored by Luigi Serra
1 parent 05c2c2bb

google card components

Inline Side-by-side
Showing 6 changed files with 429 additions and 0 deletions
controllets/google-cards-controllet/google-card-controllet.html 0 → 100644
  View file @d069de4
  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-ln.js"></script>
  9 +
  10 +<dom-module id="google-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: 100%;
  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: 100;
  49 + top: -20px;
  50 + right: 8px;
  51 + --paper-fab-background:#2196F3;
  52 + }
  53 +
  54 + paper-dialog {
  55 + margin: 0px;
  56 + padding: 0px;
  57 + z-index: 1100;
  58 + }
  59 +
  60 + #fullscreen_container {
  61 + display: inline;
  62 + position: fixed;
  63 + width: 90%;
  64 + height: 80vh;
  65 + right: 0;
  66 + left: 0;
  67 + top: 64px;
  68 + margin-right: auto;
  69 + margin-left: auto;
  70 + padding: 8px;
  71 + background-color: white;
  72 + }
  73 +
  74 + #fullscreen_content {
  75 + margin: 0px;
  76 + }
  77 +
  78 + #resource{
  79 + height: 100%;
  80 + width: 100%;
  81 + }
  82 +
  83 + </style>
  84 +
  85 +
  86 + <paper-material id="paper_card_container" elevation="{{elevation}}">
  87 +
  88 + <div id="content">
  89 + <iframe id="resource" src="{{resourceUrl}}?embedded=true"></iframe>
  90 + </div>
  91 +
  92 + <paper-fab id="fullscreen-button" class="open" mini icon="fullscreen" on-click="_handleOpenClick"></paper-fab>
  93 +
  94 + <div class="footer">
  95 + <div class="comment">{{comment}}</div>
  96 + </div>
  97 +
  98 + <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
  99 + <!--with-backdrop-->
  100 + <div id="fullscreen_content"></div>
  101 + </paper-dialog>
  102 +
  103 + </paper-material>
  104 +
  105 + </template>
  106 +
  107 + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  108 +
  109 + <script>
  110 + _this = null;
  111 +
  112 + Polymer({
  113 + is: "google-card-controllet",
  114 + properties: {
  115 +
  116 + width: {
  117 + type: Number,
  118 + observer: "_changeWidth"
  119 + },
  120 +
  121 + height: {
  122 + type: Number,
  123 + observer: "_changeHeight"
  124 + },
  125 +
  126 + elevation:{
  127 + type: Number,
  128 + value: 3
  129 + },
  130 +
  131 + createNewType : {
  132 + type : String,
  133 + value : undefined
  134 + },
  135 +
  136 + comment:{
  137 + cardType: String,
  138 + value: ""
  139 + },
  140 +
  141 + resourceUrl : {
  142 + type : String,
  143 + value : undefined
  144 + }
  145 + },
  146 +
  147 + ready : function(){
  148 + },
  149 +
  150 + attached: function(){
  151 + $(this.$.fullscreen_container).perfectScrollbar();
  152 + },
  153 +
  154 +
  155 + _changeWidth: function(){
  156 + this.style.width = this.width + "px";
  157 + this.$.paper_card_container.style.width = this.width + "px";
  158 + this.$.content.style.width = this.width - 8 + "px";
  159 + },
  160 +
  161 + _changeHeight: function(){
  162 + this.style.height = this.height + 64 + "px";
  163 + this.$.paper_card_container.style.height = this.height + "px";
  164 + this.$.content.style.height = this.height - 4 + "px";
  165 + $(this.$.content).perfectScrollbar();
  166 + },
  167 +
  168 + _handleOpenClick: function(){
  169 + this.$.fullscreen_content.style.height = "80vh";
  170 + this.$.fullscreen_content.innerHTML = this.$.content.innerHTML;
  171 + this.$.fullscreen_container.style.display = "inline";//datalet res
  172 + this.$.fullscreen_container.open();
  173 + }
  174 +
  175 + })
  176 + </script>
  177 +
  178 +</dom-module>
0 \ No newline at end of file 179 \ No newline at end of file
controllets/google-cards-controllet/google-card-creation-controllet.html 0 → 100644
  View file @d069de4
  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/paper-input/paper-input.html"/>
  5 +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
  6 +<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
  7 +<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
  8 +
  9 +<script src="../../locales/paper-card-ln.js"></script>
  10 +
  11 +<dom-module id="google-card-creation-controllet">
  12 +
  13 + <template>
  14 + <link rel="stylesheet" href="../shared_js/perfect-scrollbar/css/perfect-scrollbar.min.css">
  15 + <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  16 + <style>
  17 +
  18 + #title{
  19 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  20 + font-size: 22px;
  21 + color: #2196F3;
  22 + width: 100%;
  23 + margin : 20px;
  24 + }
  25 +
  26 + #message{
  27 + font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  28 + font-size: 16px;
  29 + color: #000000;
  30 + margin: 20px;
  31 + }
  32 +
  33 + paper-fab#add-button {
  34 + position: absolute;
  35 + z-index: 100;
  36 + bottom: 200px;
  37 + right: 30px;
  38 + --paper-fab-background:#2196F3;
  39 + }
  40 +
  41 + paper-dialog#fullscreen_container {
  42 + display: inline;
  43 + position: fixed;
  44 + width: 90%;
  45 + height: 80vh;
  46 + left: 5%;
  47 + top: 64px;
  48 + margin: 0px;
  49 + padding: 20px;
  50 + background-color: white;
  51 + z-index: 9999;
  52 + }
  53 +
  54 + #fullscreen_content {
  55 + margin: 0px;
  56 + z-index:100;
  57 + }
  58 +
  59 + #resource{
  60 + height: 100%;
  61 + width: 100%;
  62 + }
  63 +
  64 + </style>
  65 +
  66 + <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
  67 + <!--with-backdrop-->
  68 + <div id="fullscreen_content">
  69 + <paper-fab id="add-button" class="add" mini icon="add" on-click="_handleAddClick"></paper-fab>
  70 + <div id="title">{{resourceType}}</div>
  71 + <div id="message">
  72 + Choose a name to create a new resource or copy and paste an existing resource url(after sharing it on google drive).
  73 + If you use an existing resource a new one will not be create.
  74 + </div>
  75 + <paper-input id="name" label="New resource name"></paper-input>
  76 + <paper-input id="url" label="Existing resource Url"></paper-input>
  77 + </div>
  78 + </paper-dialog>
  79 +
  80 + </template>
  81 +
  82 + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
  83 + <script src="https://apis.google.com/js/client.js"></script>
  84 +
  85 + <script>
  86 + _this = null;
  87 +
  88 + Polymer({
  89 + is: "google-card-creation-controllet",
  90 + properties: {
  91 +
  92 + elevation:{
  93 + type: Number,
  94 + value: 3
  95 + },
  96 +
  97 + resourceType : {
  98 + type : String,
  99 + value : undefined
  100 + },
  101 +
  102 + comment:{
  103 + cardType: String,
  104 + value: ""
  105 + },
  106 +
  107 + CLIENT_ID : {
  108 + type : String,
  109 + value : "1051697215951-q0gt5h8v4tgi0vdliogiqcsa2e7lvjqv.apps.googleusercontent.com"
  110 + },
  111 +
  112 + SCOPES: {
  113 + type : Array,
  114 + value : ["https://www.googleapis.com/auth/drive.file"]
  115 + },
  116 +
  117 + resourceId : {
  118 + type : String,
  119 + value : undefined
  120 + }
  121 + },
  122 +
  123 + /* GOOGLE API FUNCTION*/
  124 + /**
  125 + * Check if current user has authorized this application.
  126 + */
  127 + checkAuth : function () {
  128 + gapi.auth.authorize(
  129 + {
  130 + 'client_id': _this.CLIENT_ID,
  131 + 'scope' : _this.SCOPES.join(' '),
  132 + 'immediate': true
  133 + }, _this.handleAuthResult);
  134 + },
  135 + /**
  136 + * Handle response from authorization server.
  137 + *
  138 + * @param {Object} authResult Authorization result.
  139 + */
  140 + handleAuthResult : function(authResult) {
  141 + if (authResult && !authResult.error) {
  142 + console.log("Authorized");
  143 + _this.loadDriveApi();
  144 + } else {
  145 + console.log("Authorization failed");
  146 + }
  147 + },
  148 +
  149 + /**
  150 + * Initiate auth flow in response to user clicking authorize button.
  151 + *
  152 + * @param {Event} event Button click event.
  153 + */
  154 + handleAuthClick : function (event) {
  155 + gapi.auth.authorize(
  156 + {client_id: CLIENT_ID, scope: SCOPES, immediate: false},
  157 + _this.handleAuthResult);
  158 + return false;
  159 + },
  160 + /**
  161 + * Load Drive API client library.
  162 + */
  163 + loadDriveApi : function() {
  164 + gapi.client.load('drive', 'v3', function() {
  165 + console.log("DRIVER V3 API LOADED");
  166 + _this.createNewDocument();
  167 + });
  168 + },
  169 + /**
  170 + * Create new doc
  171 + * */
  172 + createNewDocument : function(){
  173 + var request = gapi.client.request({
  174 + 'path': '/drive/v3/files',
  175 + 'method': 'POST',
  176 + 'body':{
  177 + 'name': _this.$.name.value,//'Shared document from api',
  178 + 'mimeType' : "application/vnd.google-apps." + _this.resourceType,
  179 + }
  180 + });
  181 +
  182 + request.execute(function(resp) {
  183 + console.log("FILE CREATED " + resp.id );
  184 + console.log(resp);
  185 + _this.resourceId = resp.id;
  186 + _this.getPremissions();
  187 + _this.insertPermission("spod.platform@gmail.com", "anyone", "writer");
  188 + });
  189 +
  190 + },
  191 + /**
  192 + * Get permission for a file
  193 + * */
  194 + getPremissions : function(){
  195 +
  196 + var request = gapi.client.request({
  197 + 'path': '/drive/v3/files/' + _this.resourceId + '/permissions',
  198 + 'method': 'GET',
  199 + 'body':{}
  200 + });
  201 +
  202 + request.execute(function(resp) {
  203 + console.log("FILE PERMISSION FOR " + _this.resourceId );
  204 + console.log(resp);
  205 + });
  206 +
  207 + },
  208 +
  209 + insertPermission : function(value, type, role) {
  210 + var request = gapi.client.request({
  211 + 'path': '/drive/v3/files/' + _this.resourceId + '/permissions',
  212 + 'method': 'POST',
  213 + 'body':{
  214 + 'value': value,
  215 + 'type' : type,
  216 + 'role' : role
  217 + }
  218 + });
  219 +
  220 + request.execute(function(resp) {
  221 + console.log("FILE PERMISSIONS SET FOR" + _this.resourceId);
  222 + console.log(resp);
  223 + //_this.$.content.innerHTML = '<iframe id="doc" src="https://docs.google.com/' + _this.resourceType + ((_this.resourceType != "document") ? "s" : "") + '/d/' + _this.resourceId +'/edit?usp=sharing&embedded=true"></iframe>';
  224 + _this.fire('google-card-creation_new-card-created', {
  225 + type : this.resourceType,
  226 + url : 'https://docs.google.com/' + _this.resourceType + ((_this.resourceType != "document") ? "s" : "") + '/d/' + _this.resourceId +'/edit?usp=sharing&embedded=true'
  227 + }
  228 + );
  229 +
  230 + });
  231 + },
  232 + /*END GOOGLE API FUNCTION*/
  233 +
  234 + ready : function(){
  235 + this.$.fullscreen_container.open();
  236 + this.$.fullscreen_container.style.zIndex = 100;
  237 + },
  238 +
  239 + _handleAddClick : function(e){
  240 + if(this.$.url.value == ""){
  241 + _this = this;
  242 + this.checkAuth();
  243 + }else{
  244 + this.fire('google-card-creation_new-card-created', { type : this.resourceType, url : this.$.url.value })
  245 + }
  246 + this.$.fullscreen_container.close();
  247 + }
  248 + })
  249 + </script>
  250 +
  251 +</dom-module>
0 \ No newline at end of file 252 \ No newline at end of file
controllets/google-cards-controllet/static/images/google-doc-icon.png 0 → 100644
View file @d069de4

19.8 KB
controllets/google-cards-controllet/static/images/google-drawing-icon.png 0 → 100644
View file @d069de4

6.45 KB
controllets/google-cards-controllet/static/images/google-presentation-icon.png 0 → 100644
View file @d069de4

12.4 KB
controllets/google-cards-controllet/static/images/google-sheet-icon.png 0 → 100644
View file @d069de4

17 KB