I am using Scrollable paper-tabs - Polymer. I have placed a NEXT button above the tabs and I want to change the position of the selected bar(bar which is displayed on bottom of the selected tab ) on next button's click. I am new to Ploymer. Any help will be appreciated.
https://www.polymer-project.org/0.5/components/paper-tabs/demo.html
in order to change the position of the selected bar you can change the paper-tabs's index selection. It's better to use tabs.selectIndex(); function than selectNext(); in order to make the change cyclic : meaning once you've reached the end, it will select the first element and so on, if you provide the right index.
Here's the javascript function to do that :
function clickAction(e) {
var t = e.target;
if (t.localName === 'paper-icon-button') {
if (!t.hasAttribute('disabled')) {
var tabs = document.querySelector('paper-tabs');
var index = tabs.selectedIndex;
index = index+1 == tabs.children.length ? 0 : index + 1;
tabs.selectIndex(index);
}
}
}
If you need a working sample, here's the one I've been working one (it's from Polymer's official documentation with a bit more) :
<!doctype html>
<html>
<head>
<title>paper-tabs</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="core-icons/core-icons.html">
<link rel="import" href="font-roboto/roboto.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="core-toolbar/core-toolbar.html">
<link rel="import" href="core-media-query/core-media-query.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<style shim-shadowdom>
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0;
padding: 24px;
color: #333;
}
body.core-narrow {
padding: 8px;
}
paper-tabs, core-toolbar {
background-color: #00bcd4;
color: #fff;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}
core-toolbar paper-tabs {
box-shadow: none;
}
paper-tabs[noink][nobar] paper-tab.core-selected {
color: #ffff8d;
}
paper-tabs.transparent-teal {
background-color: transparent;
color: #00bcd4;
box-shadow: none;
}
paper-tabs.transparent-teal::shadow #selectionBar {
background-color: #00bcd4;
}
paper-tabs.transparent-teal paper-tab::shadow #ink {
color: #00bcd4;
}
h3 {
font-size: 16px;
font-weight: 400;
}
</style>
</head>
<body>
<div>
<paper-icon-button icon="arrow-forward" title="arrow-forward" onclick="clickAction(event)"></paper-icon-button>
</div>
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
<script>
function clickAction(e) {
var t = e.target;
if (t.localName === 'paper-icon-button') {
if (!t.hasAttribute('disabled')) {
var tabs = document.querySelector('paper-tabs');
var index = tabs.selectedIndex;
index = index+1 == tabs.children.length ? 0 : index + 1;
tabs.selectIndex(index);
}
}
}
</script>
</body>
</html>
Related
I was trying to deploy my react app with firebase deploy. I accidentally clicked yes to the prompt: File build/index.html already exists. Overwrite? (y/N).
Now my index html is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
<!-- update the version number as needed -->
<script defer src="/__/firebase/8.2.3/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/8.2.3/firebase-auth.js"></script>
<script defer src="/__/firebase/8.2.3/firebase-database.js"></script>
<script defer src="/__/firebase/8.2.3/firebase-messaging.js"></script>
<script defer src="/__/firebase/8.2.3/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
#media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id="message">
<h2>Welcome</h2>
<h1>Firebase Hosting Setup Complete</h1>
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
<a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
</div>
<p id="load">Firebase SDK Loadingβ¦</p>
<script>
document.addEventListener('DOMContentLoaded', function() {
// // π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯
// // The Firebase SDK is initialized and available here!
//
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
//
// // π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯π₯
try {
let app = firebase.app();
let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;
} catch (e) {
console.error(e);
document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';
}
});
</script>
</body>
</html>
When I go to the url where my app is deployed, it shows this firebase welcome html. I realize I wasn't supposed to overwrite my html but how can I get my html back?
From the "Hosting" part of the Firebase console you can rollback previously deployed versions.
Under the "Dashboard" tab, there is a section named "--your_project_id-- release history" which shows the list of deployed versions. At the end of each line there is a three dots button. Click on it and choose the "Rollback" option.
I'm trying to find a way to grab comments from my Facebook Live video and have them available as a source in OBS so I can display or broadcast them. I found this example that works to some extent:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Facebook Live Comments</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
* {
box-sizing: border-box;
}
html,
body,
#comments {
height: 100%;
width: 100%;
}
html {
background: rgba(0, 0, 0, 0);
font-family: 'Roboto', sans-serif;
letter-spacing: 0.5px;
}
body {
margin: 0;
overflow: hidden;
}
#comments {
display: flex;
flex-direction: column;
padding: 8px 16px 8px 8px;
width: 100%;
overflow-y: scroll;
box-sizing: content-box;
}
.comment {
display: flex;
flex-direction: row;
}
.comment:first-child {
margin-top: auto;
}
.comment:not(:last-child) {
margin-bottom: 4px;
}
/**
* Prevent clipped comment
* margin-bottom: #comments padding-bottom + .comment margin-bottom
*/
.comment:last-child {
margin-bottom: 12px;
}
.comment__name {
flex: 0 1;
white-space: nowrap;
color: #2196F3;
}
.comment__name::after {
content: ": ";
white-space: pre;
}
.comment__message {
flex: 1 0;
color: #fff;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
</style>
</head>
<body>
<div id="comments"></div>
</body>
<script>
const videoId = ""; // ID of your live video
const accessToken = ""; // Get one on the developer page
const source = new EventSource(`https://streaming-graph.facebook.com/${videoId}/live_comments?access_token=${accessToken}&comment_rate=one_per_two_seconds&fields=from{name},message`);
const comments = document.getElementById("comments");
function appendComment(comment) {
const newComment = document.createElement("div");
newComment.classList.add("comment");
const commentName = document.createElement("div");
commentName.classList.add("comment__name")
commentName.textContent = comment.from.name;
const commentMessage = document.createElement("div");
commentMessage.classList.add("comment__message");
commentMessage.textContent = comment.message;
newComment.appendChild(commentName);
newComment.appendChild(commentMessage);
comments.appendChild(newComment);
comments.scrollTop = comments.scrollHeight;
}
// Get last 10 comments
fetch(`https://graph.facebook.com/v3.2/${videoId}/comments?access_token=${accessToken}&summary=true&limit=10`)
.then(res => res.json())
.then(res => {
res.data.forEach(comment => appendComment(comment));
});
// Listen for new comments
source.onmessage = function(event) {
const data = JSON.parse(event.data);
appendComment(data);
};
</script>
</html>
So, if I add in my video ID and access token and open the html file in a browser or OBS, it will show any comments already posted, but it won't update to show new ones unless I manually refresh the page. It seems like this code should be able to retrieve new comments, but I can't tell why it doesn't or if there are any errors in it.
What can I do to get this working? Or, is there another better way altogether?
I am using the Shady DOM in Polymer 2.0 by using the following script
<script>window.ShadyDOM = {force:true};</script>
I have created three custom element logon-email, logon-password and logon-button. When the paper-button is clicked I would like to get the values of the paper-inputs of logon-email and login-password. Using Polymer 1.0 I have used document.getElementById('#emailLogon').value to get the value from another custom element but this returns null in Polymer 2.0 using Shady DOM.
If what I am doing is now not possible what is the alternative to retrieving values from external custom elements from another custom element.
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<dom-module id="logon-email">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
paper-input {
--paper-input-container-input-color: white;
--paper-input-container-label: { color: white; font-size: 12px};
}
.email_label {
font-family: 'Roboto', 'Noto', sans-serif;
font-size: 12px;
color: white;
}
</style>
<div class="email_label">Email</div>
<paper-input label="Please enter your email address" no-label-float></paper-input>
</template>
<script>
class LogonEmail extends Polymer.Element {
static get is() { return 'logon-email'; }
}
window.customElements.define(LogonEmail.is, LogonEmail);
</script>
</dom-module>
<dom-module id="logon-password">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
paper-input {
--paper-input-container-input-color: white;
--paper-input-container-label: { color: white; font-size: 12px; };
}
.password_label {
font-family: 'Roboto', 'Noto', sans-serif;
font-size: 12px;
color: white;
}
</style>
<div class="password_label">Password</div>
<paper-input id="logonPassword" label="Please enter your password" type="password" no-label-float></paper-input>
</template>
<script>
class LogonPassword extends Polymer.Element {
static get is() { return 'logon-password'; }
}
window.customElements.define(LogonPassword.is, LogonPassword);
</script>
</dom-module>
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-styles/color.html">
<dom-module id="logon-button">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
paper-button {
font-family: 'Roboto', 'Noto', sans-serif;
font-weight: normal;
font-size: 14px;
-webkit-font-smoothing: antialiased;
}
paper-button.green {
background-color: var(--paper-green-500);
color: white;
margin: auto;
width: 100%;
}
</style>
<paper-button on-click="handleLoginClick" raised class="green">Login</paper-button
</template>
<script>
class LogonButton extends Polymer.Element {
static get is() { return 'logon-button'; }
connectedCallback() {
super.connectedCallback();
}
handleLoginClick(){
console.log('Login button clicked');
var loginEmail = document.getElementById('#logonEmail');
console.log('logonEmail ' + loginEmail);
}
}
window.customElements.define(LogonButton.is, LogonButton);
</script>
</dom-module>
This is the most easy approach at polymer to pass value between elements. So just define the property and set it notify:true to reflect at other elements as fallow :
<paper-input label="Please enter your email address" no-label-float value="{{emailVal}}"></paper-input>
At main document pass emailVal property to your custom elements so you have property in all 3 element like this.emailVal
<logon-email email-val="{{emailVal}}"></logon-email>
<logon-password email-val="{{emailVal}}"></logon-password>
<logon-button email-val="{{emailVal}}"></logon-button>
And define this property in logon-email element and set it notify : true to reflect all property in any changes.
at logon-email
static get properties() { return {
emailVal:{
type:String,
notify:true
},...
and at logon-button element:
handleLoginClick(){
console.log('Login button clicked');
console.log('logonEmail ', this.emailVal);
}
Hope clear .
Here is my layout. Without iron-list it works, but with it it gives me the error
Uncaught TypeError: this.$.selector.clearSelection is not a function
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../common-settings-service/common-settings-service.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html"/>
<link rel="import" href="../bower_components/paper-material/paper-material.html"/>
<link rel="import" href="../bower_components/iron-list/iron-list.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<dom-module id="common-settings">
<style>
:host {
display: block;
}
paper-material {
background: #FFFFFF;
}
.container {
#apply(--layout-horizontal);
}
.windowItem {
#apply(--layout-horizontal);
}
.list {
#apply(--layout-flex);
#apply(--layout-vertical);
}
.item {
#apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
</style>
<template>
<common-settings-service
id="commonSettings"
url="/board_service/common_settings/"
settings="{{settings}}"/>
<paper-material elevation="1">
<div class="container">
<h3> ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ</h3>
<h4>ΠΠΊΠ½Π°</h4>
<div class="list">
<iron-list items="[[settings.timeWindows]]" as="item">
<template>
<div class="item">
Name: <span>[[item]]</span>
</div>
</template>
</iron-list>
</div>
While I don't know how to show you live demo I've been able to debug a little iron-list code. The problem is with the last line.
clearSelection: function() {
function unselect(item) {
var model = this._getModelFromItem(item);
if (model) {
model[this.selectedAs] = false;
}
}
if (Array.isArray(this.selectedItems)) {
this.selectedItems.forEach(unselect, this);
} else if (this.selectedItem) {
unselect.call(this, this.selectedItem);
}
this.$.selector.clearSelection();
},
Debugging shows that there is really no such function in selector. And this selector is actually array-selector element from polymer library. And it have such function in the source code.
Ok, so I've found the reason for this. They've changed API beetween 1.0.9 and 1.1.1. My polymer was version 1.0.9 and that's why it haven't worked.
I've updated all polymer elements to the latest version and now it works.
I'm wanting to use core-scroll-header-panel with core-list so that as I scroll the list the header condenses and disappears. Particularly for mobile that will maximise the space for the list. I took the demo and tried to adapt it for a core-list but failed to get it to scroll the header off the page. My attempts are at http://jsbin.com/sivuvu
Any help appreciated.
Here's one possible solution:
<!doctype html>
<html>
<head>
<script src="https://www.polymer-project.org/0.5/webcomponents.min.js"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-list/core-list.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-header-panel/core-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-icon-button/core-icon-button.html">
<style shim-shadowdom>
body {
font-family: sans-serif;
color: #333;
}
/* background for toolbar when it is at its full size */
core-scroll-header-panel::shadow #headerBg {
background-image: url(https://www.polymer-project.org/0.5/components/core-scroll-header-panel/demos/images/bg9.jpg);
}
/* background for toolbar when it is condensed */
core-scroll-header-panel::shadow #condensedHeaderBg {
background-color: #f4b400;
}
core-toolbar {
color: #f1f1f1;
fill: #f1f1f1;
background-color: transparent;
}
.title {
-webkit-transform-origin: 0;
transform-origin: 0;
font-size: 40px;
}
.content {
padding: 8px;
background-color: #eee;
}
core-list {
border: solid 1px red;
margin: 10px;
overflow: hidden;
}
div.foo, core-list {
border: solid 1px blue;
margin: 10px;
}
div.row {
height: 80px;
border: solid 1px green;
margin: 3px;
text-align: center;
}
</style>
</head>
<body unresolved fullbleed>
<template is="auto-binding" id="page-template">
<core-scroll-header-panel condenses fit>
<core-toolbar class="tall">
<core-icon-button icon="arrow-back"></core-icon-button>
<div flex></div>
<core-icon-button icon="search"></core-icon-button>
<core-icon-button icon="more-vert"></core-icon-button>
<div class="bottom indent title">Title</div>
</core-toolbar>
<div class="content" flex>
<core-list data="{{data}}" flex>
<template>
<div class="row">
List row: {{index}}, User data from model: {{model.name}}
</div>
</template>
</core-list>
</div>
</core-scroll-header-panel>
</template>
<script>
var t = document.querySelector('#page-template');
t.data = [];
for (i = 0; i < 30; i++) {
t.data.push({name: 'Bob'});
}
t.addEventListener('template-bound', function() {
// custom transformation: scale header's title
var titleStyle = document.querySelector('.title').style;
addEventListener('core-header-transform', function(e) {
var d = e.detail;
var m = d.height - d.condensedHeight;
var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
titleStyle.transform = titleStyle.webkitTransform =
'scale(' + scale + ') translateZ(0)';
});
});
</script>
</body>
</html>
A few changes that I made to your code: instead of wrapping the <core-list> in a custom Polymer element definition, I just include it as part of the main page, but the page itself is wrapped in <template is="auto-binding">, giving you access to all the same template syntactic sugar you'd get from a custom element. The main other thing was to set overflow: hidden on the <core-list>, and rely on the scrollbar from the <core-scroll-header-panel> to scroll the list's content.