bcharbonnier’s gists

bcharbonnier / InstantTemplate.tpl

Last active May 15, 2017 15:05

KeyValue boolean to RadioButton

	{macro main()}
	{@aria:RadioButton {
	label:"One",
	keyValue: true,
	bind: {
	value: { inside: data, to: "selected" }
	}
	}/}
	{@aria:RadioButton {
	label:"Two",

bcharbonnier / InstantTemplate.tpl

Last active October 10, 2016 13:35

Script Tag Testing what a script tag could do from a template point of view

	{macro main()}
	<h1>Hello Instant Aria Templates</h1>
	<script>
	alert("Hi, I am a script injection");
	</script>
	<div>testing</div>
	{/macro}

bcharbonnier / forwarding-example.md

Created June 10, 2016 20:38 — forked from f1sherman/forwarding-example.md

Port Forwarding Example in OS X El Capitan

Add the following to /etc/pf.anchors/myname:

rdr pass on lo0 inet proto tcp from any to any port 80 -> 127.0.0.1 port 4000
rdr pass on lo0 inet proto tcp from any to any port 443 -> 127.0.0.1 port 4001

Add the following to /etc/pf-myname.conf:

rdr-anchor "forwarding"
load anchor "forwarding" from "/etc/pf.anchors/myname"

bcharbonnier / Scrollable.react.js

Created June 16, 2015 11:07

React Scrollable Panel

	/**
	* @jsx React.DOM
	*/

	/eslint "no-underscore-dangle": 0/

	var React = require("react");

	var Event = require("../../utils/EventUtils");
	var throttler = require("../../utils/Throttler");

bcharbonnier / InstantTemplate.tpl

Created January 31, 2014 15:01

Sha1 Color Generate color based on text sha1 hex digest

	{macro main()}
	<h1>Dynamic color generation based on sha1</h1>
	{foreach item inArray data.items}
	<div>
	<h3>${item.text}</h3>

	<div class="color" style="background-color: ${getColor(item.sha1)}"> </div>
	</div>
	{/foreach}
	{/macro}

bcharbonnier / InstantTemplate.tpl

Last active December 20, 2015 08:59

Infinite top scrolling Let's try to implement an infinite top scrolling mechanism. You have a container with overflow scroll, you have an initial scrollTop position and you inject a lot of DOM elements as first childs in the container as soon as you scroll to the top.

	{macro main()}
	<button {on click "reset" /}>Reset</button>
	<button {on click "loadMessages" /}>Load a huge bunch of messages</button>
	{repeater {
	id: "messages",
	type: "div",
	attributes: {
	classList: ["messages"]
	},
	content: data.messages,

bcharbonnier / InstantTemplate.tpl

Created July 3, 2013 12:28

View with automatic refresh Let's try to have a view that is listening to changes to refresh itself, and then be in sync with automatic section refresh that contains the view

	{createView usersList on data.users /}
	{macro main()}
	<h1>View with automatic refresh</h1>
	<button {on click {fn: changeStatus, scope: this, args: [0, 1]}/}>Make Benoit Online</button>
	<button {on click {fn: changeStatus, scope: this, args: [0, 0]}/}>Make Benoit Offline</button>
	<button {on click {fn: changeStatus, scope: this, args: [0, 2]}/}>Make Benoit Dnd</button>
	<button {on click {fn: changeStatus, scope: this, args: [0, 3]}/}>Make Benoit Away</button>
	{section {
	type: "div",
	attributes: {

bcharbonnier / InstantTemplate.tpl

Last active November 29, 2016 10:57

Archive Calendar Displaying a year calendar to provide visual history information

	{macro main()}
	{foreach year in data.years}
	<div class="wrapper">
	{call year(year)/}
	</div>
	{/foreach}
	{/macro}

	{macro year(year)}
	{var days = computeYear(year)/}

bcharbonnier / InstantTemplate.tpl

Last active December 18, 2015 11:19

Canvas Test

	{macro main()}
	It does not do anything...
	{/macro}

bcharbonnier / InstantTemplate.tpl

Last active December 17, 2015 08:59

Multiselect Autocomplete in Aria Templates Partial files compatible with instantat

	{macro main()}
	<h2>Multichoice Autocomplete</h2>
	<div class="multiname" {id "multiname"/} {on click "focusInput"/}>
	{section {
	id: "list",
	type: "div",
	attributes: {
	classList: ["list"]
	},
	macro: "selectedNames",

Benoit Charbonnier bcharbonnier