Tag Archives: html5 webcomponents

Corporate BS Generator HTML5 WebComponent

Nothing serious this time, just a small fun HTML5 WebComponent, inspired by BS Generator, stitching-up (bullshit) sentences out of random buzzwords:

thumb

Usage:

<acidjs-xbsgenerator></acidjs-xbsgenerator>

The component does not have it’s own methods, setters, getters or styles. Just use the tag wherever you want.

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

EU Cookie Consent HTML5 Web Component

AcidJs.XCookieConsent is a ready-made, fully customizable solution to the EU Cookie Law, wrapped as a custom HTML5 Web Component.

thumb

The component is being used on this blog as well. If you have dismissed the cookie consent bar, click the button below to open show it again:

Using the Tag *

First, go to the demo page and download the sample project, then try one of the following (you need just one instance of the tag on your page).

<acidjs-xcookie-consent>
This website uses cookies to ensure you get the best experience.
</acidjs-xcookie-consent>
<acidjs-xcookie-consent position="top" dismiss-button-text="Understood">
This website uses cookies to ensure you get the best experience.
</acidjs-xcookie-consent>
<acidjs-xcookie-consent dir="rtl"></acidjs-xcookie-consent>

* The message should be set between the <acidjs-xcookie-consent></acidjs-xcookie-consent> tag and HTML is supported. If no content is set, the default text will be “This website uses cookies to ensure you get the best experience“.

HTML Attributes of the Tag

Apart from the standard HTML attributes, the following component-specific ones are supported:

  • position – optional position of the cookie consent bar. By default, position is "bottom", the possible value is "top".
  • dismiss-button-text – optional custom text for the dismiss button. If not set, the default value is "Got it!"

Direction is also supported – you could try dir="rtl" or dir="ltr" (default).

JavaScript Methods of the Tag

Apart from the standard JavaScript methods, getters and setters, the following component specific methods are also supported:

  • show() – to programmatically show the cookie consent bar. Calling this method will, however not delete the _acidjs_xcookie_consent_dismissed cookie.
    // JavaScript
    document.querySelector("acidjs-xcookie-consent").show();
    // jQuery
    $("acidjs-xcookie-consent").get(0).show();
  • hide() –  to programmatically hide the cookie consent bar. This will, however not set the _acidjs_xcookie_consent_dismissed cookie.  Cookie will be set only if user clicks the button to dismiss the message.
    // JavaScript
    document.querySelector("acidjs-xcookie-consent").hide();
    // jQuery
    $("acidjs-xcookie-consent").get(0).hide();
    

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

X-Lang: Language Selector HTML5 Web Component

Glad to announce that a new HTML5 Web Component has joined my gallery. Meet X-Lang – a language selector, wrapped as a custom tag, with small powerful API and custom events, utilizing another HTML5 endeavour – X-Flag.

thumb

Usage

<acidjs-xlang id="lang-01">
  <acidjs-xlang-culture label="Deutsch" code="de"></acidjs-xlang-culture>
  <acidjs-xlang-culture label="English" code="uk"></acidjs-xlang-culture>
  <acidjs-xlang-culture label="Bulgarian" code="bg"></acidjs-xlang-culture>
  <acidjs-xlang-culture label="Czech" code="cz"></acidjs-xlang-culture>
  <acidjs-xlang-culture label="Malti" code="mt"></acidjs-xlang-culture>
</acidjs-xlang>

HTML Attributes of the <acidjs-xlang /> Tag
Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

  • open – If attribute is set, the language dropdown will be visible when page loads.
  • disabled – If attribute is set, the component will be disabled.

HTML Attributes of the <acidjs-xlang-culture /> Tag

  • code – Country code, for example code="de".
  • label – Optional. Label with the full name of the language item.
  • selected – Optional. The language item with the attribute set will be preselected. If none of the <acidjs-xlang-culture /> contains the attribute, the first item in the list will be default.

Custom Events
The component publishes one custom event – "acidjs-xlang-change", triggered when language selection has been made. The event returns an object, which can be used to react to the change and load the requested language:

