Skip to content

Instantly share code, notes, and snippets.

View benouat's full-sized avatar

Benoit Charbonnier benouat

39 followers · 3 following
View GitHub Profile
@benouat
benouat / InstantTemplate.tpl
Last active December 5, 2018 14:58
Input drag'n'drop Dragging text around from input to input
{macro main()}
{section {
macro : "greetings",
bindRefreshTo : [{
to : "firstname",
inside : data
},{
to : "lastname",
inside : data
}]
@benouat
benouat / InstantTemplate.tpl
Last active May 23, 2018 07:00
Focused Button with Enter & Space
{macro main()}
{@aria:TextField {
block: true
}/}
<hr/>
{@aria:Button {
id: "first",
label: "First",
width: 100,
onclick: {
@benouat
benouat / fancy-tabs-demo.html
Created March 15, 2018 08:43 — forked from ebidel/fancy-tabs-demo.html
Fancy tabs web component - shadow dom v1, custom elements v1, full a11y
<script>
function execPolyfill() {
(function(){
// CustomElementsV1.min.js v1 polyfill from https://github.com/webcomponents/webcomponentsjs/tree/v1/src/CustomElements/v1.
/*
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
@benouat
benouat / angularjs-providers-explained.md
Created April 19, 2016 12:27 — forked from demisx/angularjs-providers-explained.md
AngularJS Providers: Constant/Value/Service/Factory/Decorator/Provider
Provider Singleton Instantiable Configurable
Constant Yes No No
Value Yes No No
Service Yes No No
Factory Yes Yes No
Decorator Yes No? No
Provider Yes Yes Yes

Constant

@benouat
benouat / InstantTemplate.tpl
Last active April 6, 2016 14:53
{@aria:TextField {}} with no event
{macro main()}
{@aria:TextField {
onclick: {
fn: __onClick,
scope: this,
args: {
}
}
}/}
{/macro}
@benouat
benouat / InstantTemplate.tpl
Last active April 6, 2016 14:45
ErrorLists HTML injection
{macro main()}
<h1>Hello Instant Aria Templates</h1>
{@aria:ErrorList {
title: "Error",
bind: {
messages: {
to: "errorMessages",
inside: data
}
}
@benouat
benouat / InstantTemplate.tpl
Last active March 31, 2016 08:54
@aria:Select mandatory state with simple html
{macro main()}
{@aria:Select {
mandatory: true,
sclass: data.sclass,
options: [
{ value: 1, label: "One" },
{ value: 2, label: "Two" },
{ value: 3, label: "Three" }
]
}/}
@benouat
benouat / InstantTemplate.tpl
Last active August 29, 2015 14:25
Processing Indicator (Jaws) Activation of WAI-ARIA on processing indicator
{macro main()}
<div><button {on click toggle /}>Toggle waiting</button></div>
{section {
bindProcessingTo: {
inside: data,
to: "loading"
},
processingLabel: "Please wait while we retrieve your profile",
macro: "content"
}/}
@benouat
benouat / InstantTemplate.tpl
Last active August 29, 2015 14:13
Vertical TabBar
{macro main()}
<h1>Vertical Tabbar</h1>
{section {
type: "div",
attributes: {
classList: ["tabbar"]
},
macro: "tabbar",
bindRefreshTo: [
@benouat
benouat / InstantTemplate.tpl
Last active August 29, 2015 14:06
Inputs fitting table cells
{macro main()}
<table>
<tr>
<td>{@aria:TextField { helptext : "Name", block : true }/}</td>
<td>{@aria:TextField { helptext : "Name", block : true, readOnly : true}/}</td>
<td>{@aria:TextField { helptext : "Name", block : true, disabled: true }/}</td>
<td>{@aria:TextField { helptext : "Name", block : true, mandatory: true }/}</td>
</tr>
</table>
{/macro}