Ribbon JS 4.0.1 Minor Update

I’ve just released a new minor fix for Ribbon JS addressing a few issues from the previous major update. The fix is fully backwards compatible with the previous version of the control, so it is safe to upgrade. Here are the release notes:

  • Fix for multiple triggering of the “acidjs-ribbon-tool-clicked” event in certain cases.
  • CSS fix for the Quick Launch Toolbar.
  • CSS fix for the setting of font families in the font-family dropdown.
  • Renamed the getToolByName() method getToolsByName(), which now returns an array of matching DOM elements (for example multiple “paste” command in different ribbon tools).

To stay updated with Ribbon JS releases, follow the relevant posts on my blog or subscribe to the new RSS feed on ribbonjs.com.

ribbon.js.scr

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.

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.

Ribbon JS 4 is Out. Better than Ever.

I am happy to announce that one of my most popular JavaScript controls – Ribbon JS (formerly known as AcidJs.Ribbon) has just received a major facelift and a new website.

Almost two years after the release of version 3.0 it keeps going strong being among the best MS Office ribbon solutions for the web, created entirely with HTML5, CSS3 and JavaScript. It is a lightweight widget, 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 and cool looks. Last but not least, it only takes a few minutes to deploy, configure, and run.

ribbon.js.scr

Apart from the easier configuration, new event handling, client-side templating for custom tools, support for responsiveness, updated API, flexible licensing, there’s a new and huge set of inbuilt tools. Here’s what you get:

ribbon.js.tools

Take a look at the demos, check the documentation and have fun with Ribbon JS!

Open API, HTML5 Widgets, Improved Search, Session Caching and Favorites Bar for ElevenRack.net

During the last couple of days I worked hard on some new features for elevenrack.net, which I hope will improve the user experience of the website and will drive more visitors and users. I am happy to share the latest additions today.

Improved Search

The search functionality now supports search by letter, artist and preset title. Search by author is also on my list.

search

The visibility of the search bar could be toggled by clicking the loupe icon in the navigation bar:

search-toggle-cursor

Embeddable HTML5 Widget

If you like elevenrack.net and want to support it (I’d really appreciate that) and a really cool way, you are now able to embed preset widgets on your website just by registering widget’s HTML5 Web Component runtime and adding a simple tag to your website.

widget-1

widget-2

Favorites Bar

Found a preset you love? Click the star icon next to the page title to store it in your very own favorites bar.

fav-2

To manage your favorites, click the star icon in the navigation bar.

fav-5

To remove a favorite – either click the “x” icon in the favorites popup or the yellow star icon to the right of the page title.

fav-3

fav-4

Session Caching

Visited pages are now cached client-side during the session and loading them from the cache is at lightning speed.

Presets API

The JSON(P) data for all presets currently on the website is accessible via the REST API.

Have a great week, and thanks for stopping by!

 

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.