Is there any event that can be captured by a web component when the page is changed, or even a lifecycle callback?
I tried using the attached callback but it doesn't being fired again..
From the parent element of <iron-pages>, you could observe changes to <iron-pages>.selected to monitor the page index/name:
<head>
<base href="https://polygit.org/polymer+1.9.3/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<iron-pages id="pages" selected="{{selected}}">
<div>One</div>
<div>Two</div>
<div>Three</div>
</iron-pages>
<paper-button on-tap="_prev">Prev</paper-button>
<paper-button on-tap="_next">Next</paper-button>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
properties : {
selected: {
type: Number,
value: 0,
observer: '_selectedChanged'
}
},
_selectedChanged: function(newPage, oldPage) {
console.log('<iron-pages>.selected', 'new', newPage, 'old', oldPage);
},
_prev: function() {
this.$.pages.selectPrevious();
},
_next: function() {
this.$.pages.selectNext();
}
});
});
</script>
</dom-module>
</body>
codepen
Or you could setup an event listener for the <iron-pages>.iron-select and <iron-pages>.iron-deselect events in order to watch the selected and deselected elements.
<head>
<base href="https://polygit.org/polymer+1.9.3/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<iron-pages id="pages" selected="0"
on-iron-select="_pageSelected"
on-iron-deselect="_pageDeselected">
<div>One</div>
<div>Two</div>
<div>Three</div>
</iron-pages>
<paper-button on-tap="_prev">Prev</paper-button>
<paper-button on-tap="_next">Next</paper-button>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
_pageSelected: function(e) {
var page = e.detail.item;
console.log('page selected', page);
},
_pageDeselected: function(e) {
var page = e.detail.item;
console.log('page deselected', page);
},
_prev: function() {
this.$.pages.selectPrevious();
},
_next: function() {
this.$.pages.selectNext();
}
});
});
</script>
</dom-module>
</body>
codepen
Or you could configure <iron-pages>.selectedAttribute so that it sets an attribute on the newly and previously selected pages, which you could observe from within the page itself. When the page selection changes, the previously selected page's attribute is set to false, and the newly selected to true.
<head>
<base href="https://polygit.org/polymer+1.9.3/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<iron-pages id="pages" selected="0" selected-attribute="selected">
<x-page data-name="p1">One</x-page>
<x-page data-name="p2">Two</x-page>
<x-page data-name="p3">Three</x-page>
</iron-pages>
<paper-button on-tap="_prev">Prev</paper-button>
<paper-button on-tap="_next">Next</paper-button>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
_prev: function() {
this.$.pages.selectPrevious();
},
_next: function() {
this.$.pages.selectNext();
}
});
});
</script>
</dom-module>
<dom-module id="x-page">
<template>
<content id="content"></content>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-page',
properties: {
selected: {
type: Boolean,
value: false,
observer: '_selectedChanged'
}
},
_selectedChanged: function(selected) {
console.log('<x-page>.sel', this.dataset.name, selected);
}
});
});
</script>
</dom-module>
</body>
codepen
Yes there's the 'iron-select' event. You can create a listener on an element and have it listen for this event.
'iron-activate' is triggered right before the item changes, if you prefer.
Here's the link to all the iron-pages events: https://elements.polymer-project.org/elements/iron-pages#event-iron-activate
Related
I have searched a lot on this, but could not find an answer. I have the following code :
netflix-search:
<!DOCTYPE html>
<html>
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="netflix-search-criteria.html" rel="import">
<link href="netflix-search-result.html" rel="import">
<!-- Element Imports -->
</head>
<dom-module id="netflix-search">
<style>
/* CSS rules for your element */
</style>
<template>
<netflix-search-criteria></netflix-search-criteria>
<h1> here it is + {{criteria}}</h1>
<!--<netflix-search-result content="{{criteria}}"></netflix-search- result>-->
</template>
</dom-module>
<script>
Polymer({
is: "netflix-search",
properties: {
}
},
ready: function(e){
}
});
</script>
The child element is :
<!DOCTYPE html>
<html>
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="../bower_components/paper-material/paper-material.html" rel="import">
<link href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
<link href="../bower_components/paper-listbox/paper-listbox.html" rel="import">
<link href="../bower_components/paper-item/paper-item.html" rel="import">
<!-- Element Imports -->
</head>
<dom-module id="netflix-search-criteria">
<style>
/* CSS rules for your element */
</style>
<template>
<paper-material elevation="1">
<paper-dropdown-menu id="mymenu" label="What do you know about the content?" attr-for-selected="value"
selected="{{selItem}}" on-iron-select="_itemSelected">
<paper-listbox class="dropdown-content">
<paper-item>Movie Name</paper-item>
<paper-item>Actor</paper-item>
<paper-item>Director</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<template is="dom-if" if="{{show}}">
<paper-input label="Enter Search content" on-input="_search">
</paper-input>
<h1>{{criteria}}</h1>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "netflix-search-criteria",
_itemSelected : function(e) {
console.log("Coming here" + e.target.selectedItem.innerText);
this.selItem = e.target.selectedItem.innerText;
if(this.selItem == 'Movie Name' || this.selItem == 'Actor'
|| this.selItem == 'Director')
{
this.show = true;
}
},
_search : function(e) {
var cont = e.target.value;
if(cont.length > 3){
this.criteria = this.selItem + "=" + cont;
console.log("Coming here" + this.criteria);
}
},
properties: {
selItem: {
type: String,
value: ""
},
show: {
type: Boolean,
value: false
},
criteria: {
type: String,
value: "Show",
notify: true,
reflecToAttribute: true
}
},
ready: function(e){
}
});
</script>
I want to pass the value criteria from child element to parent element. But not sure how to do that
Figured it out:
here is the code
parent class
<!DOCTYPE html>
<html>
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="netflix-search-criteria.html" rel="import">
<link href="netflix-search-result.html" rel="import">
<!-- Element Imports -->
</head>
<dom-module id="netflix-search">
<style>
/* CSS rules for your element */
</style>
<template>
<netflix-search-criteria criteria={{content}}></netflix-search-criteria>
<netflix-search-result search="{{content}}"></netflix-search-result>
</template>
</dom-module>
<script>
Polymer({
is: "netflix-search",
properties: {
content: {
type: String,
value: "No",
notify: true,
reflecToAttribute: true
}
},
ready: function(e){
}
});
</script>
child class:
<!DOCTYPE html>
<html>
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="../bower_components/paper-material/paper-material.html" rel="import">
<link href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html" rel="import">
<link href="../bower_components/paper-listbox/paper-listbox.html" rel="import">
<link href="../bower_components/paper-item/paper-item.html" rel="import">
<!-- Element Imports -->
</head>
<dom-module id="netflix-search-criteria">
<style>
/* CSS rules for your element */
</style>
<template>
<paper-material elevation="1">
<paper-dropdown-menu id="mymenu" label="What do you know about the content?" attr-for-selected="value"
selected="{{selItem}}" on-iron-select="_itemSelected">
<paper-listbox class="dropdown-content">
<paper-item>Movie Name</paper-item>
<paper-item>Actor</paper-item>
<paper-item>Director</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<template is="dom-if" if="{{show}}">
<paper-input label="Enter Search content" on-input="_search">
</paper-input>
<h1>{{content}}</h1>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "netflix-search-criteria",
_itemSelected : function(e) {
console.log("Coming here" + e.target.selectedItem.innerText);
this.selItem = e.target.selectedItem.innerText;
if(this.selItem == 'Movie Name' || this.selItem == 'Actor'
|| this.selItem == 'Director')
{
this.show = true;
}
},
_search : function(e) {
var cont = e.target.value;
if(cont.length > 3){
this.criteria = this.selItem + "=" + cont;
console.log("Coming here" + this.criteria);
}
},
properties: {
selItem: {
type: String,
value: ""
},
show: {
type: Boolean,
value: false
},
criteria: {
type: String,
value: "Show",
notify: true,
reflecToAttribute: true
}
},
ready: function(e){
}
});
</script>
I have a paper-dialog in my Polymer element. I want to make the backdrop opaque, right now it is semi-transparent. I would also like to change the color.
Does anyone know how to do it. I have already tried this css in my custom element:
<style is="custom-style">
--iron-overlay-backdrop-opacity:1;
</style>
<paper-dialog modal></paper-dialog>
But it had no effect.
I also tried
<style is="custom-style">
:host {
--iron-overlay-backdrop-opacity:1;
}
</style>
<paper-dialog modal></paper-dialog>
The iron-overlay-backdrop is appended directly to the document body, outside of your custom element, and due to Polymer's CSS encapsulation, you can't style the backdrop with a <style> from within the element.
However, your element could imperatively style the backdrop with Polymer.updateStyles(...), which updates the styles for all custom elements, including the iron-overlay-backdrop outside your element:
Polymer.updateStyles({
'--iron-overlay-backdrop-background-color': 'red',
'--iron-overlay-backdrop-opacity': '1'
});
<head>
<base href="https://polygit.org/polymer+1.11.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
</head>
<body>
<div>Click button for dialog</div>
<x-demo></x-demo>
<dom-module id="x-demo">
<template>
<x-dialog id="blue" backdrop-color="blue" backdrop-opacity="1"></x-dialog>
<x-dialog id="red" backdrop-color="red" backdrop-opacity="0.2"></x-dialog>
<x-dialog id="green" backdrop-color="green" backdrop-opacity="0.5"></x-dialog>
<paper-button on-tap="_openDialog" data-dialog="blue">Blue (opacity 100%)</paper-button>
<paper-button on-tap="_openDialog" data-dialog="red">Red (opacity 20%)</paper-button>
<paper-button on-tap="_openDialog" data-dialog="green">Green (opacity 50%)</paper-button>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-demo',
_openDialog: function(e) {
var dialog = e.target.dataset.dialog;
this.$[dialog].opened = true;
}
})
});
</script>
</dom-module>
<dom-module id="x-dialog">
<template>
<paper-dialog modal with-backdrop opened="{{opened}}">
<div class="buttons">
<paper-button dialog-dismiss>Close</paper-button>
</div>
</paper-dialog>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-dialog',
properties: {
backdropColor: {
type: String,
value: 'green'
},
backdropOpacity: {
type: String,
value: '0.6'
},
opened: {
type: Boolean,
value: false
}
},
observers: ['_updateBackdrop(opened, backdropColor, backdropOpacity)'],
_updateBackdrop: function(opened, color, opacity) {
if (opened && color && opacity) {
Polymer.RenderStatus.afterNextRender(this, function() {
this._setBackdropStyles(color, opacity);
});
}
},
_setBackdropStyles: function(color, opacity) {
Polymer.updateStyles({
'--iron-overlay-backdrop-background-color': color,
'--iron-overlay-backdrop-opacity': opacity
});
}
});
});
</script>
</dom-module>
</body>
codepen
Or to set a fixed static style for all backdrops, use <style is="custom-style"> from the body:
<body>
<style is="custom-style">
iron-overlay-backdrop {
--iron-overlay-backdrop-opacity: 1;
--iron-overlay-backdrop-background-color: green;
}
</style>
<x-dialog></x-dialog>
</body>
<head>
<base href="https://polygit.org/polymer+1.11.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
</head>
<body>
<style is="custom-style">
iron-overlay-backdrop {
--iron-overlay-backdrop-opacity: 1;
--iron-overlay-backdrop-background-color: green;
}
</style>
<div>Hello world</div>
<x-dialog></x-dialog>
<dom-module id="x-dialog">
<template>
<paper-dialog modal with-backdrop opened>
<div class="buttons">
<paper-button dialog-dismiss>Close</paper-button>
</div>
</paper-dialog>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({ is: 'x-dialog' });
});
</script>
</dom-module>
</body>
codepen
This is just a simple html file using pdfmake .
I click a button and then open a pdf file .
using :
pdfMake.createPdf(docDefinition).open();
it's ok , but now i want to see a specific language (ex:Bangla) in my pdfpage . how it is possible . please help or suggest me .
header part:
<head>
<!-- <meta charset="utf-8" />-->
<meta http-equiv="Content-Type" content="text/html" meta charset="utf-8" />
<title>html to pdf</title>
<link href="css/main.css" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='pdfmake/build/pdfmake.min.js'></script>
<script src='pdfmake/build/vfs_fonts.js'></script>
<script src='build/pdfmake.min.js'></script>
<script src='build/vfs_fonts.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
body part :
<body>
<h1>Hello World</h1>
<div class="btn-group">
<div class="btn btn-success buttin_click_1" type="button">download</div>
<div class="btn btn-danger button_click_2" type="button">open</div>
</div>
</body>
Script :
<script>
$(document).ready(function () {
var docDefinition = {
content: 'This is an sample PDF printed with pdfMake ami '
};
$('.buttin_click_1').click(function () {
console.log('btn 1 clicked');
pdfMake.createPdf(docDefinition).open();
});
$('.button_click_2').click(function () {
console.log('btn 2 clicked');
});
});
</script>
Thank you .
Import the Font in pdfMake.
Afterwards update the vfs_fonts.js as described on github
assign pdfMake.fonts in your javascript
$(document).ready(function () {
pdfMake.fonts = {
'SolaimanLipi': {
normal: 'SolaimanLipi-Regular.ttf',
bold: 'SolaimanLipi-Medium.ttf'
}
};
var docDefinition = {
content: 'হ্যালো',
defaultStyle:{
font: 'SolaimanLipi'
}
};
$('.buttin_click_1').click(function () {
console.log('btn 1 clicked');
pdfMake.createPdf(docDefinition).open();
});
$('.button_click_2').click(function () {
console.log('btn 2 clicked');
});
});
I'm trying to build an extension that scrapes email IDs from a webpage. The problem is that...
The popup.html view is not updating the new values of $scope.emailList and $scope.count in the controller in popup.js. However, when I do Inspect Popup it displays the new values attached to the $scope variables but I see no errors that I can look into and work on.
popup.js
var app = angular.module('emailScraper',[]);
app.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
//Fetch URL of current Tab open in Chrome
chrome.tabs.query({
active: true,
currentWindow: true
}, function(tabs) {
// and use that tab to fill in out title and url
var tab = tabs[0];
$scope.cpUrl = tab.url;
console.log($scope.cpUrl); //I SEE ONLY THIS LINE WHEN I INSPECT POPUP
});
$scope.appLoaded = false;
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log("Message received: ", request); //I SEE ONLY IN Inspect Popup BUT NOT IN popup.html view
$scope.emailList = request;
$scope.count = Object.keys($scope.emailList).length;
console.log("Emails found: " + $scope.count); //I SEE ONLY IN Inspect Popup BUT NOT IN popup.html view
$scope.appLoaded = true;
sendResponse({status: "Received JSON data!"});
});
}]);
content script - relevant portion
var jsonData = scrape(); // scrape() is included in the Content Script which I've chosen to leave out here.
console.log(jsonData);
chrome.runtime.sendMessage(jsonData, function(response) {
console.log(response);
});
background.js
var background = {
injectScript: function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {file: "myscript.js"});
});
}
};
background.injectScript();
popup.html
<!DOCTYPE html>
<html ng-app="emailScraper">
<head>
<!--
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<link rel="stylesheet" href="css/lib/concise-v3.4.0-UI-dist/concise.min.css">
-->
<link rel="stylesheet" href="css/lib/materialize/materialize.min.css" media="screen,projection">
<link rel="stylesheet" href="css/app/popup.css">
</head>
<body ng-controller="AppCtrl">
<div id="popWindow">
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<h5 class="brand-logo">Email Scraper</h5>
<span class="badge">
<a># found </a>
<a>{{count}}</a>
</span>
</div>
</nav>
</div>
<div class="progress" ng-hide="appLoaded">
<div class="indeterminate"></div>
</div>
<div class="progress" ng-show="appLoaded">
<div class="determinate" style="width: 100%"></div>
</div>
<div class="collection" ng-if="count > 0">
<h6>{{email}}</h6>
</div>
<div ng-if="count === 0">
<p class="flow-text"> Sorry, No Email IDs found.</p>
</div>
</div>
<script type="text/javascript" src="js/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/lib/angular_1.5.6/angular.min.js"></script>
<script type="text/javascript" src="js/lib/materialize/materialize.min.js"></script>
<script type="text/javascript" src="js/app/popup.js"></script>
</body>
</html>
I don't know what the term would be in Polymer but I want to pass data from one polymer element to another element that it is using inside it.
<dom-module id="bw-boat-form">
<template>
<paper-material class="material-container" elevation="1">
<h2>{{heading}}</h2>
<form is="iron-form">
<bw-image-upload image$="{{ data.image }}" ></bw-image-upload>
</form>
</paper-material>
</template>
<script>
Polymer({
is: 'bw-boat-form',
properties: {
data: {
type: Object
},
save: {
type: Boolean
},
update: {
type: Boolean,
value: false
}
}
});
</script>
</dom-module>
And the image upload element
<dom-module is="bw-image-upload">
<template>
<iron-image class="image" preload placeholder="/images/icons/placeholder.jpg" sizing="cover"></iron-image>
<vaadin-upload
target="{{API_URL}}/images/upload"
max-files="1"
max-file-size="200000"
accept="image/*"
upload-success="uploadResponseHandler"
file-reject="errorHandler"
>
</vaadin-upload>
</template>
<script>
Polymer({
is: 'bw-image-upload',
ready: function() {
console.log(image);
},
uploadResponseHandler: function() {
},
errorHandler: function() {
}
})
</script>
</dom-module>
I want to pass down the value of the {{ data.image }} from the first element into the second element so that I can change the image of the placeholder when needed. How can I achieve this ?
Declare the image property in <bw-image-upload>:
<dom-module is="bw-image-upload">
...
<script>
Polymer({
is: 'bw-image-upload',
properties: {
image: String
}
});
</script>
</dom-module>
Bind that image to iron-image's placeholder property:
<dom-module is="bw-image-upload">
<template>
<iron-image placeholder="[[image]]"></iron-image>
</template>
...
</dom-module>
From your container element, set <bw-image-upload>'s image property with an attribute. Note: Don't use image$= as that syntax is intended for native element attributes, which doesn't apply here.
<dom-module id="bw-boat-form">
<template>
<bw-image-upload image="{{data.image}}"></bw-image-upload>
</template>
...
</dom-module>
<head>
<base href="https://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-image/iron-image.html">
<link rel="import" href="paper-material/paper-material.html">
</head>
<body>
<template id="app" is="dom-bind">
<bw-boat-form heading="Kitty" data={{boatData}}></bw-boat-form>
</template>
<script>
HTMLImports.whenReady(function() {
console.log('ready');
var t = document.getElementById('app');
var boatData = {};
boatData.image = 'http://placekitten.com/400/200';
t.boatData = boatData;
});
</script>
<dom-module id="bw-boat-form">
<template>
<paper-material class="material-container" elevation="1">
<h2>{{heading}}</h2>
<form is="iron-form">
<bw-image-upload image="{{ data.image }}"></bw-image-upload>
</form>
</paper-material>
</template>
<script>
Polymer({
is: 'bw-boat-form',
properties: {
data: Object
}
});
</script>
</dom-module>
<dom-module is="bw-image-upload">
<template>
<style>
iron-image {
width: 440px;
height: 200px;
}
</style>
<iron-image class="image" preload placeholder="[[image]]" sizing="cover"></iron-image>
</template>
<script>
Polymer({
is: 'bw-image-upload',
properties: {
image: String
},
ready: function() {
console.log('bw-image-upload image', this.image);
}
})
</script>
</dom-module>
</body>