Synchronize values of two paper-inputs on change event - javascript

I have a polymer paper-input element on HTML page (among other webcomponents). I need to listen on it’s value change and modify another webcomponent’s property. For a sake of simplicity, let’s imagine I need two syncronized inputs. So far, I have:
<paper-input id="fst" label="First" floatinglabel="First"></paper-input>
<paper-input id="snd" label="Second" floatinglabel="Second"></paper-input>
I want to have their values to be synchronized all the way. Currently I use following code to achieve this:
document.addEventListener('polymer-ready', function() {
['#fst', '#snd'].forEach(function(el) {
document.querySelector(el).addEventListener("change", function(e) {
var value = document.querySelector(el).value;
// ⇓⇓⇓⇓⇓⇓⇓ in pseudocode: other element
document.querySelector(XOR(el)).setAttribute('value', value);
});
});
...
});
I definitely see this is ugly. I am sure, there is a proper way to achieve the goal, but I failed to google it and I’m totally stuck. I suppose observes should do the trick, but I simply can’t figure out how.
The evident code using binding variable is not working for some reason:
<paper-input id="fst" label="First" floatinglabel="First" value="{{ value }}">
</paper-input>
<paper-input id="snd" label="Second" floatinglabel="Second" value="{{ value }}">
</paper-input>
Thanks in advance.

you could use the declarative method and just use something like
<template is="auto-binding">
<paper-input id="fst" label="First" floatinglabel="First" value="{{value}}"></paper-input>
<paper-input id="snd" label="Second" floatinglabel="Second" value="{{value}}"></paper-input>
</template>
plunker shows it in action
http://plnkr.co/edit/3cxdOYKciKRBzROHQzgM?p=preview
edit: update answer to reflect that the use of declarative binding outside a custom element requires a auto-binding template. also it is worth noting that elements inside the auto-binding template are not accessible until the template-bound event is fired.

Related

Custom elements without shadow DOM: best way to get an element

