Is there a way I can create paper-card heading dynamically using some property inside custom element? Following is what I tried but didn't work. Probably this is not the way to achieve what I want:( I googled for a couple of hours but ended up with nothing!
Custom Element
<script>
(function () {
'use strict';
Polymer({
is: 'nearest-customers',
properties: {
customers: {
type: Array,
value: [],
notify: true
},
cardViewMaxRecords: {
type: Number,
notify: true
},
showFullCustomerList: {
type: Boolean,
value: false,
notify: true
},
headingContent: {
type: String,
value: 'Custom card heading'
}
},
ready: function () {
this.heading.textContent = this.headingContent
},
});
})();
</script>
HTML
<nearest-customers id="nearestCustomers" card-view-max-records="3"></nearest-customers>
...
...
...
<script type="text/javascript">
window.addEventListener('WebComponentsReady', function (e) {
var nearestCustomers = document.querySelector("#nearestCustomers");
nearestCustomers.headingContent= "<a href='someurl'><iron-icon icon='fa:arrow-left'></iron-icon></a> This is a new content";
}
</script>
My objective is to put an iron-icon before the heading text and the icon can be used as a link to somewhere.
Thanks in advance
I'm sure there's a better way, but I just added the styles and structure:
<div class="header paper-card">
<div class="title-text paper-card">
<iron-icon icon="book"></iron-icon> Reading List
</div>
</div>
Related
I am working with Quill Editor. Its been nice so far. My question is that is there any way to make Quill Editor go full-screen (sort of distraction free mode) by a button in the toolbar?
If not than how can I proceed to implement this on my own?
To go fullscreen I think it is easiest to use a library, for example screenfull.js - https://github.com/sindresorhus/screenfull.js/
As for adding custom buttons to the Quill toolbar, I have found two ways.
Method 1:
At least simple buttons can be added directly through the toolbar options. Something like this:
http://codepen.io/nik10110/pen/PbyNoW
<div id="editor"></div>
<style>
#editor {
height: 375px;
}
.ql-omega:after {
content: "Ω";
}
</style>
<script type="text/javascript">
var toolbarOptions = [
[{ 'font': [] }],
['bold', 'italic', 'underline'],
['blockquote', 'code-block'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'align': [] }],
['omega']
];
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
var customButton = document.querySelector('.ql-omega');
customButton.addEventListener('click', function() {
if (screenfull.enabled) {
console.log('requesting fullscreen');
screenfull.request();
} else {
console.log('Screenfull not enabled');
}
});
</script>
Method 2:
Set the toolbar to use custom Html rather than specifying the buttons through javascript. The official documentation ( http://quilljs.com/docs/modules/toolbar/ ) is quite detailed for this.
Here's a tweaked code sample from there:
<div id="toolbar">
<!-- Add buttons as you would before -->
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<!-- But you can also add your own -->
<button id="toggle-fullscreen"></button>
</div>
<div id="editor"></div>
<script type="text/javascript">
var quill = new Quill('#editor', {
modules: {
toolbar: '#toolbar'
}
});
var customButton = document.querySelector('#toggle-fullscreen');
customButton.addEventListener('click', function() {
if (screenfull.enabled) {
console.log('requesting fullscreen');
screenfull.request();
} else {
console.log('Screenfull not enabled');
}
});
</script>
I have a custom element <x-marker> with a <paper-checkbox> inside of it.
I want an checked attribute on my element to reflect down on the <paper-checkbox> but my solution doesn't seem to be the way to do it.
HTML:
<x-marker is-checked="<%= someBoolean %>"></x-marker>
Element:
<dom-module id="x-marker">
<template>
<div>
<paper-checkbox id="checkbox"></paper-checkbox>
</div>
</template>
<script>
Polymer({
is: 'x-marker',
properties: {
isChecked: String
},
listeners: {
change: 'changeHandler'
},
attached: function() {
if (this.isChecked === 'true') {
this.$.checkbox.setAttribute('checked', this.isChecked);
}
},
changeHandler: function (event, detail, sender) {
//...
}
});
</script>
</dom-module>
In Polymer 0.5 you could use checked?="{{isChecked}}", but that doesn't seem to work in 1.0 anymore. Also hard coding <paper-checkbox checked="false"> still checks the checkbox as long as the attribute is present. The value doesn't seem to matter, that's why the attribute itself has to be bound, and not its value.
I can't seem to figure this out, including treating the property as a string === 'true' instead of a boolean, and bind it straight to the <paper-checkbox>
In 1.0 you just need to use checked="{{isChecked}}". You can implement it as follows:
HTML:
<x-marker checked="{{someBoolean}}"></x-marker>
ELEMENT:
<dom-module id="x-marker">
<template>
<div>
<paper-checkbox id="checkbox" checked="{{checked}}">Check me</paper-checkbox>
</div>
</template>
<script>
Polymer({
is: 'x-marker',
properties: {
checked: {
type: Boolean,
observer: '_checkChanged'
}
},
_checkChanged: function(newValue, oldValue) {
// Do something
}
});
</script>
</dom-module>
I'am trying to create a grouping and filtering mechanism with several predefined filters. I have a collection of undefined rules and some predefined grouping actions, for example "relativeDate" (today, tomorrow, yesterday, this week, ...), "boolean" or . The set of actions should be expandable.
I've managed to get this working in a controller. But I want to outsource this into a directive to get this working with other object collections. The Problem is: I need to specify the template of the list dynamically.
Imagine the following collections:
$scope.memosReceived = [
{ id: 1, from: 'Henry Ford', title: 'Want your Model T?', received: '2015-05-04T12:30:00', read: true },
{ id: 2, from: 'Oliver Newton', title: 'Look at this!', received: '2015-06-15T08:00:00', read: true }
...
];
$scope.memosSent = [
{ id: 1, to: 'Henry Ford', title: 'That is an old car', sent: '2015-05-04T12:35:21', read: true },
{ id: 2, to: 'Oliver Newton', title: 'Stop Spam', sent: '2015-06-15T08:01:47', read: false }
...
];
Now the markup should be like the following:
<div ng-controller="controller">
<h2>Received</h2>
<grouped-list ng-model="memosReceived" item-var="received" grouping-options="groupingReceived">
<h2>{{ received.title }} <sub>by {{ received.from }}</h2>
</grouped-list>
<h2>Sent</h2>
<grouped-list ng-model="memosSent" item-var="sent" grouping-options="groupingSent">
<h2>{{ sent.title }} <sub>to {{ sent.to }}</h2>
</grouped-list>
</div>
Options could be like:
$scope.groupingReceived = [
{ modelKey: 'received', action: 'relativeDate', options: { [.. passed to grouping action, like value->name mapping ..] },
{ modelKey: 'read', action: 'boolean', options: { [...] } }];
$scope.groupingSent = [
{ modelKey: 'sent', action: 'relativeDate', options: { [.. passed to grouping action, like value->name mapping ..] },
{ modelKey: 'read', action: 'boolean', options: { [...] } }];
The rendered HTML should look like this "PseudoHtml":
<div ng-controller="controller">
<h2>Received</h2>
<div class="grouped-list">
<div class="filter-section">
<button ng-click="openFilters = !openFilters>Open Filters</button>
<div class="filter-options" ng-hide="!openFilters">
<h4>Group by</h4>
[selectbox given group actions] [selectbox sort ascending or descending]
<h4>Filter by</h4>
[build filters by similar to group actions given filter actions]
</div>
</div>
<div class="group">
<div class="group-header">
<h3>Yesterday</h3>
</div>
<ul class="group-list">
<li ng-repeat="received in ngModel | customFilters">
<!-- something like transclusion starts here -->
<h2>{{ received.title }} <sub>by {{ received.from }}</h2>
<!-- something like transclusion ends here -->
</li>
</ul>
</div>
<div class="group">
<div class="group-header">
<h3>Last Week</h3>
</div>
<ul class="group-list">
<li ng-repeat="received in ngModel | customFilters">
<!-- something like transclusion starts here -->
<h2>{{ received.title }} <sub>by {{ received.from }}</h2>
<!-- something like transclusion ends here -->
</li>
</ul>
</div>
</div>
<h2>Sent</h2>
<div class="grouped-list">
[... same like above ...]
</div>
</div>
I am really struggeling how to achieve this behavior, where to store the several parts of the logic (e.g. the grouping actions, the custom filters) and how to transclude this correctly.
Maybe someone can give me a good starting point for that.
You could create a custom filter and call it from the controller of your directive.
Inside of this filter you can decide which filter action should be triggered by passing parameters to the filter.
I would call it from the controller instead of the template because there you can easier chain your filters.
Please have a look at the demo below or in this jsfiddle.
During adding my code to SO I've detected a bug (not displaying the item) in my code with a newer AngularJS version. Not sure what it is but with 1.2.1 it's working.
I'll check this later. Seems like a scoping issue.
angular.module('demoApp', [])
.filter('aw-group', function($filter) {
var filterMethods = {
relativeDate: function(input, action) {
console.log('relative date called', input);
return input; // do the translation to relative date here
},
filterByNumber: function(input, action, options) {
// if you need mor parameters
return $filter('filter')(input, options.number);
},
otherFilter: {
}
};
return function(input, action, options) {
return filterMethods[action](input, action, options);
};
})
.directive('groupedList', function () {
return {
restrict: 'E',
scope: {
model: '=',
itemVar: '=',
filter: '='
},
transclude: true,
template: '<ul><li ng-repeat="item in filteredModel" ng-transclude>'+
'</li></ul>',
controller: function($scope, $filter) {
//console.log($scope.filter);
$scope.filteredModel = $filter('aw-group')($scope.model, 'filterByNumber', { number: 2 }); // passing action from $scope.filter.action as second parameter, third is an options object
}
};
})
.controller('mainController', function () {
this.data = [{
title: 'Test1',
from: 'tester1'
}, {
title: 'Test2',
from: 'tester1'
}, {
title: 'Test3',
from: 'tester1'
}, ];
this.groupingReceived = [{
modelKey: 'received',
action: 'relativeDate',
options: {},
modelKey: 'read',
action: 'boolean',
options: {}
}];
this.memosReceived = [{
id: 1,
from: 'Henry Ford',
title: 'Want your Model T?',
received: '2015-05-04T12:30:00',
read: true
}, {
id: 2,
from: 'Oliver Newton',
title: 'Look at this!',
received: '2015-06-15T08:00:00',
read: true
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController as ctrl">
<grouped-list model="ctrl.data" item-var="received" filter="ctrl.groupingReceived">
<h2>{{item.title}}<sub>{{item.from}}</sub></h2>
</grouped-list>
</div>
I'm using Angularjs with highcharts-ng library and I want to have a highchart directive with the ability to export the chart (showing the export button) and another without that option (not showing the export button) but I have not managed to disable (hide) the button using the configuration object. How can I do that?
Here is the snippet
var app = angular.module('app', ['highcharts-ng']);
app.directive('myChart', function(){
return {
restrict: 'E',
scope: {},
template: '<highchart config="chartConfig"></highchart>',
link: function(scope, element, attrs) {
scope.chartConfig = {
options: {
exporting: {
enabled: false
}
}
};
}
};
});
<div ng-app="app">
<my-chart></my-chart>
<div>
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script src="https://rawgit.com/pablojim/highcharts-ng/0.0.7/src/highcharts-ng.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
Even if a disable the export property
var HighChartChartModel = {
options: {
exporting: {
enabled: false
},
chart: {
type: 'bar'
}
},
This will work
Here is the right way to do this in highcharts-ng:
options: {
chart: {
type: 'bar'
},
exporting: {
enabled: false
}
},
Note that exporting is at the same level as chart.
I got the same problem, and since the regular options somehow don't work, I just hide it with some CSS and javascript (jQuery) where needed.
$('.highcharts-button').css('display': 'none');
looks like a bug in highcharts-ng.
if you simply don't include the exporting.js you won't get that button.
a working fiddle here
following is my code: when i click any row in grid /table i should be
able to update the array elements back in the array
<script type="text/x-handlebars" data-template-name="application">
<table border="1">
{{#each content}}
<tr><td>{{name}} {{view Ember.RadioButton name="selectionTest" selectionBinding="isSelected" valueBinding="name"}}</td></tr>
{{/each}}
</table>
<div>Is Selected: {{isSelected}}</div>
</script>
console.clear();
window.App = Ember.Application.create({});
Ember.RadioButton = Ember.View.extend({
tagName: "input",
type: "radio",
arrBinding: 'App.ApplicationController.content',
attributeBindings: ["name", "type", "value", "checked:checked:"],
click: function () {
this.set("selection", this.$().val())
alert(this.$().val());
alert(arrBinding);
},
checked: function () {
return this.get("value") == this.get("selection");
}.property()
});
here i have declared the array elements
App.ApplicationController = Ember.ObjectController.extend({
isSelected: 'Ashish',
content:[
{
name: 'Ashish',
selected: false
},
{
name: 'Eben',
selected: false
},
{
name: 'Ronald',
selected: false
},
{
name: 'Jamie',
selected: false
}
]
});
here is the jsfiddle : http://jsfiddle.net/CM6fK/169/
Not totally sure what you're asking, but for a start you need to bind you selectionBinding to your controller:
<script type="text/x-handlebars" data-template-name="application">
<table border="1">
{{#each content}}
<tr><td>{{name}} {{view Ember.RadioButton name="selectionTest" selectionBinding=this.controller.isSelected valueBinding="name"}}</td></tr>
{{/each}}
</table>
<div>Is Selected: {{isSelected}}</div>
</script>
And as for the other bit. I think you need to change:
alert(arrBinding);
to
alert(this.arrBinding);
Though I'm really not sure what you're trying to achieve there.
Here is an updated jsfiddle: http://jsfiddle.net/CM6fK/172/