{
    code: "de", // the language code, defined in the code attribute of the acidjs-xlang-culture tag
    label: "Deutsch", // the language full name, if defined in the label attribute of the acidjs-xlang-culture tag
    index: 0 // the index of the item in the dropdown
}

Binding to the "acidjs-xlang-change" event:

$("#lang-01").on("acidjs-xlang-change", function(e, data) {
    window.console.log(e.type, data);
});

JavaScript Getters, Setters and Methods
The component does not expose any custom methods, setters or getters and all standard JavaScript APIs are supported.

Have a great week, and don’t forget to check the demo on this page.

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Panel Bar – New HTML5 Web Component

The latest addition to my constantly growing collection of HTML5 Web Components has just been released. X-Panel is a HTML5 Web Component, built on top of Mozilla’s X-Tags which makes possible the creation of full-featured panel bars and drawers fun and without any JavaScript as custom tags.

thumb

The Markup

<acidjs-xpanel multiple>
    <acidjs-xpanel-drawer icon="icons/pdf.png" label="PDF Files" open>
        Drawer content...
    </acidjs-xpanel-drawer>
    <acidjs-xpanel-drawer icon="icons/doc.png" label="MS Word Documents">
        Drawer content...
    </acidjs-xpanel-drawer>
    <acidjs-xpanel-drawer icon="icons/xls.png" label="MS Excel Sheets">
        Drawer content...
    </acidjs-xpanel-drawer>
    <acidjs-xpanel-drawer icon="icons/txt.png" label="Text Files">
        Drawer content...
    </acidjs-xpanel-drawer>
</acidjs-xpanel>

HTML Attributes of the <acidjs-xpanel /> Tag

Apart from the standard HTML attributes, the tag also supports the following component-specific attributes:

  • multiple – If attribute is set, multiple open drawers will be enabled. By default, expanding a drawer collapses other expanded drawers.
  • width – Width of the drawer. The default width is "100%".
  • height – Height of the drawer. The default height is "auto".

HTML Attributes of the <acidjs-xpanel-drawer /> Tag

Apart from the standard HTML attributes, the tag also supports the following component-specific attributes:

  • icon – URL to an optional drawer icon.
  • label – Drawer label text.
  • height – Optional height of the drawer. If the content exceeds the height specified, scrollbars will appear.
  • hint – Optional hint text for the drawer header.
  • open – By default all drawers are closed. Setting the open attribute will render that drawer open by default.

Check the code of the demo page or the distribution to see how to use X-Panel and have a great weekend!

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Syntax Highlighter HTML5 Web Component Based on Lea Verou’s Prism.JS

AcidJs.XHilite is a syntax highlighter HTML5 Web Component, based on Lea Verou‘s Prism.JS and wrapped as a custom tag with support for multiple languages and both declarative and async loading of the code to be highlighted.

Usage:

<acidjs-xhilite language="javascript" height="200" width="400">
function sayHi() {
    return "Hello, World!";
}
sayHi();
</acidjs-xhilite>

Recently I my HTML5, CSS3 and JavaScript Experiments website received a major facelift and as a next step and I am planning to replace the syntax highlighter I am currently using with AcidJs.XHilite.

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • language – The language to highlight, for example language="javascript". Default: "markup" (usable with HTML, SVG, XML, etc.). Check prismjs.com for a complete list of supported languages.
  • width – Optional width in pixels of the code block, for example: width="600".
  • height – Optional height in pixels of the code block, for example: height="200".
  • src – Instead of adding the code to highlight in the tag, you can specify path to the file which content needs to be highlighted, for example: src="example.js"

JavaScript Methods of the Tag

Native JavaScript methods (document.getElementById, document.querySelector, etc. as well as their jQuery or other libraries aliases).

Check the screenshots below or go straight to the demo and download:

x-hilite-markup

x-hilite-javascript

x-hilite-svg

x-hilite-css

x-hilite-php

x-hilite-svg

x-hilite-java

x-hilite-csharp

Check the demo on this page. You will also find a download link there. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.