Category Archives: x-tags

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.

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.

X-CHMOD: HTML5 Web Component

A new HTML5 Web Component has just joined my ever-growing collection of custom tags.

Meet AcidJs.XChmod – a HTML5 Web Component that can be used to set/display the CHMOD settings of a file. Since it emits a client-side event which returns what is currently set it can be easily connected to a server-side script. It was built using another HTML5 Web Component – AcidJs.XSwitch.

thumb

Markup

<acidjs-xchmod permissions="755" id="chmod-1"></acidjs-xchmod>
<acidjs-xchmod permissions="644" id="chmod-2"></acidjs-xchmod>
<acidjs-xchmod permissions="666" id="chmod-6">
    <acidjs-xchmod-lang>
    {
            "owner": "Eigentümer",
            "group": "Gruppe",
            "other": "Sonstige",
            "read": "Lesen",
            "write": "Schreiben",
            "execute": "Ausführen"
    }
    </acidjs-xchmod-lang>
</acidjs-xchmod>           
<acidjs-xchmod permissions="644" enabled="false" id="chmod-4"></acidjs-xchmod>

HTML Attributes

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

  • permissions – Required attribute. The value should be three-digit, and each digit value should be between 0 and 7. If invalid value is set, the component will show an error message.
  • enabled – Optional boolean attribute, default value is true. If set to false, the component will be rendered as disabled.

JavaScript Methods, Getters, Setters and Events

Methods

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

  • setChmod(chmod) – The chmod parameter value should be three-digit, and each digit value should be between 0 and 7. If invalid value is set, the component will show an error message. Usage:
    // JavaScript
    document.querySelector("#chmod-1").setChmod(666);
    // jQuery
    $("#chmod-1").get(0).setChmod(666);
    
  • getChmod() – Returns an object, containing the classes, octal, command values of the currently set CHMOD value:
    {
       "classes":{
          "owner":7,
          "group":5,
          "other":5
       },
       "octal":"755",
       "octalLeadingZero":"0755",
       "command":"-rwxr-xr-x"
    }
    

    Usage:

    // JavaScript
    document.querySelector("#chmod-1").getChmod();
    // jQuery
    $("#chmod-1").get(0).getChmod();
    
  • getData() – Returns the DTO of the component, containing the chmod object, returned by the getChmod() method plus the lang. Usage:
    // JavaScript
    document.querySelector("#chmod-1").getData();
    // jQuery
    $("#chmod-1").get(0).getData();
    
  • enable() – Enable the component. Usage:
    // JavaScript
    document.querySelector("#chmod-1").enable();
    // jQuery
    $("#chmod-1").get(0).enable();
    
  • disable() – Disable the component. Usage:
    // JavaScript
    document.querySelector("#chmod-1").disable();
    // jQuery
    $("#chmod-1").get(0).disable();

Getters and Setters

All standard JavaScript setters/getters are supported, plus the component-specific:

  • chmod – Sets/gets the CHMOD of the component. The setter returns an object, similar to the object, returned by the getChmod() method. Usage:
    // getter JavaScript
    document.querySelector("#chmod-1").chmod;
    // setter JavaScript
    document.querySelector("#chmod-1").chmod = 666;
    
    // getter jQuery
    $("#chmod-1").get(0).chmod;
    // setter jQuery
    $("#chmod-1").get(0).chmod = 666;
    
    
  • enabled – Sets/gets the enabled state of the component. The setter returns a Boolean. Usage:
    // getter JavaScript
    document.querySelector("#chmod-1").enabled;
    // setter JavaScript
    document.querySelector("#chmod-1").enabled = false;
    document.querySelector("#chmod-1").enabled = true;
    
    // getter jQuery
    $("#chmod-1").get(0).enabled;
    // setter JavaScript
    $("#chmod-1").get(0).enabled = false;
    $("#chmod-1").get(0).enabled = true;

Custom Events

  • "acidjs-xchmod-set" – Returns the currently set CHMOD in several different formats. The event is triggered any time the CHMOD has been changed. Binding to the event:
    $("#chmod-1").on("acidjs-xchmod-set", function(e, data) {
        window.console.log(e.type, data);
    });
    

    Return object:

    {
        classes: {
                owner: 3,
                group: 5,
                other: 5
        },
        command: "--wxr-xr-x",
        octal: "355",
        octalLeadingZero: "0355"
    }

Have a great day, 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 JavaScriptExperiments and Insight website.