Using Polymer, I learned to understand well the difference between light DOM (whatever is in the element) and local DOM (the "hidden" side of the story).
<iron-form> (which is used like <form is="iron-form"></form>) is a little different as it doesn't have local DOM.
Now I have a custom-made widget (which is actually available in GitHub) where you go:
<hot-form-validator success-message="Record saved!">
<form is="iron-form" id="form" method="post" action="/stores/polymer">
<paper-input required id="name" name="name" label="Your name"></paper-input>
<paper-input required id="surname" name="surname" label="Your surname"></paper-input>
<paper-button type="submit" raised on-click="_submit">Click!</paper-button>
</form>
</hot-form-validator>
Now, hot-form-validator needs to get the form, and then look -- within the form -- for a specific button (with type=submit). So, I have:
(remember that this.form is the form):
attached: function(){
var paperButton = this.form.$$('paper-button[type=submit]');
...
}
It works, but it doesn't make sense that it does since $$ should be only for local DOM, whereas paper-button is actually in the form's light DOM.
attached: function(){
var paperButton = this.form.queryEffectiveChildren('paper-button[type=submit]');
This works, but I wonder if it's the best way to go.
Or... since there is no shadow DOM, should I simply no bother worrying about all this, and simply use DOM as always since there is no light/local DOM to deal with?
See https://www.polymer-project.org/1.0/docs/devguide/local-dom#light-dom-children
If you add an id to the <content id="someId"></content> then you can use
var result = this.getContentChildren('#someId');
and then look up the desired element in the result.
You could for example create a specific <content> tag for the submit button like
<dom-module ...>
<template>
...
<content></content>
<content id="submitButton" select="paper-button[type=submit]"></content>
...
</template>
</dom-module>
and then get the element using
var submitButton = this.getContentChildren('#submitButton')[0];
This code is working
this.form.$$('paper-button[type=submit]');
because this.$$ forwards to querySelectorAll(...) and in shady DOM encapsulation is just emulated and doesn't prevent querySelectorAll(...) to find other children than local DOM children.
You can also use
var submitButton = Polymer.dom(this).querySelector('paper-button[type=submit]');

Angular appending html with directives from within a directive

I'm trying to write a small directive that will append the validation tags and ngMessages dynamically to the input. But I'm having trouble appending the ng-message attribute to the div.
The idea is to have this,
<div validator validations="{json_data containing error messages}">
<input name='fieldName'>
</div>
Turned in to the following according to the provided JSON.
<div validator>
<input required="required"></input>
<div ng-message="fieldName" ng-if="fieldName.$dirty>
<p ng-message="required"> scope.message </p>
</div>
</div>
I've currently managed to get the ng-required appeneded using the answer to this answer. But I can't seem to append the ng-message tag using the same technique. What should be done differently to solve this issue?
The final directive should be able to generate something like this Fiddle
The current version can be found in the Fiddle here the example works as expected until 'scope' is added. But as soon as 'scope' is added, the example stops working.
Update
I've realized that this only occurse when you add a local scope. This error doesn't occure when using the global scope and accessing the variable using scope.$eval(attrs.message)

JsViews how to make data binding happen on root object as well as its nested properties?

I am experiencing odd behavior when data linking an object to a form that led me to re-question what exactly is being data bound?
Basically I have a form that creates new Companies as well as updates them. The actual creation/update is done via ajax, which is why I am using the same form for both purposes. In the case when I have to create a company, everything works as I expect. However when I have to update a company, things don't work like how I expect them to. Please have a look at the following code.
Here is my sample Form HTML:
<div id="result"></div>
<script type="text/x-jsrender" id="CompanyFormTemplate">
<form>
<input type="text" data-link="Company.Name" />
</form>
</script>
Here is my Javascript code:
var app = new CompanyFormContext();
function CompanyFormContext() {
this.Company = {
Name: ''
};
this.setCompany = function (company) {
if (company) {
$.observable(this).setProperty('Company', company);
}
};
};
$(function () {
initPage();
...
if (...) {
// we need to update company information
app.setCompany({ Name: 'Company ABC' });
}
});
function initPage() {
var template = $.templates('#CompanyFormTemplate');
template.link("#result", app);
}
Instead of the form input showing 'Company ABC', it is empty. However if I enter anything in it, then the Company.Name value does change! But while I want the input to data bind to Name property of my Company object, I also want it to be aware of any changes made to the (parent) Company object and update it's data binding to it's Name property accordingly.
So my question is how should I change the way I am writing this code so that I can achieve a data bound both on the root object as well as the property?
The issue you were having was because in your scenario, you have paths like Company.Name for which you want to data-link to changes not only of the leaf property but also to changes involving replacing objects higher up in the path (in this case the Company).
For that you need to use the syntax data-link="Company^Path".
See the section Paths: leaf changes or deep changes in this documentation topic:
http://www.jsviews.com/#observe#deep.
See also the examples such as Example: JsViews with plain objects and array in this topic: http://www.jsviews.com/#explore/objectsorvm.
Here is an update of your jsfiddle, using that syntax: https://jsfiddle.net/msd5oov9/2/.
BTW, FWIW, in your fix using {^{for}} you didn't have to use a second template - you could alternatively have written:
<form class="form-horizontal">
{^{for Company}}
...
<input type="text" data-link="Name" />
{{/for}}
</form>
To respond also to your follow-up question in your comment below, you can associate any 'block' tag with a template. Using tmpl=... on the tag means you have decided to separate what would have been the block content into a separate re-usable template. (A 'partial', if you will). The data context for that template will be the same as it would have been within the block.
So specifically, {{include}} {{if}} and {{else}} tags do not move the data context, but {{for}} and {{props}} do. With custom tags you can decide...
So in your case you could use either {^{for Company tmpl=.../}} or {{include tmpl=.../}} but in the second case your other template that you reference would use <input type="text" data-link="Company^Name" /> rather than <input type="text" data-link="Name" />.
Here are some relevant links:
http://www.jsviews.com/#samples/jsr/composition/tmpl
http://www.jsviews.com/#includetag
http://www.jsviews.com/#fortag
I discovered one way to achieve this. It might seem complex at first but it will make sense once you understand it properly.
(PS: I wish there was a sample like this. I might just blog about it.)
HTML Markup:
<script type="text/x-jsrender" id="CompanyFormTemplate">
<form>
{^{for Company tmpl="#CompanyDetailsTemplate" /}
</form>
</script>
<script type="text/x-jsrender" id="CompanyDetailsTemplate">
<input type="text" data-link="Name" />
</script>
Javascript: No changes needed from code above.
Okay so as I said, the solution might look complicated but it turns out all I really had to do was to set up data binding first on the Company object, and then to it's property objects. I wonder if there is a more elegant solution (i.e. one in which all of this can be achieved in a single template) however this solution ensures that data-binding is happening both on the parent object as well as its' properties.
I have posted a JsFiddle for this solution, so if anyone comes across this problem and wants to understand how this solution would work for their particular problem, they will be able to play with a working solution.

Translate custom attributes with i18next (placeholder, value)

I am investigating what is possible with i18next localization library.
Right now I have the following code (full Fiddle is here):
HTML
<div data-i18n="title"></div>
<input placeholder="Hello" value="name">
<div class="holder"></div>
<button class="lang" data-lang="en">Eng</button>
<button class="lang" data-lang="ch">Chi</button>
JS
$(document).ready(function () {
i18n.init({
"lng": 'en',
"resStore": resources,
"fallbackLng" : 'en'
}, function (t) {
$(document).i18n();
});
$('.lang').click(function () {
var lang = $(this).attr('data-lang');
i18n.init({
lng: lang
}, function (t) {
$(document).i18n();
});
});
});
It translates all text elements, but the problem is that I can not translate custom attributes. For example text inside the div is translated, but I can not understand how can I translate custom attributes like placeholder and value.
Another problem is with my way of translation. Whenever a button Chi, Eng is clicked, I am initializing the translation (but I am not sure this is a correct way). Edit I think I found how to solve this problem (I need to use setLng): i18n.setLng(lang, function(t) { ... })
After asking i18next creator this question directly, I received the following reply: all I need is to put my custom attribute in front of the translation element. Here is an example:
<div data-i18n="[title]titleTransl"></div>
<input data-i18n="[placeholder]placeTransl" value="name">
If multiple attributes are needed, separate them by a ;.
I learned 2 things by this:
I have to read better documentation.
118next's creator is really helpful (this is a thank you remark for him).
For me the following worked
<input data-i18n="[placeholder]placeTransl" value="name">
So just enter the attribute's name between [] and then the translation.
Consider calling
$('body').i18n()
inside .done() function. You should tell where to look for localizer.
This will work without having to call [placeholders] in the data-i18n attribute.

How do we set mask on a dynamically inserted input?

Since Angular-UI-Mask is acting oddly, I'm using jquery-inputmask to some of my inputs, but when an input is dynamically inserted ny Angular it gets no mask:
<li ng-repeat="item in items">
<input type="text" name="birth_date" class="span2 format_date" ng-model="birth_date" placeholder="Data de Nascimento" required />
</li>
This is the related script
<script type="text/javascript">
jQuery(document).ready(function(){
$(".format_date").inputmask("99/99/9999");
});
</script>
Is there anything I can do to force it to set the mask to new inputs?
jQuery plugins like jQuery.inputMask work by (as your code shows) attaching behaviour to DOM elements when the document is 'ready'. This will run once, and never again, so for dynamically-added content this approach doesn't work.
Instead, you need something that will run whenever the corresponding DOM is changed. So whenever an 'item' in your 'items' list is added, the element is added and the corresponding jQuery function is run against that element. You need to use AngularJS for this and you could write your own directive, but thankfully, someone has already written the code for you: the jQuery Passthrough plugin as part of Angular UI's UI.Utils.
Here is a working Plunkr.
You need to include the script at the top, like so (I downloaded it from GitHub):
<script src="ui-utils.jq.js"></script>
Load the module into AngularJS, for example:
var app = angular.module('myApp', ['ui.jq']);
And then use the directive in your HTML markup:
<input type="text" ui-jq="inputmask" ui-options="'99/99/9999', { 'placeholder': 'dd/mm/yyyy' }" />

Categories