Can I use Polymer on JSFiddle? - javascript

I want to create quick prototypes of Polymer elements in a sandbox like JSFiddle or JavaScript Bin, but I can't get it working!

Yes, you can, thanks to polygit.
Here's a boilerplate example you can fork: https://jsfiddle.net/kaycebasques/2q3fqehz/
HTML:
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<dom-module id="x-example">
<template>
<style>
:host {
display: block;
}
</style>
<h1>polyfiddle</h1>
</template>
</dom-module>
<x-example></x-example>
JS:
// only need this when in the main document and on non-Chrome
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-example'
});
});

Related

Make the command bar unresponsive

I want to use office-ui-fabric with angularjs, so I am trying to use ng-office-ui-fabric.
In the following example, when the wide of the screen is limited, we can observe that the span (eg, 3rd, 14) are hidden. This is not what I want; I want them to be always displayed no matter the width of the screen.
Does anyone know how to make the command bar unresponsive?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script>
</head>
<body ng-app="YourApp">
<div ng-controller="YourController">
<uif-command-bar>
<uif-command-bar-main>
<uif-command-bar-item>
<uif-icon uif-type="save"></uif-icon>
<span>3rd</span>
</uif-command-bar-item>
<uif-command-bar-item>
<span>14</span>
<uif-icon uif-type="chevronDown"></uif-icon>
</uif-command-bar-item>
</uif-command-bar-main>
</uif-command-bar>
</div>
<script type="text/javascript">
angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
.controller('YourController', function () {})
</script>
</body>
</html>
By default the text is set to not display in the css. Ie:
CommandBarItem .ms-CommandBarItem-commandText {
display: none;
}
Then they using media queries to only show those elements when the width is over 640px
ie:
#media only screen and (min-width: 640px)
fabric.components.min.css:6
.ms-CommandBarItem .ms-CommandBarItem-chevronDown, .ms-CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
You could override their styles by supplying your own that don't use media queries and just be sure that your css loads after their css (so it takes precedence). ie:
CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
Here is a sample app demonstrating this. Note that I had to add the styles in the head tag inline in a style tag b/c of how the inline editor loads its assets. Normally you would just load your own custom css in a link tag (make sure its loaded last).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script>
<style>
.ms-CommandBarItem .ms-CommandBarItem-chevronDown,
.ms-CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
</style>
</head>
<body ng-app="YourApp">
<div ng-controller="YourController">
<uif-command-bar>
<uif-command-bar-main>
<uif-command-bar-item>
<uif-icon uif-type="save"></uif-icon>
<span>3rd</span>
</uif-command-bar-item>
<uif-command-bar-item>
<span>14</span>
<uif-icon uif-type="chevronDown"></uif-icon>
</uif-command-bar-item>
</uif-command-bar-main>
</uif-command-bar>
</div>
<script type="text/javascript">
angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
.controller('YourController', function() {})
</script>
</body>
</html>
This is how I figured this out. Using chrome dev tools, I right mouse clicked on the text and choose inspect. This shows the element and the styles associated with it. The default style was to have display: none; applied. When you resize the browser more than 640px wide, you'll see the media query being applied that now says to display: inline; the element.

How to build polymer app with some paper element example

I'am newbie in Polymer and Paper-Elements. I just make new blank polymer application, and try to run some example from paper-elements.
I created my blank polymer app using this.
Then I added paper-elements using bower - bower install --save PolymerElements/paper-elements
Then I copy paste this code:
<paper-input always-float-label label="Floating label"></paper-input>
<paper-input label="username">
<iron-icon icon="mail" prefix></iron-icon>
<div suffix>#email.com</div>
</paper-input>
So my whole element.html looks like this:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html" >
<link rel="import" href="/bower_components/paper-input/paper-input.html" >
<link rel="import" href="/bower_components/iron-icons/iron-icons.html" >
<dom-module id="allegro-combo-box">
<template>
<style>
:host {
display: block;
}
paper-input {
max-width: 400px;
margin: auto;
}
iron-icon, div[suffix] {
color: hsl(0, 0%, 50%);
margin-right: 12px;
}
</style>
<h2>Hello [[prop1]]!</h2>
<paper-input always-float-label label="Floating label"></paper-input>
<paper-input label="username">
<iron-icon icon="mail" prefix></iron-icon>
<div suffix>#email.com</div>
</paper-input>
</template>
<script>
/** #polymerElement */
class Mextends Polymer.Element {
static get is() { return 'my-element'; }
static get properties() {
return {
prop1: {
type: String,
value: 'my-element'
}
};
}
}
window.customElements.define(MyElement.is, MyElement );
</script>
</dom-module>
Unfortunately this code won't work. Only <h2>Hello [[prop1]]!</h2> is working, the elements from paper doesn't.
How to fix it?
I tried to add "async" in imports but this doesn't helped.
Please help.
This are some errors in console:
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
Uncaught TypeError: Cannot read property 'nativeMethods' of undefined
It looks like your import statements for the paper elements don't have the correct path. Try changing the path as follows:
<link rel="import" href="../../bower_components/paper-button/paper-button.html" >
<link rel="import" href="../../bower_components/paper-input/paper-input.html" >
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html" >

