From 282651082dec0dc06e611f47bd8e7880f4ebc2ec Mon Sep 17 00:00:00 2001
From: renato <rended83@gmail.com>
Date: Thu, 17 Dec 2015 12:37:50 +0100
Subject: [PATCH] new link-text controllet
---
controllets/create-card-controllet/create-card-controllet.html | 371 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
controllets/create-card-controllet/create-card-controllet_old.html | 307 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html | 2 +-
datalets/base-datalet/base-datalet.html | 1 +
4 files changed, 461 insertions(+), 220 deletions(-)
create mode 100755 controllets/create-card-controllet/create-card-controllet_old.html
diff --git a/controllets/create-card-controllet/create-card-controllet.html b/controllets/create-card-controllet/create-card-controllet.html
index 1c7601b..e2aa669 100755
--- a/controllets/create-card-controllet/create-card-controllet.html
+++ b/controllets/create-card-controllet/create-card-controllet.html
@@ -1,306 +1,239 @@
-<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-input/paper-textarea.html"/>
+<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'>
-<link rel="import" href="../../datalets/preview-datalet/preview-datalet.html" />
-<link rel="import" href="../../controllets/paper-card-controllet/paper-card-controllet.html"/>
+<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-input/paper-input.html">
+<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+
+<!--per la lingua inportare nell' HEADER-->
+<!--<link rel="localization" href="locales/{ln}.l20n">-->
+<!--<script defer src="/dist/compat/web/l20n.js"></script>-->
+<!--<card_Info "BASE INFO">-->
+<!--<card_Text "TEXT">-->
+<!--<card_Link "LINK">-->
+<!--<card_Preview "PREVIEW">-->
<dom-module id="create-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>
- :host {
- display: inline-block;
- margin: 0 8px 8px ;
- font-size: 14px;
- text-align: justify;
- line-height: 10px;
- --paper-fab-background: var(--accent-color);
- font-family: 'Roboto', sans-serif;
- padding-bottom: 30px;
+
+ <style is="custom-style">
+ #create_card_container {
+ display: flex;
+ height: 100%;
width: 100%;
- }
- paper-material {
- background-color: white;
- border-width: 1em;
- padding: 5px;
- margin-bottom: 20px;
+ font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ font-size: 16px;
}
- paper-fab {
- position: relative;
- left: 90%;
- --paper-fab-background:#2196F3;
+ #create_card_info {
+ height: calc(100% - 16px);
+ width: 50%;
+ margin: 8px 16px 8px 8px;
}
- #content ::content {
- /*padding: 0 16px 8px;*/
- padding: 0 16px 8px;
- font-weight: 300;
- color: var(--secondary-text-color);
- line-height: 24px;
- max-height: 400px;
- position:relative;
- overflow: auto;
- }
- ::content.buttons {
- margin-top: 8px;
- }
- ::content paper-button, ::content paper-icon-button {
- font-weight: 500;
- color: var(--accent-color);
+ #create_card_content {
+ height: calc(100% - 16px);
+ width: 50%;
+ margin: 8px 8px 8px 16px;
}
- .avatar
- {
- display: inline-block;
- height: 0.7em;
- width: 0.7em;
- border-radius: 50%;
- background: var(--paper-blue-500);
- color: white;
- line-height: 2em;
- font-size: 1.87em;
+ .input_header {
+ height: 32px;
+ padding-top: 16px;
+ background-color: #B6B6B6;
text-align: center;
+ font-weight: 700;
}
- .title
- {
- position: relative;
- left: 0px;
- /*top: 0.60vh;
- margin-left: 20px;*/
- }
-
- .big
- {
- font-size: 1.37em;
- color: var(--google-grey-500);
+ p {
+ margin: 16px 8px 0px 8px;
}
- .medium
- {
- font-size: 1em;
- padding-bottom: 0.5em;
- color : #000000;
+ #create_card_title {
font-weight: bold;
+ color: #2196F3;
+ text-align: center;
}
- .small
- {
- font-size: 0.8em;
- padding-top: 10px;
- color: var(--paper-blue-500);
- font-weight: bold;
+ #create_card_description {
+ font-style: italic;
+ color: #727272;
+ text-align: center;
}
- paper-textarea.custom_textarea{
- /*max-width:40vw;*/
+ #create_card_text {
+
}
- div.vertical{
- margin: 20px;
+ paper-input, paper-textarea {
+ height: 48px;
+ width: calc(100% - 16px);
+ margin: 0px 0px 8px 8px;
+ --paper-input-container-focus-color: #2196F3;
}
- ::content #card_preview .modify{
- display: none;
+ paper-button {
+ position: absolute;
+ bottom: 16px;
+ right: 11px;
+
+ height: 48px;
+ width: 172px;
+ background-color: #00BCD4;
+ color: white;
+ font-weight: 700;
+ padding: 16px;
}
- ::content #card_preview .delete{
- display: none;
+ paper-button:hover {
+ background-color: #00AABF;
+
+ box-shadow: 0px 8px 12px #888;
+ -webkit-box-shadow: 0px 8px 12px #888;
+ -moz-box-shadow: 0px 8px 12px #888;
}
- ::content #card_preview .fullscreen{
- display: none;
+ paper-button[disabled] {
+ background-color: #B6B6B6;
}
+ </style>
+ <div id="create_card_container">
- </style>
+ <paper-material id="create_card_info" elevation="5">
+ <div class="input_header">BASE INFO</div>
- <div class="horizontal layout">
-
- <div class="vertical layout" style="width: 60%;">
-
- <div class="horizontal layout">
- <div class="avatar"></div>
- <div class="title">
- <div class="big">Title</div>
- <div class="small">This is the title for your new card. It'll be visualized in the bottom black section.</div>
- </div>
- </div>
-
- <paper-material animated elevation="2">
- <paper-textarea class="custom_textarea" id="cardTitle"
- label=""
- char-counter
- maxlength="25"
- rows="1"
- value="{{cardTitle}}">
-
- </paper-textarea>
- </paper-material>
-
- <template is="dom-if" if="{{checkType(type, 'link')}}">
-
- <div class="horizontal layout">
- <div class="avatar"></div>
- <div class="title">
- <div class="big">Link</div>
- <div class="small">This is the link you want to share.</div>
- </div>
- </div>
-
- <paper-material animated elevation="2">
- <paper-textarea class="custom_textarea" id="link"
- label=""
- auto-validate
- pattern="^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?"
- error-message="Urls only!"
- value="{{link}}">
-
- </paper-textarea>
- </paper-material>
+ <paper-input value="{{title}}" maxlength="32" label="title"></paper-input>
- </template>
+ <paper-input value="{{description}}" maxlength="100" label="description"></paper-input>
+
+ <template is="dom-if" if="{{_checkType(type, 'link')}}">
+ <div class="input_header" style="margin-top: 16px;">LINK</div>
- <template is="dom-if" if="{{checkType(type, 'text')}}">
+ <paper-input
+ id="create_card_link"
+ value="{{link}}"
+ label="link"
+ auto-validate
+ pattern="^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$"
+ error-message="Invalid link">
+ </paper-input>
+
+ </template>
- <div class="horizontal layout">
- <div class="avatar"></div>
- <div class="title">
- <div class="big">Text content</div>
- <div class="small">It's the text content of your card. It'll be visualize in the body(yellow top section).</div>
- </div>
- </div>
+ <template is="dom-if" if="{{_checkType(type, 'text')}}">
- <paper-material animated elevation="2">
- <paper-textarea class="custom_textarea" id="text"
- label=""
- char-counter
- max-rows="50"
- maxlength="1024"
- value="{{text}}">
+ <div class="input_header" style="margin-top: 16px;">TEXT</div>
- </paper-textarea>
- </paper-material>
+ <paper-textarea value="{{text}}" label="text"></paper-textarea>
</template>
- <div class="horizontal layout">
- <div class="avatar"></div>
- <div class="title">
- <div class="big">Comment</div>
- <div class="small">This is a comment you'll see on the bottom of the card.</div>
- </div>
- </div>
+ <paper-button id="add_button" raised on-click="_addCard">SAVE</paper-button>
+ </paper-material>
- <paper-material animated elevation="2">
- <paper-textarea class="custom_textarea" id="comment"
- label=""
- char-counter
- maxlength="100"
- value="{{comment}}">
+ <paper-material id="create_card_content" elevation="5">
+ <div class="input_header">PREVIEW</div>
- </paper-textarea>
- </paper-material>
+ <template is="dom-if" if="{{_checkType(type, 'link')}}">
- </div>
+ <iframe id="create_card_iframe"></iframe>
- <div class="vertical layout" style="width: 40%;">
+ </template>
+
+ <template is="dom-if" if="{{_checkType(type, 'text')}}">
- <paper-fab mini icon="add-circle" on-click="_handleAddClick"></paper-fab>
+ <p id ="create_card_title">{{title}}</p>
+ <p id ="create_card_description">{{description}}</p>
+ <p id ="create_card_text">{{text}}</p>
- <div id="card_preview"></div>
- </div>
+ </template>
+ </paper-material>
</div>
</template>
- <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
-
<script>
Polymer({
is: "create-card-controllet",
properties: {
type:{
type: String,
- value: "text"
+ value: undefined//text or link
},
- cardTitle:{
+ title:{//cardTitle
type: String,
- value: "Title",
- observer : '_valueChanged'
+ value: ""
},
- text:{
- type: String,
- value: "Text content",
- observer : '_valueChanged'
- },
- content:{
+
+ description:{//comment
type: String,
- value: undefined,
- observer : '_valueChanged'
+ value: ""
},
- comment:{
+
+ text:{
type: String,
- value: "comment",
- observer : '_valueChanged'
+ value: ""
},
- timer :{
- type: Number,
- value : 0
+ link:{
+ type: String,
+ value: "",
+ observer : '_load'
}
+
},
- ready: function(){
+ ready : function() {
+ $(this.$.create_card_info).perfectScrollbar();
+ $(this.$.create_card_content).perfectScrollbar();
- this._valueChanged('','');
+ var that = this;
+ window.addEventListener("resize", function() { that._resize(); });
},
-
- checkType: function(type, check){
- return (type == check);
+ attached : function() {
+ this.async(function(){this._load();},100);
},
- _handleAddClick: function(e){
- this.fire('create-card-controllet_add-clicked', {data : this});
+ _load : function() {
+ var link = this.$$("#create_card_link");
+ var iframe = this.$$("#create_card_iframe");
+
+ if(link){
+ var value = link.value;
+
+ if (value.indexOf("http") != 0)
+ value = "http://" + value;
+
+ if(!link.invalid && value.length > 16) {
+ iframe.setAttribute("src", value);
+ this._resize();
+ }
+ }
},
- _valueChanged: function(oldvalue, newValue) {
- var card = '<paper-card-controllet' +
- ' class="grid-item"' +
- ' width="300"' +
- ' height="300"' +
- ' card-type="'+ this.type + '"' +
- ' comment="'+ this.comment + '"' +
- ' card-title="'+ this.cardTitle + '">';
- if(this.type == 'link'){
- card += '<preview-datalet data-url="'+ this.link + '" url="'+ this.link + '"></preview-datalet>';
- }else{
- card += this.text;
- }
-
- card += '</paper-card-controllet>';
-
- clearTimeout (this.timer);
- //Firefox stuff
- var _this = this;
- this.timer = setTimeout(function(){
- _this.$.card_preview.innerHTML = card;
- }, 1000);
+ _checkType: function(type, check){
+ return (type == check);
+ },
+ _addCard: function(){
+ this.fire('create-card-controllet_add-clicked', {data : this});//create-card-controllet_data
+ },
+ _resize : function(){
+ var h = $("#create_card_info").height() -64;
+ $("#create_card_iframe").height(h);
}
+
})
</script>
diff --git a/controllets/create-card-controllet/create-card-controllet_old.html b/controllets/create-card-controllet/create-card-controllet_old.html
new file mode 100755
index 0000000..1c7601b
--- /dev/null
+++ b/controllets/create-card-controllet/create-card-controllet_old.html
@@ -0,0 +1,307 @@
+<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-input/paper-textarea.html"/>
+
+<link rel="import" href="../../datalets/preview-datalet/preview-datalet.html" />
+<link rel="import" href="../../controllets/paper-card-controllet/paper-card-controllet.html"/>
+
+<dom-module id="create-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>
+ :host {
+ display: inline-block;
+ margin: 0 8px 8px ;
+ font-size: 14px;
+ text-align: justify;
+ line-height: 10px;
+ --paper-fab-background: var(--accent-color);
+ font-family: 'Roboto', sans-serif;
+ padding-bottom: 30px;
+ width: 100%;
+ }
+
+ paper-material {
+ background-color: white;
+ border-width: 1em;
+ padding: 5px;
+ margin-bottom: 20px;
+ }
+
+ paper-fab {
+ position: relative;
+ left: 90%;
+ --paper-fab-background:#2196F3;
+ }
+
+ #content ::content {
+ /*padding: 0 16px 8px;*/
+ padding: 0 16px 8px;
+ font-weight: 300;
+ color: var(--secondary-text-color);
+ line-height: 24px;
+ max-height: 400px;
+ position:relative;
+ overflow: auto;
+ }
+ ::content.buttons {
+ margin-top: 8px;
+ }
+ ::content paper-button, ::content paper-icon-button {
+ font-weight: 500;
+ color: var(--accent-color);
+ }
+
+ .avatar
+ {
+ display: inline-block;
+ height: 0.7em;
+ width: 0.7em;
+ border-radius: 50%;
+ background: var(--paper-blue-500);
+ color: white;
+ line-height: 2em;
+ font-size: 1.87em;
+ text-align: center;
+ }
+
+ .title
+ {
+ position: relative;
+ left: 0px;
+ /*top: 0.60vh;
+ margin-left: 20px;*/
+ }
+
+ .big
+ {
+ font-size: 1.37em;
+ color: var(--google-grey-500);
+ }
+
+ .medium
+ {
+ font-size: 1em;
+ padding-bottom: 0.5em;
+ color : #000000;
+ font-weight: bold;
+ }
+
+ .small
+ {
+ font-size: 0.8em;
+ padding-top: 10px;
+ color: var(--paper-blue-500);
+ font-weight: bold;
+ }
+
+ paper-textarea.custom_textarea{
+ /*max-width:40vw;*/
+ }
+
+ div.vertical{
+ margin: 20px;
+ }
+
+ ::content #card_preview .modify{
+ display: none;
+ }
+
+ ::content #card_preview .delete{
+ display: none;
+ }
+
+ ::content #card_preview .fullscreen{
+ display: none;
+ }
+
+
+ </style>
+
+ <div class="horizontal layout">
+
+ <div class="vertical layout" style="width: 60%;">
+
+ <div class="horizontal layout">
+ <div class="avatar"></div>
+ <div class="title">
+ <div class="big">Title</div>
+ <div class="small">This is the title for your new card. It'll be visualized in the bottom black section.</div>
+ </div>
+ </div>
+
+ <paper-material animated elevation="2">
+ <paper-textarea class="custom_textarea" id="cardTitle"
+ label=""
+ char-counter
+ maxlength="25"
+ rows="1"
+ value="{{cardTitle}}">
+
+ </paper-textarea>
+ </paper-material>
+
+ <template is="dom-if" if="{{checkType(type, 'link')}}">
+
+ <div class="horizontal layout">
+ <div class="avatar"></div>
+ <div class="title">
+ <div class="big">Link</div>
+ <div class="small">This is the link you want to share.</div>
+ </div>
+ </div>
+
+ <paper-material animated elevation="2">
+ <paper-textarea class="custom_textarea" id="link"
+ label=""
+ auto-validate
+ pattern="^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?"
+ error-message="Urls only!"
+ value="{{link}}">
+
+ </paper-textarea>
+ </paper-material>
+
+ </template>
+
+
+ <template is="dom-if" if="{{checkType(type, 'text')}}">
+
+ <div class="horizontal layout">
+ <div class="avatar"></div>
+ <div class="title">
+ <div class="big">Text content</div>
+ <div class="small">It's the text content of your card. It'll be visualize in the body(yellow top section).</div>
+ </div>
+ </div>
+
+ <paper-material animated elevation="2">
+ <paper-textarea class="custom_textarea" id="text"
+ label=""
+ char-counter
+ max-rows="50"
+ maxlength="1024"
+ value="{{text}}">
+
+ </paper-textarea>
+ </paper-material>
+
+ </template>
+
+ <div class="horizontal layout">
+ <div class="avatar"></div>
+ <div class="title">
+ <div class="big">Comment</div>
+ <div class="small">This is a comment you'll see on the bottom of the card.</div>
+ </div>
+ </div>
+
+ <paper-material animated elevation="2">
+ <paper-textarea class="custom_textarea" id="comment"
+ label=""
+ char-counter
+ maxlength="100"
+ value="{{comment}}">
+
+ </paper-textarea>
+ </paper-material>
+
+ </div>
+
+ <div class="vertical layout" style="width: 40%;">
+
+ <paper-fab mini icon="add-circle" on-click="_handleAddClick"></paper-fab>
+
+ <div id="card_preview"></div>
+ </div>
+
+
+ </div>
+
+ </template>
+
+ <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script>
+
+ <script>
+ Polymer({
+ is: "create-card-controllet",
+ properties: {
+ type:{
+ type: String,
+ value: "text"
+ },
+
+ cardTitle:{
+ type: String,
+ value: "Title",
+ observer : '_valueChanged'
+ },
+ text:{
+ type: String,
+ value: "Text content",
+ observer : '_valueChanged'
+ },
+ content:{
+ type: String,
+ value: undefined,
+ observer : '_valueChanged'
+ },
+ comment:{
+ type: String,
+ value: "comment",
+ observer : '_valueChanged'
+ },
+
+ timer :{
+ type: Number,
+ value : 0
+ }
+ },
+
+ ready: function(){
+
+ this._valueChanged('','');
+ },
+
+
+ checkType: function(type, check){
+ return (type == check);
+ },
+
+ _handleAddClick: function(e){
+ this.fire('create-card-controllet_add-clicked', {data : this});
+ },
+
+ _valueChanged: function(oldvalue, newValue) {
+ var card = '<paper-card-controllet' +
+ ' class="grid-item"' +
+ ' width="300"' +
+ ' height="300"' +
+ ' card-type="'+ this.type + '"' +
+ ' comment="'+ this.comment + '"' +
+ ' card-title="'+ this.cardTitle + '">';
+ if(this.type == 'link'){
+ card += '<preview-datalet data-url="'+ this.link + '" url="'+ this.link + '"></preview-datalet>';
+ }else{
+ card += this.text;
+ }
+
+ card += '</paper-card-controllet>';
+
+ clearTimeout (this.timer);
+ //Firefox stuff
+ var _this = this;
+ this.timer = setTimeout(function(){
+ _this.$.card_preview.innerHTML = card;
+ }, 1000);
+
+
+ }
+ })
+ </script>
+
+</dom-module>
\ No newline at end of file
diff --git a/controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html b/controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
index a3408c8..1dd53f2 100755
--- a/controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
+++ b/controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
@@ -38,7 +38,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<div id="fixed" class="fixed" style$="background-color:{{color}}"></div>
<div id="card" class="card" style$="background-color:{{color}}">
<template is="dom-if" if="{{_checkUndefined(publicRoom)}}">
- <iframe id="public_room_iframe" src="/public-room/{{publicRoom}}" width="100%" height="100%"></iframe>
+ <iframe id="public_room_iframe" src="public-room/{{publicRoom}}" width="100%" height="100%"></iframe>
</template>
</div>
diff --git a/datalets/base-datalet/base-datalet.html b/datalets/base-datalet/base-datalet.html
index fa7454f..c6ff64c 100755
--- a/datalets/base-datalet/base-datalet.html
+++ b/datalets/base-datalet/base-datalet.html
@@ -96,6 +96,7 @@ Example :
}
#span_description{
+ font-style: italic;
color: #727272;
}
</style>
--
libgit2 0.21.4