polymer

Slides Viewer: HTML5 Web Component

One of my experiments with atypical uses of radio buttons I blogged about sometime ago was the CSS3 Driven Slides Viewer Without any JavaScript, and soon after it was published, became one of my most popular posts, but busy with other stuff I never took the time to extend or improve it. Until yesterday, when I decided to rework it as a HTML5 Web Component as part of my recent amusement with this new and exciting aspect of HTML5.

The result is that now users could easily create a full-blown slides viewer just by utilizing this simple markup:

<acidjs-xslides>
    <acidjs-xslides-slide>Slide content - simple text or complex HTML</acidjs-xslides-slide>
    <acidjs-xslides-slide>Another slide content - simple text or complex HTML</acidjs-xslides-slide>
    <acidjs-xslides-slide>Yet another - simple text or complex HTML</acidjs-xslides-slide>
</acidjs-xslides>

You can check the demo and download X-Slides on my Experiments and Insight website, and if you are interested in HTML5 Web Components, X-Tags or Google Polymer, you will probably find inspiration in my other endeavours with this technology.

Advertisements

X-NotificationsBar: HTML5 Web Component

Just finished my new endeavour in the amazing world of HTML5 Web Components, called X-NotificationsBar and based on an earlier CSS3-only driven solution. Here’s how to use it, after you check the demo and eventually download it:

<acidjs-x-notifications-bar bgcolor="#016fba" expanded="true" message="random" loop="5000">
    <acidjs-x-notifications-bar-message>
        HTML5 Web Components enable truly encapsulated and reusable components for the web. 
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        You can browse the other examples of HTML5 Web Components on <a href="http://experiments.wemakesites.net/html5-web-components.html" target="_blank">this page</a>.
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        More info regarding this exciting new technology: 
        <a href="http://webcomponents.org/" target="_blank">WebComponents.org</a>,
        <a href="http://polymer-project.org/" target="_blank">Google Polymer</a>,
        <a href="http://x-tags.org/" target="_blank">Mozilla X-Tag</a>.
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        <p>If you like this solution, you can also check my 
        <a href="http://wemakesites.net/" target="_blank">personal wesbite</a>, 
        <a href="http://semtex.wemakesites.net/" target="_blank">Semtex UI Framework</a>, 
        <a href="http://acidjs.wemakesites.net/" target="_blank">Acid.JS Web.UI</a>, 
        <a href="https://acidmartin.wordpress.com/" target="_blank">my blog</a>,
         follow me on <a href="https://twitter.com/wemakesitesnet" target="_blank">Twitter</a> 
         or consider a <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=QFUHPWJB2JDBS" target="_blank">donation</a>.</p>
    </acidjs-x-notifications-bar-message>
    <acidjs-x-notifications-bar-message>
        If you prefer a pure CSS3 solution of this example, you will 
        <a href="http://experiments.wemakesites.net/css3-hello-bar.html" target="_blank">find it here</a>.
    </acidjs-x-notifications-bar-message>
</acidjs-x-notifications-bar>

x-notifications-bar-html5-web-component

The <acidjs-x-notifications-bar></acidjs-x-notifications-bar> Tag Attributes:

  • bgcolor – Optional background color. Default value: “#e34c26”.
  • expanded – Boolean, optional. Default: “true”.
  • message – Zero-based index or “random”. “0” means that the content of the first <acidjs-x-notifications-bar-message> will be set. If “random” is set, a random message will be displayed. Default: “0”
  • loop – Optional timeout in milliseconds for looping messages. Default null.

The <acidjs-x-notifications-bar-message></acidjs-x-notifications-bar-message> Tag:

It should be used to set messages to the notifications bar, one message at a time. The tag does not support any attributes and accepts any HTML.

Have fun and enjoy the weekend!

X-Password: HTML5 Web Component Input on Steroids

Just finished my new experiment with HTML5 Web Components and Mozilla X-Tags, called X-Password. What you get is a JavaScript-less extended password input, allowing Windows 8-like password reveal behavior out of the box:

<acidjs-xpassword></acidjs-xpassword>

x-password

The input supports all JavaScript getters, setters, events and form submission is handled natively. X-Password does not have any required attributes, but to achieve different behaviors you may play with the following (and also any other HTML attribute).

  • width – Optional input width, default: 300
  • name – Optional input name
  • id – Optional input id
  • enabled – Boolean, optional. Default: true
  • editable – Boolean, optional. Default: true
  • placeholder – Placeholder text, optional.
  • value – Optional default value
  • buttonhint – Optional tooltip for the reveal button
  • visible – Optional, boolean. If set to true, the input will be rendered as text type

You can check the demo and download X-Password on this page, and if you are interested in the exciting world of HTML5 Web Components, you may check my other posts dealing with this technology.

Have a great weekend!

HTML5 Web Component for Embedding YouTube Videos

Continuing the experiments with HTML5 Web Components I started a few weeks ago, I am happy to present my latest endeavor – HTML5 Web Component, which can be used to embed YouTube videos as a custom tags:

<acidjs-youtube videoid="wvHsX2lSW64"></acidjs-youtube>

youtube-video-html5-web-component

The component utilizes YouTube’s embedding API, and all of the parameters are supported as HTML attributes. Only videoid is required, the rest in the list are optional:

  • videoid – ID of the video (required), as in the url: https://www.youtube.com/watch?v=wvHsX2lSW64
  • width – Player width (optional). Default: 640
  • height – Player height (optional). Default: 390
  • theme – Player theme (optional) “dark” or “light”. Default: “dark”
  • showinfo – Display author and uploader info (optional) – 0 or 1. Default: 1
  • loop – Continuously play the video (optional) – 0 or 1. Default: 0
  • end – The time, measured in seconds from the start of the video, when the player should stop playing the video (optional). Default: 0
  • autoplay – Video auto play (optional) – 0 or 1. Default: 0
  • autohide – Indicates whether the video controls will automatically hide after a video begins playing (optional) 0 or 1 or 2. Default: 2
  • rel – Show related videos when playback of the initial video ends (optional) – 0 or 1. Default: 0.
  • enablejsapi – Make the JavaScript API available (optional) – 0 or 1. Default: 1

