I am trying to use Vaadin 8 's "Html Import" feature
i followed instructions here : What's New In Vaadin 8
you can check it at 10th feature.
i am also sure that i installed both polymer-cli and bower.As GameCard creator mantioned at his own github.
But when run the application "the cards" are loading but not the way as it should.Mines have no flipping animation and kind a looks bad.
Screenshot :
Update After Gerald's Solution.
Finally Works with the Right Version of Polymer.
Seems to be a problem with the game-card element and the latest version of Polymer. I opened an issue on GitHub. Try with the version I used when I developed the demo. Find it here. Just replace your bower_components directory with the one in my demo.
initialize rank and symbol in different order (set rank first):
GameCard = function () {
var element = this.getElement();
this.setCard = function (symbol, rank) {
element.set("rank", rank);
element.set("symbol", symbol);
};
};
Related
Does the Electron application framework have built-in text search?
The quick-start application doesn't provide any apparent search functionality (e.g. using Ctrl-F or from the menu options). I would have expected this to be a BrowserWindow option (or an option of its WebContents), but I don't see anything helpful in the docs.
I know this is an old thread, but might still be relevant for people out there.
Had the same problem, and first fixed by using electron-in-page-search, but this component doesn't work properly with Electron 2 or greater.
Then finally found electron-find resolved my problem. Using with Electron 4.
You just add the component to your project:
npm install electron-find --save
Add a global shortcut in your Electron main process to send an event to the renderer in a ctrl+f:
globalShortcut.register('CommandOrControl+F', () => {
window.webContents.send('on-find');
});
And then you can add this to your page (the renderer process)
const remote = require('electron').remote;
const FindInPage = require('electron-find').FindInPage;
let findInPage = new FindInPage(remote.getCurrentWebContents());
ipcRenderer.on('on-find', (e, args) => {
findInPage.openFindWindow()
})
Hope that helps.
Try webContents.findInPage just added in the latest version.
There is an issue with the solution Robson Hermes offered. globalShortcut is, by definition, global, so the shortcut will be detected even when the app is not focused. This will result in the Ctrl+F shortcut being "stolen" from everywhere else.
I have found no ideal solution (see this issue on the electron repository), but a hacky one can be achieved by doing what Robson said and adding
win.on('focus', () => {
globalShortcut.register('CommandOrControl+F', () => windows.main.send('on-find'))
})
win.on('blur', () => {
globalShortcut.unregister('CommandOrControl+F')
}
Note that as seen here, this is not ideal and can lead to several issues:
Other applications can get a lock on the shortcut when you lose focus, i.e. the shortcut will magically stop working when you switch back to the app later.
Some apps can appear on screen without taking focus (spotlight I believe has this behavior) and during the app's appearance the shortcuts will still be captured by your application.
There's also gonna be those weird one in a thousand situations where somehow you switch focus and the shortcut is not removed.
Instead of using global shortcuts , use Accelerators ( normal Keyboard shortcut )
{
label : 'help',
click : function(){.
electron.shell.openExternal('http://....').
},
accelerator : 'CmdOrCtrl+ Shift + H'
}
The above shown is just an example of How to use accelerator
I have a Cordova application running on Windows 10 (UWP) and I am using Visual Studio 2017 to build the Cordova project.
The hosted window has an arrow in the title bar that I am trying to remove.
Here is a picture of what I am talking about:
I saw another question on StackOverflow that had an accepted answer to use the following code:
if (cordova.platformId == "windows")
{
var currentView = Windows.UI.Core.SystemNavigationManager.getForCurrentView();
currentView.appViewBackButtonVisibility = Windows.UI.Core.AppViewBackButtonVisibility.collapsed;
}
However, this does not work for me.
I perform the check after DeviceReady and the cordova.platformId does indeed equal "windows" which is fine.
How does the JavaScript code execute the Windows.UI.Core.SystemNavigationManger namespace? I understand it is a UWP namespace as per the following link,
Windows.UI.Core.SystemNavigationManger, but where is this defined and accessible by the JavaScript code? Is there a 3rd party Cordova plugin I am missing?
I had the same problem. I was able to fix it by putting the following code in the render of my first component:
if (window.cordova && window.cordova.platformId === "windows")
{
console.log("Disabling back button")
var currentView = window.Windows.UI.Core.SystemNavigationManager.getForCurrentView();
currentView.appViewBackButtonVisibility = window.Windows.UI.Core.AppViewBackButtonVisibility.collapsed;
}
I'm writing a proof of concept Polymer 2.0 web component where I want to change the colour of a piece of text depending on the user input.
I've tried using Polymer 2.0's this.updateStyles({...}) and Polymer.updateStyles({...}) but neither is updating the text which is output.
e.g.
Polymer.updateStyles({'--tool-colour': 'green'});
I've written a plunker which demonstrates the problem here.
I'm probably missing something simple, can someone help me out?
I do it like this myself:
<template>
<style>
.green-icon {
color: var(--green-color);
}
.red-icon {
color: var(--red-color);
}
</style>
<my-element class$="[[computeIconColor(boolProp)]]"></my-element>
</template>
then in the script:
computeIconColor(boolProp) {
if (!!boolProp) return 'green-icon';
return 'red-icon';
}
The "problem" is as Jordan Running stated that your webcomponentsjs is not loading.
The real thing is that you can't use updateStyles without webcomponentsjs which is rather unfortunate as there are situations where you probably won't need it at all.
In this case you could do
this.setAttribute('style', '--tool-colour: red');
but then again this won't work in browsers needing webcomponentsjs.
what I ended up doing create an behavior that either uses setAttributes (with merging for styles) or updateStyles depending on what is available. It code looks like this.
if (!window.ShadyCSS || (window.ShadyCSS && window.ShadyCSS.nativeCss === true)) {
var newStyleString = '';
for (var key in newStyle) {
if (newStyle.hasOwnProperty(key)) {
newStyleString += key + ': ' + newStyle[key] + ';';
}
}
this.setAttribute('style', newStyleString);
} else {
ShadyCSS.styleSubtree(this, newStyle);
}
So for usage I just write this.updateStyles({'--tool-colour': 'green'}); as my behavior overwrites updateStyles.
The full code you can find here
https://github.com/daKmoR/grain-update-inline-style-behavior.
It's a little more as it also adds support for inline styles on IE11.
As Jordan Running commented, the problem was due to missing dependencies. I'd written code in an online editor (Plunker) assuming that all I needed to get polymer working was a reference to 'webcomponents-loader.js' and links to the other web components my bespoke component was using (doh!).
To get my Polymer element working I used the Polymer CLI facility provided by the Polymer team (specifically I used this for creating a Polymer element template project).
When I then used:
polymer serve
To run a local webserver to "serve" the app which was using my Polymer element, the dependencies then got resolved properly and the element worked.
How can I set up JSFiddle to work with CoffeeScript and React?
I would like to code React examples using CoffeeScript and expect it to run.
I've tried setting the language to CoffeeScript on the left sidebar, and including the React libs, but that does not work.
Any pointers on how I could get Coffee+React to work with JSFiddle?
From <script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>, which is included in the playground:
(function() {
var tag = document.querySelector(
'script[type="application/javascript;version=1.7"]'
);
if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
}
tag.setAttribute('type', 'text/jsx;harmony=true');
tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
})();
The reason is that you are using the playground with jsx, and as FB restricted the setting to JS 1.7 I guess they are using Babel to compile it down to js.
So if you use the non-jsx link, and change the syntax to Coffee and modify the JS/CS file, you are good to go.
Here is a working copy: https://jsfiddle.net/9gnkLgex/
I am using sigma.js along with angular js to build my visualization web app.
Problem statement: I have written code in such a way that when filter criteria changes, filter module will be triggered to filter out nodes based on user selection(see code below).But, Initially for the first time filter works fine without any issue, but later on it doesn't seem to be working. It looks like it is not executing the filter predicate at all.
I tried below possible ways, but couldn't resolve the issue.
1) Destroyed and recreated the filter object for every data change trigger.
2) Unregistered and registered filter predicate.
code snippet:
scope.$watch('filtersettingdata',function(){
s = new sigma({
graph: scope.data['mdata'],
container: element.elementid,
renderer: {
container: document.getElementById(element.elementid),
type: 'canvas'
},
settings: filtersettingdata
});
var filter = new sigma.plugins.filter(s);
filter.nodesBy(
function(n) {
//predicate with new filter values
},'filter_name').apply();
s.refresh();
}
any help/suggestions will be really appreciated.
Thanks in advance.
I'm the author of this plugin.
It is out-dated in the official sigma repository and I don't think it will work with Angular as it is.
It is now released under dual license GNU GPLv3 + commercial here: https://github.com/Linkurious/linkurious.js/tree/linkurious-version/plugins/sigma.plugins.filter
This version works with Angular and I've successfully used it in the projects of my company.
Disclaimer: I work at Linkurious SAS.