Anyone know how to get the sliders in this codepen example to manipulate the chart data for it's category? Currently only the Citizenship category is affected.
var valueBubble = '<output class="rangeslider__value-bubble" />';
function updateValueBubble(pos, value, context) {
pos = pos || context.position;
value = value || context.value;
var $valueBubble = $('.rangeslider__value-bubble', context.$range);
var tempPosition = pos + context.grabPos;
var position = (tempPosition <= context.handleDimension) ? context.handleDimension : (tempPosition >= context.maxHandlePos) ? context.maxHandlePos : tempPosition;
if ($valueBubble.length) {
$valueBubble[0].style.left = Math.ceil(position) + 'px';
$valueBubble[0].innerHTML = value;
}
}
$('input[type="range"]').rangeslider({
polyfill: false,
onInit: function() {
this.$range.append($(valueBubble));
updateValueBubble(null, null, this);
},
onSlide: function(pos, value) {
updateValueBubble(pos, value, this);
updateChart(0, value);
}
});
function updateChart(location, value) {
myChart.data.datasets[0].data[location] = value;
myChart.update();
}
var ctx = document.getElementById("polarChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: [
"Citizenship",
"People",
"Growth",
"Management",
"Relationships",
"Health",
"Wealth",
"Joy"
],
datasets: [{
backgroundColor: [
"#00A3CE",
"#22CBED",
"#EB67A2",
"#FDA9ED",
"#EC5B22",
"#F78F21",
"#148F1E",
"#1EC428"
],
data: [4, 6, 6, 2, 4, 2, 2, 7],
}],
},
options: {
elements: {
arc: {
borderColor: "rgba(255,255,255,1)",
borderWidth: 2
}
},
scale: {
ticks: {
beginAtZero: true,
max: 8,
min: 0,
stepSize: 1,
fontFamily: "'Lato', sans-serif",
fontSize: 18,
fontColor: "#000",
display: false
},
gridLines: {
lineWidth: 1,
color: "#999"
},
},
layout: {
padding: {
left: 100,
right: 200,
top: 10,
bottom: 10
}
},
legend: {
display: true,
position: "right",
labels: {
fontFamily: "'Lato', sans-serif",
fontSize: 18,
fontColor: "#000"
}
}
}
});
#import "compass/css3";
body {
padding: 50px 0;
}
.sliderHolder {
width: 20%;
//height:400px;
float: left;
//border:1px solid;
//display:none;
}
.wheelCat {
width: 100px;
float: left;
//border:1px solid;
padding-top: 55px;
text-align: right;
padding-right: 10px;
font-family: "Lato", san-serif;
font-size: 13px;
}
.sliderAll {
height: 100px;
width: 50%;
padding-top: 55px;
//border:1px solid;
float: left;
}
.sliderCitizenship .rangeslider__fill {
background-color: #00A3CE;
}
.sliderPeople .rangeslider__fill {
background-color: #22CBED;
}
.sliderGrowth .rangeslider__fill {
background-color: #EB67A2;
}
.sliderManagement .rangeslider__fill {
background-color: #FDA9ED;
}
.sliderRelationships .rangeslider__fill {
background-color: #EC5B22;
}
.sliderHealth .rangeslider__fill {
background-color: #F78F21;
}
.sliderWealth .rangeslider__fill {
background-color: #148F1E;
}
.sliderJoy .rangeslider__fill {
background-color: #1EC428;
}
.rangeslider__value-bubble {
display: none;
}
*,
*:before,
*:after {
#include box-sizing(border-box);
}
.rangeslider__value-bubble {
border: 1px solid #ccc;
display: block;
padding: 5px;
position: absolute;
bottom: 100%;
margin-bottom: 25px;
width: 100px;
margin-left: -50px;
text-align: center;
#include border-radius(5px);
font-family: "Lato", san-serif;
font-size: 13px;
&:before,
&:after {
border-width: 11px;
border-style: solid;
border-color: transparent;
content: "";
display: block;
margin: auto;
width: 10px;
position: absolute;
left: 0;
right: 0;
}
&:before {
border-top-color: #ccc;
border-bottom-width: 0;
bottom: -11px;
}
&:after {
border-top-color: #fff;
border-bottom-width: 0;
bottom: -10px;
}
}
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
</head>
<main class="container">
<div class="sliderHolder">
<div class="wheelCat">Citizenship</div>
<div class="sliderAll">
<div class="sliderCitizenship">
<input type=range value=1 min=0 max=8 step=1 id="Citizenship">
</div>
</div>
<br>
<div class="wheelCat">People</div>
<div class="sliderAll">
<div class="sliderPeople">
<input type=range value=1 min=0 max=8 step=1 id="People">
</div>
</div>
<br>
<div class="wheelCat">Growth</div>
<div class="sliderAll">
<div class="sliderGrowth">
<input type=range value=1 min=0 max=8 step=1 id="Growth">
</div>
</div>
<br>
<div class="wheelCat">Management</div>
<div class="sliderAll">
<div class="sliderManagement">
<input type=range value=1 min=0 max=8 step=1 id="Management">
</div>
</div>
<br>
<div class="wheelCat">Relationships</div>
<div class="sliderAll">
<div class="sliderCitizenship">
<input type=range value=1 min=0 max=8 step=1 id="Citizenship">
</div>
</div>
<br>
<div class="wheelCat">Health</div>
<div class="sliderAll">
<div class="sliderHealth">
<input type=range value=1 min=0 max=8 step=1 id="Health">
</div>
</div>
<br>
<div class="wheelCat">Wealth</div>
<div class="sliderAll">
<div class="sliderWealth">
<input type=range value=1 min=0 max=8 step=1 id="Wealth">
</div>
</div>
<br>
<div class="wheelCat">Joy</div>
<div class="sliderAll">
<div class="sliderJoy">
<input type=range value=1 min=0 max=8 step=1 id="Joy">
</div>
</div>
<br>
</div>
<div style="float:left;width:80%;">
<canvas id="polarChart"></canvas>
</div>
</main>
</html>
This is where the problem sits:
updateChart(0, value);
this is responsible for updating data in data array position 0. When you change it to updateChart(1, value); it will update People category data. Change your code so the parameter is set dynamically based on the clicked slider.
--== UPDATE BELOW ==--
Looking up the code I found identifier for rangeSlider. Which suits perfectly for your case.
I do not know if this is correct way of passing this information, but it seems to be working.
Use updateChart(this.identifier.slice(-1), value);
Quick explanation - each object has got identifier such as
identifier : "js-rangeslider-0"
so I am taking current object (this), going inside .identifier and taking last character of this string .slice(-1).
Related
Script :
<v-date-picker v-model="date" #input="changeHours" no-title>
<div class="flex-grow-1"></div>
<v-btn text color="primary" #click="modal = false">Cancel</v-btn>
<v-btn text color="primary" #click="$refs.dialog.save(date)">OK</v-btn>
</v-date-picker>
Demo and full codepen : https://codepen.io/positivethinking639/pen/RwwQpxm
I want to set height of scroll. So the scroll not past the footer or the time schedule displayed is 5 data
How can I do it?
Yes it is possible to set the height of scroll times nest to datepicker.
By default dialog box comes with the scroll that has to be disabled
first, the we can add scroll separately to date picker or time flex
box
Here in the below code, I've moved the datepicker footer buttons as a separate flex and added scroll only to the times, So that it can grow based on number fo time slots
Working codepen here: https://codepen.io/chansv/pen/vYYdKNJ
<div id="app">
<v-app>
<v-content>
<v-container>
<v-btn color="success" dark #click="openModal()">call date {{ date }}</v-btn>
<v-dialog
:return-value.sync="date"
v-model="modal"
content-class="dialog-class"
ref="dialog"
persistent
>
<v-card>
<div>
<v-container grid-list-md text-xs-cente style="padding: 0px;">
<v-layout row wrap>
<v-flex xs8 style="position: fixed;">
<v-date-picker v-model="date" #input="changeHours" no-title>
</v-date-picker>
</v-flex>
<v-flex xs4 style="position: relative; left: 300px;">
<div>
<p class="text-center mt-3 font-weight-bold">Select Time</p> </div>
<p class="text-center subtitle-2 mt-4" v-if="!allowedTimes.length">Please pick date first</p>
<p class="text-center" v-if="!allowedTimes.length"><v-icon>event</v-icon></p>
<div class="my-3" v-show="date !== null" :style="{'background-color':'white','text-align':'center', 'overflow-y': 'scroll', 'height': '220px'}">
<template v-for="(allowedTime, i) in allowedTimes">
<v-btn
:key="i"
#click="setTime(allowedTime)"
class="my-1"
:outlined="allowedTime !== time"
color="primary"
>{{ allowedTime }}</v-btn>
</template>
</div>
</v-flex>
<v-flex xs12>
<v-card>
<v-card-actions style="padding-top: 0px;">
<v-spacer></v-spacer>
<v-btn color="primary" #click="modal = false">Cancel</v-btn>
<v-btn color="primary" #click="$refs.dialog.save(date)">OK</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</v-card>
</v-dialog>
</v-container>
</v-content>
</v-app>
</div>
css
.v-dialog { box-shadow: none!important; }
.row {
margin-right: 0 !important;
}
.v-picker__body {
flex: none !important;
}
.v-card{
box-shadow: none !important;
}
.dialog-class {
overflow: hidden;
max-height: 345px !important;
max-width: 470px;
}
.v-date-picker-table {
position: relative;
padding: 0 12px;
height: 220px;
}
script
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
date: new Date().toISOString().substr(0, 10),
modal: false,
footer: false,
time: null,
allowedTimes: ['13:00 - 14:00','14:00 - 15:00','15:00 - 16:00','16:00 - 17:00','17:00 - 18:00','18:00 - 19:00','19:00 - 20:00','20:00 - 21:00','21:00 - 22:00']
// allowedTimes: []
}),
methods: {
save(k) {
console.log(this.$refs.dialog);
},
allowedDates: val => parseInt(val.split('-')[2], 10) % 2 === 0,
setTime(time) {
this.time = time
},
changeHours(_val) {
console.log(_val)
this.allowedTimes = ['08:00 - 09:00','09:00 - 10:00']
},
openModal() {
this.modal = true
var self = this;
setTimeout(() =>{
self.setFooter()
}, 0);
},
setFooter() {
if (!this.footer) {
console.log('footer')
var div = document.createElement('div');
var html = "<span><div style='float:left; margin-top:4px; margin-left: 10px; height: 12px; width: 12px; border-radius: 10px; background-color: blue;'></div></span><span style='margin-left: 5px; float: left;font-size:14px'>Available</span><span><div style='float:left;height: 12px; width: 12px; border-radius: 10px; background-color: grey; margin-left:20px; margin-top:4px;'></div></span><span style='margin-left: 8px; float:left; font-size: 14px'>Unavailable</span>";
div.innerHTML = html;
document.querySelector('.v-date-picker-table').append(div);
this.footer = true;
}
}
},
})
I'm currently trying to develop a web form that uses HTML so that users can visit this webpage and drag and drop thousands of photos. After providing an email address, these photos would be directly sent to one of our Google Drive accounts inside a subfolder of the user's email address and the time of submission.
I've played around with this code, but nowhere did I find a place for me to connect my Google Drive account.
<body>
<div id="formcontainer">
<label for="myForm">Facilities Project Database Attachment Uploader:</label>
<br><br>
<form id="myForm">
<label for="myForm">Project Details:</label>
<div>
<input type="text" name="zone" placeholder="Zone:">
</div>
<div>
<input type="text" name="building" placeholder="Building(s):">
</div>
<div>
<input type="text" name="propertyAddress" placeholder="Property Address:">
</div>
<div>
<label for="fileText">Project Description:</label>
<TEXTAREA name="projectDescription"
placeholder="Describe your attachment(s) here:"
style ="width:400px; height:200px;"
></TEXTAREA>
</div>
<br>
<label for="attachType">Choose Attachment Type:</label>
<br>
<select name="attachType">
<option value="Pictures Only">Picture(s)</option>
<option value="Proposals Only">Proposal(s)</option>
<option value="Pictures & Proposals">All</option>
</select>
<br>
<label for="myFile">Upload Attachment(s):</label>
<br>
<input type="file" name="filename" id="myFile" multiple>
<input type="button" value="Submit" onclick="iteratorFileUpload()">
</form>
</div>
<div id="output"></div>
<div id="progressbar">
<div class="progress-label"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
var numUploads = {};
numUploads.done = 0;
numUploads.total = 0;
// Upload the files into a folder in drive
// This is set to send them all to one folder (specificed in the .gs file)
function iteratorFileUpload() {
var allFiles = document.getElementById('myFile').files;
if (allFiles.length == 0) {
alert('No file selected!');
} else {
//Show Progress Bar
numUploads.total = allFiles.length;
$('#progressbar').progressbar({
value : false
});//.append("<div class='caption'>37%</div>");
$(".progress-label").html('Preparing files for upload');
// Send each file at a time
for (var i = 0; i < allFiles.length; i++) {
console.log(i);
sendFileToDrive(allFiles[i]);
}
}
}
function sendFileToDrive(file) {
var reader = new FileReader();
reader.onload = function (e) {
var content = reader.result;
console.log('Sending ' + file.name);
var currFolder = 'Something';
google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, currFolder);
}
reader.readAsDataURL(file);
}
function updateProgressbar( idUpdate ){
console.log('Received: ' + idUpdate);
numUploads.done++;
var porc = Math.ceil((numUploads.done / numUploads.total)*100);
$("#progressbar").progressbar({value: porc });
$(".progress-label").text(numUploads.done +'/'+ numUploads.total);
if( numUploads.done == numUploads.total ){
//uploadsFinished();
numUploads.done = 0;
};
}
</script>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
body {
max-width: 400px;
padding: 20px;
margin: auto;
}
input {
display: inline-block;
width: 100%;
padding: 5px 0px 5px 5px;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
select {
margin: 5px 0px 15px 0px;
}
input[type="submit"] {
width: auto !important;
display: block !important;
}
input[type="file"] {
padding: 5px 0px 15px 0px !important;
}
#progressbar{
width: 100%;
text-align: center;
overflow: hidden;
position: relative;
vertical-align: middle;
}
.progress-label {
float: left;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
width: 100%;
height: 100%;
position: absolute;
vertical-align: middle;
}
</style>
</body>
Source: Uploading Multiple Files to Google Drive with Google App Script
I have the following directive:
import Vue from 'vue'
const Dialog = Vue.extend({
template: `
<div v-if="show" class="modal">
<div class="modal-body">
<div class="modal-header"><h3>Aktion bestätigen</h3></div>
<div class="modal-content">
<div class="uk-flex">
<div class="uk-margin-small-right">
<span uk-icon="icon: question; ratio: 3"></span>
</div>
<div>
Are You sure?
</div>
</div>
<hr>
<div class="uk-flex uk-flex-right">
<button class="uk-button uk-button-danger uk-margin-small-right" #click="confirmed">Yes</button>
<button class="uk-button uk-button-default" #click="show = false">Cancel</button>
</div>
</div>
</div>
</div>
`
});
Vue.directive('confirm', {
bind(el, binding, vnode) {
let confirm_method = binding.value;
el.handleClick = (e) => {
const data = { confirmed: confirm_method , show: true};
let dialog = new Dialog({data: data}).$mount();
document.getElementsByTagName('body')[0].appendChild(dialog.$el);
}
el.addEventListener('click', el.handleClick);
},
unbind(el) {
el.removeEventListener('click', el.handleClick);
}
});
This works fine. When I click on "Cancel", the modal closes. When I click "Yes", the method defined in Vue template
<button v-confirm="delete">delete</button>
is executed.
But the modal does not appear. How to tell the modal to close after the method has been executed, and maybe show an error message, when there was an error?
You can pass methods to Dialog:
Vue.directive('confirm', {
bind(el, binding, vnode) {
let confirm_method = binding.value;
el.handleClick = (e) => {
const data = { confirmed: confirm_method , show: true};
let dialog = new Dialog({
data: data,
methods: {
confirmedInternal() {
this.show = false
this.confirmed()
}
}
}).$mount();
document.getElementsByTagName('body')[0].appendChild(dialog.$el);
}
el.addEventListener('click', el.handleClick);
},
unbind(el) {
el.removeEventListener('click', el.handleClick);
}
});
then calling confirmedInternal when yes button is click
<button class="uk-button uk-button-danger uk-margin-small-right" #click="confirmedInternal">Yes</button>
Demo: https://jsfiddle.net/guqc2src/
Vue documentation has pretty good example of modal.
The key option is $emit('close'). You can call $emit('close') on your method success.
// register modal component
Vue.component('modal', {
template: '#modal-template'
})
// start app
new Vue({
el: '#app',
data: {
showModal: false
}
})
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<!-- app -->
<div id="app">
<button id="show-modal" #click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
</modal>
</div>
While i am upgrading my polymer project to 2.0 at very first element i am getting the error
Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent
I tried the element in both hybrid style and 2.0 style.
Here is my element code
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.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-button/paper-button.html">-->
<!--<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
<!--<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="import" href="../../elements/elements.html">
<!--<script src="https://apis.google.com/js/platform.js"></script>-->
<!--<meta name="google-signin-client_id" content=" 747808193563-6knu1uvmnmqdud0hojtv538npq6pliaj.apps.googleusercontent.com">-->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<dom-module id="log-in">
<template>
<custom-style>
<style>
#card{
width: 50%;
height: 50%;
padding-top: 25%;
padding-left: 25%;
}
#media (max-width:425px) {
paper-material {
width: 80%;
/*box-shadow: 0 4px 8px 1px rgba(19, 17, 17, 0.2);*/
background-color: #ffffff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
.loginHead{
/*padding-top: 14%;*/
color: rgb(63,81,181);
font-weight: bold;
font-size: large;
align-self: flex-start;
padding-left: 4%;
}
.logoAndHead{
padding-left: 23%;
padding-top: 4%;
/*line-height: 3em;*/
}
.headText{
padding-top: 9%;
}
}
#media (min-width: 426px) {
paper-material {
width: 50%;
/*box-shadow: 0 4px 8px 1px rgba(19, 17, 17, 0.2);*/
background-color: #ffffff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
.loginHead{
color: rgb(63,81,181);
/*padding-top: 9%;*/
font-weight: bold;
font-size: large;
align-self: flex-start;
padding-left: 2%;
}
}
#media (min-width: 426px)and (max-width: 1000px){
.logoAndHead{
padding-left: 33%;
padding-top: 4%;
/*line-height: 3em;*/
}
.headText{
padding-top: 7%;
}
}
#media (min-width: 1001px) and (max-width: 2000px){
.logoAndHead{
padding-left: 37%;
padding-top: 4%;
/*line-height: 3em;*/
}
.headText{
padding-top: 5%;
}
}
#media (min-width: 2001px) {
.logoAndHead{
padding-left: 45%;
padding-top: 4%;
/*line-height: 3em;*/
}
.headText{
padding-top: 2%;
}
}
.egluImg{
/*float: left;*/
}
.egluImg>img{
height: 45px;
width: 51px;
}
paper-input{
width: 100%;
}
paper-button{
color: white;
background-color:rgb(63,81,181) ;
}
.logo{
padding-bottom: 4%;
}
a{
color: rgb(107, 106, 106);
}
.loginText{
color: rgb(63,81,181);
font-size: large;
font-weight: bolder;
align-self: flex-end;
padding-left: 2%;
}
img{
vertical-align: middle;
}
</style>
</custom-style>
<div class="loginContainer">
<paper-material elevation="1">
<div class="logo">
<div class="logoAndHead">
<span class="egluImg" style="float: left">
<img src="../../images/eglu-logo.jpg" >
</span>
<div class="layout horizontal wrap headText">
<span class="loginHead">
<img src="../../images/logo_text.svg" >
</span>
<span class="loginText">Login</span>
</div>
</div>
<!--<center>-->
<div style="padding-left: 8%;padding-right: 8%">
<paper-input label="User Name" value="{{userName}}"></paper-input>
<paper-input type="password" on-keypress="enterAccount" id="password" label="Password" value="{{password}}"></paper-input>
<!--<i class="material-icons" on-click="_showHide" id="eye">visibility_off</i>-->
<div>
<paper-button id="loginButton" raised on-click="sendRequest">Log in</paper-button>
</div>
<div style="padding-top: 2px">
Forgot Password?
<br>
</div>
</div>
<!--</center>-->
<!--<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false"></div>-->
</div>
</paper-material> <!--<google-signin client-id="747808193563-6knu1uvmnmqdud0hojtv538npq6pliaj.apps.googleusercontent.com" scopes="https://www.googleapis.com/auth/drive"></google-signin>-->
</div>
<div style="text-align: center">
<paper-toast id="errToast"></paper-toast>
</div>
<!--<google-signin-aware-->
<!--id="signin"-->
<!--on-click="_googleSignIn"-->
<!--scopes="https://www.googleapis.com/auth/drive"-->
<!--on-google-signin-aware-success="handleSignin"-->
<!--google-signin-aware-error="handleError">-->
<!--</google-signin-aware>-->
<iron-ajax
id="authenticate"
method="POST"
content-type="application/json"
url="https://staging.myeglu.com/api/v1/customers"
body="{{ajaxBody}}"
handle-as="json"
last-response="{{code}}"
on-error="_handleError"
on-response="_handleResponse">
</iron-ajax>
</template>
<script>
class LogIn extends Polymer.Element{
static get is() {
return "log-in";
}
static get properties() {
return {
userName:{
type:String,
value:'',
notify:true
},
password:{
type:String
},
code:{
type:Object,
notify:true
},
ajaxBody: {
type: String,
computed: 'processBody(userName, password)'
},
integrator:{
type:String,
notify:true,
computed:'setIntegrator(userName)'
},
gResponse:Object
}
}
constructor() {
super();
}
ready(){
super.ready();
}
handleSignin(response){
var user = gapi.auth2.getAuthInstance()['currentUser'].get();
console.log('User name: ' + user.getBasicProfile().getName());
console.log('User token: ' + response.detail.id_token);
}
handleError(){
}
sendRequest(){
// this.$.authenticate.headers={"clientid":"web"};
this.$.authenticate.generateRequest();
}
_showHide(){
var p = this.$.password;
var q=p.getAttribute('type');
if(q=='text'){
p.setAttribute('type','password');
this.$.eye.innerHTML = '<i class="material-icons">visibility_off</i>';
}
if(q=='password'){
p.setAttribute('type','text');
this.$.eye.innerHTML = '<i class="material-icons">visibility</i>';
}
}
processBody(userName, password) {
return JSON.stringify({emailId: userName, password: password,authProvider: "INTERNAL"});
}
_handleResponse(e){
console.log('status'+e.detail.xhr.status);
if(this.code.message=="Login Success"){
var expiry = new Date();
expiry.setTime(expiry.getTime()+(15*24*60*60*1000)); // one week
console.log('it is called');
this.setCookie('token',this.code.token,15);
this.setCookie('loggedIn','yes',15);
this.setCookie('email',this.userName,15);
window.location.href = "/admin/";
// window.location.href = "/";
}
else
window.alert('wrong credentials, Try again');
}
_handleError(e){
if(e.detail.request.xhr.response.message=='Wrong password') {
this.$.errToast.text = 'Wrong Password';
this.$.errToast.show();
}
if(e.detail.request.xhr.response.loginState=='ACCOUNT_NOT_FOUND') {
this.$.errToast.text = 'You are not eGlu User or check your credentials';
this.$.errToast.show();
}
}
setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
setIntegrator(userName){
return userName;
}
onSignIn() {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
window.location.href = "../../index.html";
}
onFailure(error) {
alert(error);
}
renderButton () {
gapi.signin2.render('gSignIn', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
enterAccount(event) {
if (event.keyCode == 13) {
this.$.loginButton.click();
}
}
}
customElements.define(LogIn.is, LogIn);
</script>
</dom-module>
i have been fighting with this problem for days, someone help me solve it.
Thanks in advance.
I want to display a simple form inside fancybox overlay, which also works nice on smaller screen. i've set up an example on here http://design.imago.ee/test/fancybox-form/index1.html
Initially i set the form width to be 450px, at 620px screen size im setting the form width to 100% and after i have done it, fancybox window collapses width wise and the form is not displayed properly. Interestingly that doesnt happen with regular text content (second button in the example). I know that i could just change the width manually with media queries, but it isnt really a good solution. Can anyone help? Thank you.
It's not very elegant solution but will give you an idea and porbably put you closer to your goal
Change in fancybox css
.fancybox-inner {
overflow: hidden !important;
}
Script
Calculate width of window and adjust the width of content, use setInterval so any change in width will be adjusted dynamically.
setInterval(dimension, 100);
function dimension() {
$('.content').css('width', $(window).width() * 0.6);
}
Demo
$(document).ready(function () {
$('.fancybox').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
},
title: {
type: 'inside'
}
}
});
setInterval(dimension, 100);
function dimension() {
$('.content').css('width', $(window).width() * 0.6);
}
});
.fancybox-inner {
overflow: hidden !important;
}
* {
margin: 0;
padding: 0;
}
/* =========================== Layout styles =================== */
body, html {
height: 100%;
}
body {
font: 14px/1.4'Open sans', sans-serif;
overflow: hidden;
background-color: #fff;
padding: 20px 4%;
}
.centered-wrap {
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
a.fancybox {
display: inline-block;
vertical-align: top;
background-color: #59a3d3;
color: #fff;
padding: 4px 7px;
border-radius: 2px;
text-decoration: none;
}
h1 {
font-size: 23px;
font-weight: 600;
margin-bottom: 15px;
}
p {
margin-bottom: 20px;
}
.content {
padding: 20px 30px;
}
input[type="text"] {
border: 1px solid #ccc;
height: 30px;
font: 13px/30px'Open sans', sans-serif;
box-sizing: border-box;
width: 100%;
padding: 0 7px;
}
#form {
width: 450px;
padding: 30px;
}
#form .row {
margin-bottom: 10px;
}
#form .col {
float: left;
}
#form .col1 {
width: 25%;
}
#form .col2 {
width: 75%;
}
#form label {
display: inline-block;
vertical-align: top;
padding: 6px 10px 0 0;
}
/* ======================= media queries ======================= */
#media screen and (max-width: 620px) {
#form {
width: 100%;
text-align: center;
padding: 5px;
}
#form .col {
float: none;
width: auto;
text-align: center;
margin-right: 10px
}
#form label {
}
}
/* ======================== clearfix =========================== */
/* Force Element To Self-Clear its Children */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content:" ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<div class="centered-wrap">
<p><a class="fancybox" href="#form">Fancybox with form</a></p>
<div style="display: none;">
<div id="form" class="content">
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
</div>
</div>
</div>
Fiddle Example
Note: Adjust the fiddle view screen to see how form width adjust itself with the change of screen size.