Here’s a link to the demo and to the code in case you want to play with it. If you are interested in the relatively new technology of HTML5 Web Components you may want to check my other posts related to this topic.

Enjoy and thanks for stopping by!

HTML5 Web Component Widgets for Displaying Movie Data from IMDb

A few months ago I designed and developed this RESTFul API for extracting movie data from IMDb with a couple of methods, and I am happy that a lot of people actually found it useful. In a number of occasions I was contacted regarding the availability of any easy to use on our websites widgets, which utilize the data from IMDb Fetcher, and this eventually lead to the creation of the first one.

I implemented it as a reusable HTML5 Web Component *, and it’s usage is simple as using HTML tags, like:

<acidjs-imdb-movie
    movie="WarGames"
    renderposter="true"
    mode="compact">
</acidjs-imdb-movie>

The service is hosted on imdb.wemakesites.net, and in order to use he acidjs-imdb-movie tag you need to register it’s run time on your page:

<script src="http://widgets.imdb.wemakesites.net/1.0/"></script>

As the widget requires jQuery, and you may already have it on your website you may register just the rest of the code required to run the tag like:

<script src="http://widgets.imdb.wemakesites.net/1.0/?jquery=false"></script>

The widget comes in three different sizes:

Full

acidjs-imdb-movie-full

Compact

acidjs-imdb-movie-compact

Minimal

acidjs-imdb-movie-minimal

In regards to the configuration of the tag, you  have the following attributes:

  • movie – required. Its value is the name of the movie, against which will be queried the API.
  • mode – optional. Here you can set the size of the widget. You have “full“, “compact” and “minimal“. If no value is set, the widget will render in full view.
  • renderposter – optional Boolean. Default is true. If set to false, the widget will be rendered without poster.

The acidjs-imdb-movie tag utilizes localStorage, so once movie data is loaded on the client, it is stored locally in the browser for later usage. For the next version I am planning to store the poster image as base-64 URI, but first I need to find a workaround for the security restriction of canvas and cross-domain scripting. To view the locally stored widget data, use your browser’s console like this:

window.localStorage.getItem("acidjs-movie-data");

To delete locally stored widget data, type the following in your browser’s console:

window.localStorage.removeItem("acidjs-movie-data");

Have a great weekend and thanks for reading! For more HTML5, CSS3 and JavaScript stuff, check my website or follow me on Twitter!

* Recently I dived into the amazing world of HTML5 Web Components, and maybe you will find interesting my other endeavors in this direction.

 

New HTML5 Web Component – AcidJs-X-AJAX

Continuing my explorations in the amazing field of HTML5 Web Components, which I started last week, I am happy to present my new endeavor:

x-ajax-html5-web-component

AcidJs-X-AJAX is a lightweight custom tag, capable of making asynchronous server calls with (almost) no coding client-side. Again, it is built on top of Mozilla’s X-Tags library, and looks like that:

<acidjs-xajax
    url="data/person.php"
    action="get"
    params='{"firstName": "Martin", "lastName": "Ivanov", "id": 1234567890}'
    datatype="json"
    id="ajax-panel-01"
    auto="true">
</acidjs-xajax>

Unlike AcidJs.XCheckbox, AcidJsXAjax is not a visual component, but it’s applications are numerous for example – in MV* applications or just pure old AJAX rendering.

Apart from the standard HTML attributes like id, class, data-* etc, here are a few, which are specific to the tag itself:

  • url – the request URL (optional)
  • action – the HTTP method (optional, default is GET)
  • params – query parameters in the form of a JSON object
  • datatype – response type (default is text/plain)
  • id – the ID of the panel
  • auto – if set to “true”, the AJAX call will be executed right after the tag is added to the page.

These properties are also standard getters and setters, so you could do:

document.querySelector("#ajax-panel-01").url;
document.querySelector("#ajax-panel-01").url = "path/to/resource/";

AcidJsXAjax comes also with an easily extensible API and custom events:

  • load()
  • getResponseData()
  • success
  • error

The demo of the component and also it’s code and download link are available on this page.

X-Checkbox – Custom HTML5 Web Component

People who follow this blog (cheers, mates!) and my fellow co-workers know that I am interested in the form control styling, and especially that of check boxes and radio buttons. Over the years I have come up with a number of different solutions, but finally I found the time to start experimenting with the new and exciting world of the HTML5 Web Components. This is my first attempt to create a custom web component – a custom check box, built on top of Mozilla’s X-Tag library. The reason I did not use Google Polymer is just because I started playing with X-Tags, but certainly in the near future I will utilize Polymer.

So here it is – as easy as <acidjs-xcheckbox></acidjs-xcheckbox>, supporting native getters, setters and native properties (checked, disabled, class, etc.) as well as any other custom attributes, form submission without additional check box manipulation, keyboard events plus a couple of additional methods for toggling the enabled and checked states.

Since Shadow DOM is not consistent across browsers yet, the gory guts of the component will reveal a simple check box, wrapped in a label. The look and feel has been achieved with CSS3. Tested on Firefox and Chrome, but supposedly should work on other modern browsers plus IE11.

x-checkbox-custom-web-component

Have nice weekend and greetings from sunny Malta!