I am trying to use the Selectize jQuery plugin in a Polymer element, wrapping the selectize CSS and JS files in selectize-css.html and selectize-js.html for importing. The JS import works, but the style module (https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules) for the CSS does not. The selectize CSS rules are not matching the HTML generated by selectize inside the Polymer element.
Here is my element:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.bootstrap3.css"> -->
<link rel="import" href="./selectize-css.html">
<link rel="import" href="./selectize-js.html">
<dom-module id="subject-picker">
<template>
<style include="selectize-css"></style>
<select id="selector" value="{{selection::change}}">
<option value="" disabled selected>Pick a number...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</template>
<script>
Polymer({
is: 'subject-picker',
properties: {
selection: {
type: String,
notify: true
}
},
attached: function () {
var _this = this;
$(this.$.selector).selectize({
// When the user selects a different option, update the selection property.
onChange: function (newValue) {
if (_this.selection != newValue) {
_this.selection = newValue;
}
}
});
}
});
</script>
</dom-module>
And here is the selectize-css.html style module:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="selectize-css">
<template>
<style>
// contents of selectize.bootstrap3.css go here
</style>
</template>
</dom-module>
If I include the CSS directly rather than with a style module (uncomment second line of element code), the CSS does work properly. I have gotten style modules to work in other cases, but cannot figure out what I am doing wrong here. Any ideas?
Thanks,
Dennis
Polymer style modules started working after I set the global dom setting to "shadow":
<head>
<script>
/* see https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules */
window.Polymer = {
dom: 'shadow'
};
</script>
Related
I have a question in polymer
valueCategoryChange: function() {
this.set("mycategory", this.$.comboCategory.selectedItem);
},
<vaadin-combo-box on-value-changed="valueCategoryChange" id="comboCategory" items="{{categories}}" item-value-path="id" value="{{category22}}" item-label-path="display" required>
if I select from combobox everything work well and valueCategoryChange()
shows selectedItem.
but when I select an item in combobox programmatically from value
this.category22 = data.CatId; ,that item is shown in combobox but in valueCategoryChange function, this.$.comboCategory.selectedItem is null
please help me
If you use like below:
<vaadin-combo-box selected-item="{{mycategory}}" id="comboCategory" items="{{categories}}" item-value-path="id" value="{{category22}}" item-label-path="display" required>
<div> Selected Item is [[mycategory]]</div>
then you will have a selected item property as mycategory. Also you will not need a valueCategoryChange function and on-value-changed="valueCategoryChange" event.
Beside this if you need to set event and want to use the functions than you can use:
valueCategoryChange: function() {
console.log(this.mycategory); // is the selected item that you can use
// this.set("mycategory", this.mycategory) will not be useful :))
},
(Run below code snipped) or DEMO
HTMLImports.whenReady( ()=> {
class XFoo extends Polymer.Element {
static get is() {
return 'x-foo';
}
}
window.customElements.define(XFoo.is, XFoo)
})
<head>
<script
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="https://cdn-origin.vaadin.com/vaadin-core-elements/master/vaadin-combo-box/vaadin-combo-box.html">
<link rel="import" href="https://cdn-origin.vaadin.com/vaadin-core-elements/master/vaadin-grid/all-imports.html">
</head>
<body>
<x-foo id="xfoo"items="{{categories}}"></data-table-d>
<dom-module id="x-foo">
<template>
<vaadin-combo-box selected-item="{{mycategory}}" id="comboCategory" items="{{categories}}" value="{{category22}}" ></vaadin-combo-box><br><br>
<div> Selected Item is [[mycategory]]</div>
<script>
var el = document.getElementById('xfoo');
el.categories=['Cat1', 'Cat2','Cat3'];
</script>
</template>
</dom-module>
my problem is that when change model not change position element ui-switch
if use just checkbox then all work
my html
<input type="checkbox" data-group="{{ roomPerson.person.transfer.is_group }}"
ng-disabled="!isEdit()"
class="js-switch"
ng-change="toggleTransfer(roomPerson)"
ng-model="roomPerson.person.transfer.isIncluded"
ui-switch="{color: '#3aa99e',size:'small'}"/>
thanks in advance
I'm not sure where you get your ui-switch example from?
It should be added using the switch directive.
angular.module('test', ['uiSwitch']).controller('Test', Test);
function Test($scope) {}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://rawgit.com/xpepermint/angular-ui-switch/master/angular-ui-switch.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/xpepermint/angular-ui-switch/master/angular-ui-switch.min.css"/>
<div ng-app='test' ng-controller='Test'>
<input type="checkbox"
ng-model="isChecked"/>
<switch ng-model="isChecked"/>
</div>
I have a custom element element1.html in which we use iron-ajax to call the service,data received from the service is used to populate the dropdown menu
<dom-module id="element1">
<iron-ajax auto
url="../sites.json"
handle-as="json"
on-response="handleResponse"
></iron-ajax>
<paper-dropdown-menu-light label="select site" noink no-animations>
<paper-listbox class="dropdown-content sitedropdown">
<template is="dom-repeat" items="{{data}}">
<a class="sitelist" on-tap="testclick" data-cus$="{{item.keyValue}}" href$="{{baseUrl}}site/{{item.keyValue}}" tabindex="-1">
<paper-item raised>{{item.Name}}</paper-item>
</a>
</template>
</paper-listbox>
</paper-dropdown-menu-light>
<script>
Polymer({
is: 'element1',
properties: {
},
handleResponse:function(e,request){
this.data=e.detail.response;
},
testclick : function(e){
console.log(e.target.parentNode.getAttribute('data-cus'));
this.keyValue=e.target.parentNode.getAttribute('data-cus');
}
});
</script>
</dom-module>
In the above dropdown each value is a link and it has a unique key when clicked on it will route to other section(other page) where data will be displayed using the "keyValue" present in the anchor tag.In this section I use another custom element (element2.html).So how can I pass the keyValue present in element1.html to element2.html
<section data-route="site" tabindex="-1">
<element2></element2>
</section>
element2.html
<dom-module id="my-list">
<template>
<iron-ajax auto
url="serviceURL/?key={{I need to get the value from element1.html here}}"
handle-as="json"
on-response="handleResponse"
></iron-ajax>
</template>
</dom-module>
I am having what seems to be a common issue with Polymer 1.0: accessing nodes inside a dom-if template, but none of the proposed solutions seem to work in my case (?!)..
Here is a simple example:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="my-test">
<template>
<div>
<template is="dom-if" if="{{show}}" id="tplId">
<p id="message">hello</p>
</template>
</div>
<a on-tap="tapEvent">click me!</a>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-test',
show: false,
ready: function() {
},
tapEvent: function() {
// show the template
this.show = true;
// How may I access #message since the template is inhert ?
// this finds the template by id
console.log(Polymer.dom(tplId));
// this won't find the #message element inside it
console.log(Polymer.dom(tplId).querySelector('#message'))
// this neither
console.log(Polymer.dom(this.root).querySelector('#message'))
// this neither
console.log(Polymer.dom(this).querySelector('#message'))
// this neither .. Should I even be using this.shadowRoot in 1.0?
console.log(Polymer.dom(this.shadowRoot).querySelector('#message'))
// this neither
console.log(this.$$('#message'))
// this cannot work because #message is not a statically created DOM element
console.log(this.$.message)
}
});
})();
</script>
</dom-module>
I'm new to Polymer, and I feel the solution might be right under my nose..?
If this
// this neither
console.log(this.$$('#message'))
doesn't work then you probably try to query the element while it doesn't exist. When show is false the <p id="message"> element doesn't exist at all. If you need this then bind to hidden instead of using dom-if
<p id="message" hidden$="{{show}}">hello</p>
then
console.log(this.$.message);
will work as well.
I'm using bootstrap and angular to build an application. In a HTML page, i'm using this:
<div class="btn-group-justified" data-toggle="buttons-checkbox">
<button type="button" class="btn fzbtn-consServices" ng-repeat="service in availability.services">{{service.name}}</button>
</div>
It's building a button group with dynamic values. Is there a practical way to obtain the selected buttons inside this button group?
I already tried some solutions, some of them are working but I don't know if it's the best way...
1: On "ng-click" method I would change a attribute value (eg. "checked" attribute) of each service to true or false;
2: I searched about any html attribute for btn-group which could offer me all the selected buttons inside this group, but i had no success;
3: I heard that i could beat this problem using Angular Filter, but i didn't find any similar example;
Anyone with a better idea? Thanks so much :)
This is the best solution I found until now:
<div class="btn-group-justified" data-toggle="buttons-checkbox">
<button type="button" class="btn fzbtn-consServices" ng-repeat="service in availability.services" ng-click="onClickService(service)" ng->{{service.name}}</button>
</div>
Controller:
$scope.onClickService = function (service) {
if (service.checked) {
service.checked = "false"
} else {
service.checked = "true";
}
}
Answer: Bootstrap UI
I feel your pain. Bootstrap is not always angular-friendly. But there is a good solution:
The easiest (and by far the cleanest) approach is to use Bootstrap UI. Built by the Angular Team, it is a rewrite of the javascript-portion of Bootstrap but for an Angular-friendly usage. Here's the section about buttons: http://angular-ui.github.io/bootstrap/#/buttons
Example solution: Checkbox button behavior
In this solution, the initial services array is used to store a boolean field 'selected' to know if any particular service is selected or not. (Similar to the "checked" in the question). This field is 2-way bounded to the checkbox state. Clicking the checkbox changes the field and changing the field changes the checkbox state.
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
var services = [
{ name:'Service A' },
{ name:'Service B', selected:true },
{ name:'Service C' },
{ name:'Service D', selected:true }
];
$scope.availability = { services:services };
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS BootStrap UI radios</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div class="btn-group-justified">
<label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="service.selected" btn-checkbox>{{service.name}}</label>
</div>
<div ng-repeat="service in availability.services">{{service.name}} <span ng-show="service.selected">- selected</span></div>
</body>
</html>
Radio button behavior
I've included a solution for a "single selection" checkbox also known as a "radio-button". The "current selection" is bound to a variable on the scope. It will get updated automatically when the user picks an element. Setting it will, in turn, change the current selection.
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
var services = [
{ name:'Service A' },
{ name:'Service B' },
{ name:'Service C' },
{ name:'Service D' }
];
$scope.availability = { services:services };
$scope.model = {};
// Here we are using the service object instance as the "selection value".
// Depending on what you need, you could also use some sort of identifier or
// even the $index if that's more useful.
// Immediately select the second one.
$scope.model.selectedService = services[1];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS BootStrap UI radios</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div class="btn-group-justified">
<label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="model.selectedService" btn-radio="service">{{service.name}}</label>
</div>
<div>Current Selection is: {{model.selectedService.name}}</div>
</body>
</html>
NOTE: I used <label> instead of <button>, but I did not have your special CSS styles so it wasn't behaving on the screen, functionality-wise it works equally well with <button> elements.
You don't really specify why you are wanting to "get" the buttons. In general, getting a reference to DOM elements like this is not the "angular way." It is generally better to find a way to use angular's data-binding to manipulate UI elements.
For instance, if you want to show or hide buttons based on data or on another UI event, then use ng-show or ng-hide bound to a property of the service object you are binding these buttons to. Then you can update the object's property to change the UI. You should be able to find a similar way to make other changes (like setting classes, attributes, etc.) with angular's data-binding rather than doing it manually.