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
Related
I'm using gapi.signin2.render to create a custom Google Sign in button in Angular. The same code worked in another project previously but it's not working now and can't figure out why.
My code looks like this
index.html
<meta name="google-signin-client_id" content="xxx.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>
...
<div ng-controller="loginController">
<google-sign-in-button button-id="uniqueid" options="googleOptions"></google-sign-in-button>
</div>
loginController.js
function loginController($scope, $rootScope) {
$scope.googleOptions = {
'width': 200,
'height': 50,
'theme': 'dark',
'onsuccess': success,
'onfailure': function () {
console.log('failed');
}
}
console.log($scope.googleOptions); //prints out options
}
function success(response) {
var AUTH_TOKEN = response.getAuthResponse().id_token;
$rootScope.AUTH_TOKEN = AUTH_TOKEN;
console.log('Google token successfully retrieved for user ->', $rootScope.AUTH_TOKEN);
}
and the directive:
function googleSignInButton() {
return {
scope: {
buttonId: '#',
options: '&'
},
template: '<div></div>',
link: function (scope, element, attrs) {
var div = element.find('div')[0];
div.id = attrs.buttonId;
// console.log(`div.id --> ${div.id}`);
console.log(`Google options inside google sign in directive: ${scope.options()}`);
console.log(scope.options());
console.log('div.id->',div.id);
gapi.signin2.render(div.id, scope.options()); //render a google button, first argument is an id, second options
// debugger;
}
};
}
I found this code snippet from this post a while ago and it worked just fine. I don't know why it's not hitting the callbacks now.
See my answer here:
https://stackoverflow.com/a/41420497/7363750
You should already know about this kind of secure authentication or you never think about it,
and it is not documented by google :)
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>
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>
I'm trying to adding rtl-ltr support for my application .
here is the question : assume that there is input like this :
<span class="sp-right">
<label>
Number:
</label>
</span>
is it possible to change all sp-right class to sp-left programmatically ?
is it a good idea in ltr and rtl support in angular ?
Thanks
With jQuery
$(".sp-right").each(function(){
$(this).removeClass("sp-right").addClass("sp-left");
});
Above code will run once only in code sequence. Put it in event listening function like:
$("button.trigger").click(function(){
$(".sp-right").each(function(){
$(this).removeClass("sp-right").addClass("sp-left");
});
});
Then it will run when event trigger.
Or you can build a directive. I am writing for you
_module.directive("spRight", function () {
return {
restrict: 'C',
link: function (scope, element, attrs) {
element.removeClass("sp-right").addClass("sp-left");
}
};
});
UPDATE:
app.directive("buttonThatTrigger", function () {
return {
restrict: 'C',//target all elements with class button-that-trigger
link: function (scope, element, attrs) {
element.click(function(){
$(".sp-right").each(function(){
$(this).removeClass("sp-right").addClass("sp-left");
});
});
}
};
});
Then add a class in button:
<button class="button-that-trigger"></button>
One more approach. Instead of changing multiple classes on the page (although it's not that difficult), it's much more reasonable to change only one class on the top level of the application container and from there manage all the classes with CSS.
For example:
<span class="sp-direction">
<label>Number:</label>
</span>
In CSS
.sp-direction {
direction: ltr; /* default text direction */
}
.sp-right .sp-direction {
direction: rtl;
}
.sp-left .sp-direction {
direction: ltr;
}
Now all you need to do is to change sp-right/sp-left classes on say body tag:
<body class="sp-{{spClass}}">
And in any controller:
$rootScope.spClass = 'left';
$rootScope.spClass = 'right';
[SOLVED]
I created a simple SVG directive using angular 1.3-beta which features a "type: 'svg'" for directive. The code is straightforward (see Plunker http://plnkr.co/edit/vgElXdWXvfH0faH0qKHk?p=preview - updated with solution):
Create a SVG element containing a square
when the square is clicked, a class is added to it (fill with red)
ISSUE: the class is correctly added to the SVG square element but it is ignored and the square remains black.
Here is the js part:
var app = angular.module('app', [])
.directive('svgDirective', function () {
return {
template: '<svg xmlns:xlink="http://www.w3.org/1999/xlink"> <g ng-transclude> </g> </svg>',
transclude: true,
type: 'svg',
replace: true
};
})
.directive('svgSquare', function() {
return {
template: '<rect width=100 height=100></rect>',
type: 'svg',
replace: true,
link: function (scope, element, attrs) {
element.on('click', function () {
element.addClass("selected");
});
}
};
});
and the CSS:
.selected {
fill: '#f00'; --> SOLUTION: no quotation mark: fill: #f00;
}
Your CSS file contains an error. You specified the fill color in quotation marks where there should be none. Replace the CSS with the following code and your example is working as intended:
.selected {
fill: #f00;
}
Also note that if you use jQuery as your AngularJS backend, adding CSS classes might be impossible (see this question)