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 position="top" dismiss-button-text="Understood">
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).
show() – to programmatically show the cookie consent bar. Calling this method will, however not delete the _acidjs_xcookie_consent_dismissed cookie.
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.
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.
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.
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.
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.
<acidjs-xticatactoe x="Martin" o="James"></acidjs-xticatactoe>
<acidjs-xticatactoe debug="true" size="large"></acidjs-xticatactoe>
"yourTurn": "du bist dran!",
"startNewGame": "Neues Spiel starten",
"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 :("
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".
init() – Initialize the game.
restart() – Restart the game (an alias of the init() method).
destroy() – Destroy the game and remove the board.
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.
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.