Category Archives: Acid.JS

Ribbon JS 4.3.0 is out with Support for AngularJS Directives

I am happy to announce that the new version of Ribbon JS comes with a long awaited implemented feature request – support for AngularJS directives.

Release Notes:

  • Added support for AngularJS directives applied to the bounding box, tabs and tab ribbons in the configuration object. Check the documentation here.

* Version 4.3.0 is fully compatible with versions 4.0.0 and above.

About Ribbon JS:

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, support for AngularJS directives 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.scr

Screenshots:

ribbonjs.4.1.0

Ribbon JS 4.2.0 is Out

I’ve just released a new minor version of Ribbon JS, introducing several new methods, a new event and API interface for setting declarative discrete data to tools, commands and tabs (setting/getting of this data is also available through the new ribbon methods and returned by some of the events of the control). Check the demo of the discrete data setting here.

Release Notes:

  • Version 4.2.0 is fully compatible with versions 4.0.0 and above.
  • Optional tool/command/tab property: props – Ribbon JS now allows the setting of discrete custom properties to tabs, tools and commands. These properties can be set either in the configuration of a tool or tab (the props key) or set/get via the setToolProps, getToolProps, getTabProps and setTabProps methods of the ribbon. The data of the prop keys is returned also by the events, triggered by the ribbon.
  • Method getReleaseNotes() – Programmatically open ribbonjs.com/release-notes and display the release notes of the current version of Ribbon JS.
  • Method getToolData(name) – Get the data associated with the queried tool by it’s name.
  • Method setToolProps(name, key, value) – Set the optional props key (check the Ribbon JS configuration documentation) to a tool/command definition for more info about this key. The required parameters are tool/command name (String) of the tool/command, key (String or Number) name and value (Any).
  • Method getToolProps(name) – Get the props object, associated with a tool or command.
  • Method getTabProps(name) – Get the props object, associated with a tab, queried by its name.
  • Method setTabProps(name, key, value) – Set the optional props key ( check the Ribbon JS configuration documentation) to a tab for more info about this key. The required parameters are tab name (String) of the tool/command, key (String or Number) name and value (Any).
  • Event: “acidjs-ribbon-toggle” – The event is triggered when tab button is clicked (in this case the event always returns {expanded: true}) or when the ribbon is collapsed or expanded either by clicking the expand/collapse button in the top right corner of the control or programmatically via the expand() and collapse() methods.

About Ribbon JS:

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.scr

Screenshots:

ribbonjs.4.1.0

Online Color Picker and Color Conversion Tool

Just a few hours ago I finished and deployed my new online service and very first endeavor in the interesting world of colors and color theory. Say hi to AcidJs.ColorConverter!

Features:

  • Native HTML5 color picker.
  • Color conversion to and from HEX, RGB, HSL, CMYK, HSV,  etc.
  • Color tints, tones and shades.
  • CMYK and RGB color charts, powered by Google Charts.
  • Inspirational color schemes.
  • Detailed information about the selected color.
  • Option to save the raw JSON data, containing the details of the selected color.
  • About 900 named color equivalents.

Built on top of HTML5 WebComponents (AcidJs.XTabs and AcidJs.XOverlay), and utilizing Object.observe() and the (not-so-new) input “color” type (sorry, no fallback for browsers, which do not support it and that’s on purpose!) and using the data from the brilliant ColorHexa service, which I transform to JSON via the REST API running on my server.

Screenshots:

The color picker:

cc-06

Raw data viewer:

cc-05

RGB and CMYK color charts

cc-04

Color conversions table

cc-03

Advanced view – shades, tints, tones and schemes

cc-02

Editor tab

cc-01

Check it on this page and have fun!

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.

HTML5, CSS3 and JavaScript Windows 8 Metro Style Tiles

AcidJs.Tiles is a JavaScript, HTML5 and CSS3 layout widget, which resembles the Windows 8 Metro tiles in terms of look and feel, functionality and behaviors and can be used on web sites or web apps. It is easy to configure via a small, but powerful API and events, and comes with stunning and realistic desktop-like 3D CSS3 animations.

acidjs-tiles-promo-01

The tiles can be used as placeholder of virtually anything – from simple text, to sophisticated markup and forms.

acidjs-tiles-promo-02

tiles

Related Posts and Links