Category Archives: x-tag

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.

Ribbon JS 4.1.0 is Out

I’ve just released a new minor version for Ribbon JS introducing a couple of new features, properties and methods. The new version is fully backwards compatible with the previous versions of the control (4.0.0 and above), so it is safe to upgrade. The HTML5 Web Component for Ribbon JS has also been updated to support the latest additions.

ribbon.js.scr

Release Notes

  • New highlightTabsGroup method, allowing contextual tab grouping. The method supports custom colors and labels.
  • New unhighlightTabsGroup method, which removes a tab group, set via the highlightTabsGroup method.
  • New enableFlatStyles method, allowing to set flat (Metro) look and feel to the ribbon.
  • New disableFlatStyles method, setting back the classic (pre Office 2013) styles to the ribbon.
  • New appIconUrl property, set in the constructor of a ribbon, allowing custom top left application icon. The property is optional, and the default icon is the HTML5 badge.
  • New flat property (optional, Boolean), set in the constructor of a ribbon. If set to true applies flat (Metro) look and feel to the ribbon. Its default value is false.

Screenshots

ribbonjs.4.1.0

Ribbon JS is arguably the best recreation of the MS Officetm ribbon bar, using JavaScript, CSS3, and HTML5. It is a lightweight control, which is ready to use on websites, web-based WYSIWYG editors, sophisticated back-end systems, mail applications, complex file managers, and JavaScript-heavy apps. It has everything you would expect from a ribbon bar – comprehensive and fully documented API, amazing command handling, huge set of inbuilt tools, capability to add custom tools via client-side templates, cool looks and is also available optionally wrapped as a full-blown HTML5 WebComponent. Last but not least, it only takes a few minutes to deploy, configure, and run.

 

Tic-Tac-Toe Game Recreated as a HTML5 Web Component

Last night I finished my latest experiment in recreating the classic Tic-Tac-Toe game as a HTML5 Web Component. Here’s the result and a few details:

  • Two players take turns on the same computer. The next version will support one player vs. the computer.
  • Game lobby for selecting player names.
  • No images or JavaScript animations, CSS3 stuff only.
  • Small API.
  • Custom events, allowing the game to exchange data on the network or notify/interact by/with other components/controls on the page.
  • Localizable via inline JSON (check the code listing below).
  • Support for 3 board sizes.
  • Allowing multiple instances.

tic.tac.toe

The Markup

<acidjs-xticatactoe x="Martin" o="James"></acidjs-xticatactoe>
<acidjs-xticatactoe debug="true" size="large"></acidjs-xticatactoe>
<acidjs-xticatactoe size="small"></acidjs-xticatactoe>
<acidjs-xticatactoe debug="true">
    <code hidden>
    {
        "yourTurn": "du bist dran!",
        "startNewGame": "Neues Spiel starten",
        "start": "Start!",
        "playerXName": "Spieler X Name",
        "playerOName": "Spieler O Name",
        "choosePlayerXName": "Wählen Sie Name für Spieler X",
        "choosePlayerOName": "Wählen Sie Name für Spieler O",
        "youWin": "Sie gewinnen!",
        "draw": "Unentschieden :("
    }
    </code>
</acidjs-xticatactoe>

HTML Attributes

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

  • x – Optional name for the “x” player. Default: "Tic".
  • o – Optional name for the “o” player. Default: "Tac".
  • debug – Optional. If set to true, the component will output console messages. Default Default: "false".
  • size – Optional size of the board. Default: "medium". Other possible values are "small" and "large".

JavaScript API

All standard JavaScript methods are supported, plus the component-specific:

  • init() – Initialize the game.
  • restart() – Restart the game (an alias of the init() method).
  • destroy() – Destroy the game and remove the board.

Events

The component publishes the following custom events, returning event and game-specific data. The distribution, which could be downloaded from this link contains these event bindings, so you can use your browser’s console to see what data is returned upon firing those events.

  • ttt:ready – Fired when game is ready to play.
  • ttt:win – Fired when game is a win.
  • ttt:draw – Fired when game is a draw.
  • ttt:playing – Fired upon user action.

Enjoy the 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.

Ribbon JS 4 is Now Also Available as a HTML5 Web Component

Following last week’s release of Ribbon JS 4 and its new website, I decided to provide one more option for ribbon initialization along with the JSON configuration. Instead of composing a relatively complex JSON object, developers using Ribbon JS are now able to create ribbons as HTML5 web components through a simple custom HTML tag. The functionality, complete toolset, appearance, methods and events are kept intact with this approach, so it is absolutely safe to give it a try.

You could play with the demo of Ribbon’s HTML5 Web Component here, browse the documentation and download it. The web component does not include AcidJs.Ribbon, so in order to run it you will need to download also the JavaScript runtime of the control.

ribbon.js.scr

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.