Has anyone got any recommendations for a date input element with Polymer. Something more user friendly than a number of combobox's
The Polymer-Date-Picker project seems to have an issue with multiple input fields on the same page (which I have reported)
A possible starting point is wrapping an existing date-input field library within a Polymer element.
Here's a Live Demo wrapping Pikaday, a lightweight and configurable JavaScript datepicker, within a custom Polymer element.
Note the comments within the example's source code.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://www.polymer-project.org/platform.js"></script>
<!-- HTML import of the custom `pikaday-element` -->
<link rel="import" href="pikaday-element.html">
</head>
<body>
<pikaday-element></pikaday-element>
</body>
</html>
<!-- pikaday-element.html -->
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<polymer-element name="pikaday-element">
<template>
<link rel="stylesheet" href="https://rawgit.com/dbushell/Pikaday/master/css/pikaday.css">
<input type="text" id="datepicker">
<div id="container"></div>
</template>
<script src="https://rawgit.com/dbushell/Pikaday/master/pikaday.js"></script>
<script>
Polymer({
ready: function() {
var picker = new Pikaday({
// targets the #datepicker id within the shadow DOM.
field: this.$.datepicker,
// targets the #container id within the shadow DOM.
container: this.$.container,
// automatically show the datepicker on-load.
// note: when set to true, it flashes for a brief moment and then hides
bound: false
});
}
});
</script>
</polymer-element>
Since this is just a starting point, you can just configure the datepickers and settings as you see fit.
Big thanks to the Ampersand JS Toolkit for introducing me to Pikaday and to RawGit for hosting Pikaday assets.
Cheers!
Related
I want to be able to utilise #mention capability when inputting text into a form field. I have found the exact code to do it from this site jFiddle and it's awseom when you do it in there.
However, when I try to create an HTML page that incorporates the HTML and JavaScript together, it doesn't work, see below. Firstly, I had to go and find the complete link for jquery-3.2.1 because it couldn't be found and errored in console. Now it doesn't error but also doesn't work.
Where it says "any my favourite city is" you can type an # and then options London, Stuttgart and Köln should display which is triggered by the script.
<html>
<head>
<div id="inputcity" contenteditable="true">and my favourite city is </div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
// Initialize city field within content editable
$('#inputcity').atwho({
at: "#",
data:['London', 'Stuttgart', 'Köln']
});
</script>
</head>
</body>
</html>
You need to add this scripts to your code:
<link rel="stylesheet" href="https://cdn.rawgit.com/ichord/At.js/master/dist/css/jquery.atwho.css" />
<!-- jquery.js -->
<script src="https://cdn.rawgit.com/ichord/Caret.js/master/dist/jquery.caret.min.js"></script>
<script src="https://cdn.rawgit.com/ichord/At.js/master/dist/js/jquery.atwho.min.js"></script>
Here's working example.
<div id="inputcity" contenteditable="true">and my favourite city is </div>
<link rel="stylesheet" href="https://cdn.rawgit.com/ichord/At.js/master/dist/css/jquery.atwho.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.rawgit.com/ichord/Caret.js/master/dist/jquery.caret.min.js"></script>
<script src="https://cdn.rawgit.com/ichord/At.js/master/dist/js/jquery.atwho.min.js"></script>
<script>
// Initialize city field within content editable
$('#inputcity').atwho({
at: "#",
data: ['London', 'Stuttgart', 'Köln']
});
</script>
Because of the package you're using (At.js) is not maintained anymore you could use tribute package.
Your code contained a couple of syntax errors (unclosed tags, mostly). I cleaned it up and cobbled this together:
<html>
<body>
<div id="inputcity" contenteditable="true">and my favourite city is </div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.4.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ichord/At.js#master/dist/css/jquery.atwho.min.css">
<script src="https://cdn.jsdelivr.net/gh/ichord/At.js#master/dist/js/jquery.atwho.min.js"></script>
<script>
// Initialize city field within content editable
$('#inputcity').atwho({
at: "#",
data: ['London', 'Stuttgart', 'Köln']
});
</script>
</body>
</html>
Two caveats, though: At.js is unmaintained, and relying on the version on the master branch is something I did for convenience. In production, you'd use something that is supported (the author recommends ZURB Tribute), and use a proper package manager.
I am fairly new to CSS and javascript. I have been trying to implement the Tagging system as provided in Taggle.js (http://sean.is/poppin/tags).
Using this script :
<html>
<body>
Hello!! <br>
<form id="form1" action="http://127.0.0.1:5000/post">
<fieldset>
Tags:
<div id ="freeTags" ></div>
<p id='tag'></p><br><br>
</fieldset>
</form>
<script src="./node_modules/taggle/assets/js/taggle.js"></script>
<script>
var text = document.getElementById('tag');
new Taggle('freeTags', {
onTagAdd: function(event, tag) {
text.innerHTML = "You just added " + tag;
},
onTagRemove: function(event, tag) {
text.innerHTML = "You just removed "+ tag;
},
duplicateTagClass : "bounce"
});
</script>
</body>
</html>
I am unable to get the same effect as on the website (fancy text box) instead what I have been getting is this:
And it is also not implementing the 'bounce' function although I installed bounce.js using bower.
I think it must be the issue of CSS linkage to HTML. Can any one help in untangling this issue?
The documentation for taggle says the bounce effect is handled by the taggle.css file ... which your code example above doesn't include. Suggest this file also deals with styling of the elements youve said are missing. So just link this file in your document and re - test.
Find the CSS file in the repo you link to above the folder assets/css/ (find here), and save either taggle.css or taggle.min.css (for production) to your server and add the following to your page immediately after the <html> opening tag...
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/taggle.min.css">
</head>
<body>
<!-- your content... -->
</body>
</html>
Before I created my custom Polymer element :
<polymer-element name="my-custom-element" attributes="key" hidden>
<script>
Polymer({});
</script>
</polymer-element>
I would like to pass an attribute to my imported hidden custom Polymer element when I import it on an other custom Polymer element like this :
<link rel="import" href="../my-custom-element/my-custom-element.html" key="15">
How could I do ? It is possible to do this ? If not what is the good way ?
As wirlez pointed out, you'll want to import your element's definition, create an instance, and set the key value as an attribute.
For example:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer</title>
<script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<!-- import element definition from jsbin -->
<link rel="import" href="http://jsbin.com/mojadu.html">
</head>
<body>
<x-foo key="42"></x-foo>
</body>
</html>
element definition
<!-- Make sure your element imports Polymer as a dependency -->
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<polymer-element name="x-foo" attributes="key" hidden>
<template>
<h1>Hello from x-foo</h1>
<h2>The key is {{key}}</h2>
</template>
<script>
Polymer({
keyChanged: function(oldVal, newVal) {
console.log('the key is', newVal);
}
});
</script>
</polymer-element>
Here's the example running in jsbin.
If you look in the console, you'll see the element is logging the value for key.
If you're trying to access the element using JavaScript in index.html you may need to wait for the polymer-ready event before manipulating it.
ex:
document.addEventListener('polymer-ready', function() {
var el = document.querySelector('x-foo');
// do something with x-foo that involves its key
});
To pass a custom attribute you need a custom element. The tag "link" is no custom element. To create your own custom-elements and implement them to your web-application read this.
If you haven't already, follow the whole tutorial :)
Edit:
An import of a custom element is not the same as using it. What you can do it that you import your custom element then write the tag with specific attributes.
<my-custom-element key="15"></my-custom-element>
Much like core-ajax is used:
<core-ajax
auto
url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"
on-core-response="{{handleResponse}}"></core-ajax>
It seems like you want to have it like this:
<link
rel="import"
href="../core-ajax/my-custom-element.html"
auto
url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}'
handleAs="json"
on-core-response="{{handleResponse}}"></link>
Sorry that is not how Polymer works!
lets say this is you polymer file:
<polymer-element name="my-custom-element" attributes="key" hidden>
<script>
Polymer({});
</script>
</polymer-element>
and this is your link importing the file in your html:
<link rel="import" href="../my-custom-element/my-custom-element.html" key="15">
there's a couple of ways to do what you ask...
if you wish to create that value dynamically then the best way is to create a constructor for the custom element like this:
<polymer-element name="my-custom-element" constructor='MyCustomElement' attributes="key" hidden>
<script>
Polymer({});
</script>
</polymer-element>
then create an instance of such element on the code of the polymer element, something like:
var custom = new MyCustomElement();
place that element into your DOM like:
var dom = document.querySelector('otherElement'); //depending on scope
dom.appendChild(custom);
custom.setAttribute('atribute', value);
or
this.$.elementID.appendChild(custom);
custom.setAttribute('atribute', value);
I hope this is somewhat what you're looking for. cheers
I'm trying to implement the features from this site. But my code isn't alerting anything when I click on the x-foo element. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
</head>
<body>
<script type="text/javascript">
var xFoo = document.createElement('x-foo');
var xFoo = new XFoo();
document.body.appendChild(xFoo);
xFoo.onclick=function(){alert("It works!")};
</script>
<x-foo>
Test
</x-foo>
</body>
</html>
Any suggestions? (I'm on Chrome)
It looks like you're trying to create a Custom Element but you haven't registered it yet. To create your own XFoo element would look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Custom Element</title>
</head>
<body>
<!-- Create a template for the content inside your element -->
<template>
<h1>Hello from XFoo</h1>
</template>
<!-- Register your new element -->
<script>
var tmpl = document.querySelector('template');
var XFooProto = Object.create(HTMLElement.prototype);
XFooProto.createdCallback = function() {
var root = this.createShadowRoot();
root.appendChild(document.importNode(tmpl.content, true));
};
var XFoo = document.registerElement('x-foo', {
prototype: XFooProto
});
</script>
<!-- Use the element you've just registered as a tag -->
<x-foo></x-foo>
<!-- OR, create an instance using JavaScript -->
<script>
var el = document.createElement('x-foo');
document.body.appendChild(el);
</script>
</body>
</html>
Unfortunately this approach depends on native APIs which currently only ship in Chrome 34. As someone else mentioned, a much easier approach to creating your own custom element would be to use Polymer. Polymer is a library that adds support for Web Components (essentially what you're trying to build) to all modern browsers. That includes IE 10+, Safari 6+, Mobile Safari, current Chrome and current Firefox.
I've put together a jsbin which shows how to create your own x-foo element using Polymer.
You should try viewing the following article:
http://www.polymer-project.org/
It's an open source Github project. I actually tried that article, but don't recommend it. Instead, use the link given above. It uses Ajax and JSON.
I'm working on some code that uses custom attributes on DOM nodes. These are necessary for particular logic that is used. The custom attributes are set on input elements such as dropdowns and text input fields and are of the format...
<input type="text" myCustomId="blah"...
This all works fine with standard HTML inputs. However, we are looking to use some Dijit widgets in place of the standard inputs to achieve a specific look & feel.
The DOM is parsed onLoad and the widgets are loaded (we set data-dojo-type to specify the widget).
The problem is Dojo/Dijit doesn't preserve the custom attributes. They get lost in the parsing.
Is it possible to specify custom attributes that a Dijit widget should use?
Edit:
Heres some sample HTML that highlights the problem. The "custom" attribute is being lost...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"> </script>
<script>require(["dojo/parser", "dijit/form/TextBox"]);</script>
</head>
<body class="claro">
<label for="firstname">Test: </label>
<input type="text" name="firstname" custom="test" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true" id="firstname" />
</body>
</html>
I found a solution based on this article...
http://dojotoolkit.org/features/1.6/html5data-attributes
Essentially if I add "data-" in front of our custom attributes, the dojo parser preserves the custom attribute in the widget. It doesn't place the attribute on the top most node of the widget but it does enough for us to look it up
Try use data-dojo-props='urCustomID=XXX', then you could obtain it by get("urCustomID").
the custom attributes added are retained by the widgets indeed. But, they are case-insensitive. According to the example you provided in your question, try accessing it by,
registry.byId('field_id').get('mycustomid')
or
dijit.byId('field_id').get('mycustomid')
Let me give a simple example:-
<script type='text/javascript'>
dojo.require("dijit.form.TextBox");
function func() {
alert(dijit.byId('namefld').get('customid'));
}
</script>
</head>
<body class="claro">
<input type="text" customId='mango' dojoType="dijit.form.TextBox" id="namefld" name="namefld"/>
<button onclick='func()'>click</button>
</body>