How to implement a paper-styled "<select multiple>" box with Polymer, without "paper-dropdown-menu"?

I'm working on a Polymer application that uses iron-form to submit a form to a back-end web-service. One of the elements in the form is a box where the user can select multiple elements.
Using the paper-dropdown-menu with a paper-listbox with multi set works, but the UX is horrible because the user can't see which elements are selected without opening the dropdown (and blocking other elements). Also - it requires more clicks to operate.
Ideally we'd just use the paper-listbox without the paper-dropdown-menu, as that is exactly the UI that we need - similar to HTML's classic <select multiple> but with a Material Design sheen. But without the paper-dropdown-menu wrapper, iron-form doesn't pick up on the paper-listbox selected values and will not submit those.
I've noticed that iron-form support classic HTML <select> (and even support the multiple behavior), but the UI for that is jarring in contrast with the rest of the form.
Is there something else that we can wrap around the paper-listbox to get the form to behave without modifying the original paper-listbox UI, or get paper-dropdown-menu to have an "always open" mode? If neither of those work (and I couldn't get either to work, BTW), what else can we do?
You could wrap the <paper-listbox> in a custom element that implements <iron-form-element-behavior>. The behavior exposes a value property, which could be bound to <paper-listbox>.selectedValues, allowing <iron-form> to submit the multiple listbox values:
<dom-module id="multi-listbox">
<template>
<paper-listbox multi selected-values="{{value}}">
<content></content>
</paper-listbox>
</template>
<script>
Polymer({
is: 'multi-listbox',
behaviors: [Polymer.IronFormElementBehavior]
});
</script>
</dom-module>
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
_onResponse: function(e) {
this._response = JSON.stringify(e.detail.response, null, 2);
},
_submit: function() {
this._response = null;
this.$.form.submit();
}
});
Polymer({
is: 'multi-listbox',
behaviors: [
Polymer.IronFormElementBehavior
],
properties: {
value: {
type: Array,
value: () => [],
notify: true
},
invalid: {
type: Boolean,
reflectToAttribute: true
}
},
validate: function() {
const isValid = !this.required || !!(this.value && this.value.length > 0);
this.invalid = !isValid;
console.log('invalid', this.invalid);
return isValid;
},
_clearError: function() {
this.invalid = false;
}
});
});
<head>
<base href="https://polygit.org/polymer+1.7.1/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="iron-validatable-behavior/iron-validatable-behavior.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
multi-listbox,
paper-checkbox,
paper-button {
margin: 0.5em;
}
</style>
<paper-checkbox active="{{_required}}">Required</paper-checkbox>
<form is="iron-form"
id="form"
action="//httpbin.org/get"
on-iron-form-response="_onResponse">
<multi-listbox name="listbox-values" required="[[_required]]">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
<paper-item>Item 3</paper-item>
<paper-item>Item 4</paper-item>
</multi-listbox>
<paper-button raised
on-tap="_submit">Submit</paper-button>
</form>
<pre>[[_response]]</pre>
</template>
</dom-module>
<dom-module id="multi-listbox">
<template>
<style>
:host {
display: block;
}
paper-listbox {
border: solid 2px lightgray;
}
:host([invalid]) paper-listbox {
border: solid 2px var(--error-color, red);
}
</style>
<paper-listbox multi
selected-values="{{value}}"
on-iron-activate="_clearError">
<content></content>
</paper-listbox>
</template>
</dom-module>
</body>
codepen

Referencing a CSS class with javascript

<html>
<body>
<head>
<style type="text/css">
#someClass {
color:red;
}
</style>
</head>
<div id="someClass"></div>
<script type="text/javascript">
alert(document.getElementById("someClass").style.color);
</script>
</body>
</html>
As you can see from my code I'm trying to figure out if I can reference a style attribute for a class that's defined in CSS, as opposed to directly in the tag's style attribute.
You're looking for window.getComputedStyle() - small usage example here.
alert(window.getComputedStyle(document.getElementById('someClass')).color);
#someClass {
color:red;
}
<div id="someClass"></div>

Should I write an implementation of a custom element whithin <body>?

Like the below code, the implementation of a custom element is imported.
And is naked, which means, the imported document has no body and head.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="import" href="html/demo-element.html">
</head>
<body>
<demo-element>hello world</demo-element>
</body>
</html>
demo-element.html
<template>
<style type="text/css">
div {
background-color: #F2CEE5;
padding: 10px;
}
</style>
<div>
<content></content>
</div>
</template>
<script type="text/javascript">
(function() {
var thisDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var t = thisDoc.querySelector('template');
var clone = document.importNode(t.content, true);
this.createShadowRoot().appendChild(clone);
}
}
});
var element = document.registerElement('demo-element', {
prototype: proto
});
})();
</script>
I want you see the below which is the result which chrome dev tool shows.
The imported document has head and body and the implementation is in head somehow.
I want to know if this is common or I should write head and body in demo-element.html and put the implementation in the body.

Categories

Resources