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>
Related
I have this HTML code:
</head>
<body>
<div id="app">
<div
class="demo"
#click="attachRed = !attachRed"
:class="{red: attachRed, blue: !attachRed}"
>
</div>
<div
class="demo">
</div>
<div
class="demo">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
attachRed: false,
},
computed: {
divClasses: function() {
return {
red: this.attachRed,
blue: !this.attachRed,
}
}
}
})
</script>
</body>
</html>
How do I indent the return in the computed section properly to look like this in Vim?
</head>
<body>
<div id="app">
<div
class="demo"
#click="attachRed = !attachRed"
:class="{red: attachRed, blue: !attachRed}"
>
</div>
<div
class="demo">
</div>
<div
class="demo">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
attachRed: false,
},
computed: {
divClasses: function() {
return {
red: this.attachRed,
blue: !this.attachRed,
}
}
}
})
</script>
</body>
</html>
What do I need to change in my Vim or WebStorm settings so that when I select everything in visual mode and press = it indents properly?
I cannot scale the image when moving the scale controller. It shows the following error:
Uncaught TypeError: canvas.requestRenderAll is not a function
Can please anyone help to solve this problem? I want the functionality to be implemented for image please refer to this. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Instagram</title>
<script type="text/javascript" src="fabric.js-1.7.21/dist/fabric.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<canvas id="c" width="500px" height="400px"></canvas>
<div id="range">
<input type="range" class="image-scale-lever" step="0.1" max="3" min="0.1" value="1" id="scale-control"></label>
</div>
<script type="text/javascript">
jQuery( document ).ready(function() {
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Image.fromURL('locket.png', function(oImg) {
oImg.set({
left: 0,
top: 0,
width:500,
height:400
});
canvas.add(oImg);
var scaleControl = $('#scale-control');
scaleControl.oninput = function(x) {
this.val(x);
oImg.scale(parseFloat(x)).setCoords();
canvas.requestRenderAll();
}
function updateControls() {
scaleControl.oninput(oImg.scaleX);
}
canvas.observe("object:scaling", function (e) {
updateControls();
});
});
});
[1]: https://withyoulockets.com/pub/media/catalog/product/cache/image/700x700/e9c3970ab036de70892d86c6d221abfe/k/a/katieopen1100px-min.png
Here is the result. You need to change the scale of the object on onchange event callback.
<!DOCTYPE html>
<html>
<head>
<title>Instagram</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" >
jQuery( document ).ready(function() {
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Image.fromURL('https://withyoulockets.com/pub/media/catalog/product/cache/image/700x700/e9c3970ab036de70892d86c6d221abfe/k/a/katieopen1100px-min.png', function(oImg) {
oImg.set({
left: 0,
top: 0,
width:500,
height:400
});
canvas.add(oImg);
var scaleControl = $('#scale-control');
scaleControl.on("change",function() {
var newValue = this.value;
oImg.scale(parseFloat(newValue)).setCoords();
canvas.renderAll();
})
function updateControls() {
scaleControl.oninput(oImg.scaleX);
}
canvas.observe("object:scaling", function (e) {
updateControls();
});
});
});
</script>
<body>
<canvas id="c" width="500px" height="400px"></canvas>
<div id="range">
<input type="range" class="image-scale-lever" step="0.1" max="3" min="0.1" value="1" id="scale-control"></label>
</div>
Check here:
https://jsfiddle.net/3mjhxcyn/2/
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>
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
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