Skip to content

Instantly share code, notes, and snippets.

@insin
Created May 7, 2014 05:29
Show Gist options
  • Save insin/8e72bed793772d82ca8d to your computer and use it in GitHub Desktop.
Save insin/8e72bed793772d82ca8d to your computer and use it in GitHub Desktop.
This is the sort of stuff JSX saves you from having to manage
this.$el.append(domBuilder([
['div.arrow']
, ['div.popup-header'
, ['button.close', {type: 'button'}, '\u00D7']
, ['h3', 'Add menu item']
]
, ['div.popup-body'
, ['form.form-horizontal'
, ['div.control-group'
, ['label.control-label', {'for': 'menuItemType'}, 'Type']
, ['div.controls'
, ['select$type', {id: 'menuItemType'}
, ['option', {value: ''}, '']
, ['option', {value: 'page'}, 'Page']
, ['option', {value: 'heading'}, 'Menu Heading']
, ['option', {value: 'text'}, 'Menu Text']
, ['option', {value: 'spacer'}, 'Menu Spacer']
]
, ['span.help-inline']
]
]
, ['div.control-group.hide$pageTypeControl'
, ['label.control-label', {'for': 'pageType'}, 'Page Type']
, ['div.controls'
, ['select$pageType', {id: 'pageType'}
, ['option', {value: ''}, '']
, ['option', {value: 'html'}, 'HTML Page']
, ['option', {value: 'gallery'}, 'Gallery']
]
, ['span.help-inline']
]
]
, ['div.control-group$labelControl'
, ['label.control-label', {'for': 'menuItemLabel'}, 'Label']
, ['div.controls'
, ['input$label', {type: 'text', id: 'menuItemLabel'}]
, ['span.help-inline']
]
]
]
]
, ['div.popup-footer'
, ['button.btn.cancel', 'Close']
, ['button.btn.btn-primary.save', 'Add']
]
], refs))
$template('season_details'
, DIV({'class': 'page-header'}
, H1('Season: {{ season.name }}')
)
, H2('Games')
, $if('season.games.length'
, TABLE({'class': 'table table-striped table-bordered table-condensed'}
, THEAD(TR(
TH()
, TH('Players')
, TH('Played On')
, TH('Winner')
))
, TBODY($for('game in season.games'
, TR(
TD(A({href: '#', click: $handler(displayGame, 'game')}, 'Game {{ game.getGameNumber }}'))
, TD('{{ game.results.length }}')
, TD('{{ game.date.toDateString }}')
, TD(A({href: '#', click: $handler(displayPlayer, 'game.getWinner')}, '{{ game.getWinner.name }}'))
)
))
)
, $else(DIV({'class': 'alert alert-info'}, 'None yet - add one below.'))
)
, toggleAddButton('Add Game')
, FORM({id: 'addGameForm', 'class': 'form-horizontal hide', submit: $handler(addGame, 'season')}
, FIELDSET(
LEGEND('Add Game')
, DIV({'class': 'control-group'}
, LABEL({'class': 'control-label', 'for': 'date'}, 'Date')
, DIV({'class': 'controls'}
, INPUT({type: 'text', name: 'date', id: 'date', placeholder: 'DD/MM/YYYY'})
, P({'class': 'help-block hide'})
)
)
, DIV({'class': 'control-group'}
, LABEL({'class': 'control-label'}, 'Results')
, DIV({'class': 'controls'}
, $if('players.length'
, TABLE({'class': 'table table-condensed table-controls', style: 'width: auto'}
, THEAD(TR(
TH({style: 'width: 150px'}, 'Player')
, TH({style: 'width: 350px'}, 'Position')
))
, TBODY($for('player in players'
, TR(
TD(LABEL({'for': 'position{{ forloop.counter }}'}, '{{ player.name }}'))
, TD(
INPUT({type: 'hidden', name: 'player', value: '{{ player.id }}'})
, INPUT({type: 'text', name: 'position', id: 'position{{ forloop.counter }}', 'class': 'input-mini'})
, SPAN({'class': 'help-inline hide'})
)
)
))
)
, $else(
DIV({'class': 'alert alert-info'}
, 'There are no Players registered yet - add some on the '
, A({href: '#', click: playersList}, 'Players')
, ' page.'
)
)
)
, P({'class': 'help-block hide', id: 'results-help'})
)
)
, DIV({'class': 'control-group'}
, LABEL({'class': 'control-label'}, 'Knockouts')
, DIV({'class': 'controls'}
, DIV({'class': 'control-knockout'}
, SELECT({'name': 'perp'}
, OPTION({value: ''}, '----')
, $for('player in players'
, OPTION({value: '{{ player.id }}'}, '{{ player.name }}')
)
)
, ' knocked out '
, SELECT({'name': 'victim'}
, OPTION({value: ''}, '----')
, $for('player in players'
, OPTION({value: '{{ player.id }}'}, '{{ player.name }}')
)
)
, P({'class': 'help-block hide'})
)
, P(BUTTON({'class': 'btn btn-success', type: 'button', click: cloneKnockout}
, I({'class': 'icon-plus icon-white'})
, ' Add'
))
)
)
, DIV({'class': 'form-actions'}
, BUTTON({'class': 'btn btn-primary', type: 'submit', name: 'submitBtn'}, 'Add Game')
, ' '
, toggleCancelButton()
, P({'class': 'help-block hide'})
)
)
)
, H2('League Table')
, $if('season.games.length'
, $include('league_table', {scores: $var('season.scores')})
, $else(DIV({'class': 'alert alert-info'}
,'The League Table will begin as soon as some games have been played.'
))
)
)
TABLE({border: 2, frame: "hsides", rules: "groups",
summary: "Code page support in different versions of MS Windows.",
click: function(e)
{
e = e || event;
alert(["You clicked this ", this.tagName, " at (",
e.screenX, ",", e.screenY, ")"].join(""));
}},
CAPTION("CODE-PAGE SUPPORT IN MICROSOFT WINDOWS"),
COLGROUP({align: "center"}),
COLGROUP({align: "left"}),
COLGROUP({align: "center", span: 2}),
COLGROUP({align: "center", span: 3}),
THEAD({valign: "top"},
TR(
TH("Code-Page", BR(), "ID"),
TH("Name"),
TH("ACP"),
TH("OEMCP"),
TH("Windows", BR(), "NT 3.1"),
TH("Windows", BR(), "NT 3.51"),
TH("Windows", BR(), "95")
)
),
TBODY(
TR(TD(1200), TD("Unicode (BMP of ISO/IEC-10646)"), TD(), TD(), TD("X"), TD("X"), TD("*")),
TR(TD(1250), TD("Windows 3.1 Eastern European"), TD("X"), TD(), TD("X"), TD("X"), TD("X")),
TR(TD(1251), TD("Windows 3.1 Cyrillic"), TD("X"), TD(), TD("X"), TD("X"), TD("X")),
TR(TD(1252), TD("Windows 3.1 US (ANSI)"), TD("X"), TD(), TD("X"), TD("X"), TD("X")),
TR(TD(1253), TD("Windows 3.1 Greek"), TD("X"), TD(), TD("X"), TD("X"), TD("X")),
TR(TD(1254), TD("Windows 3.1 Turkish"), TD("X"), TD(), TD("X"), TD("X"), TD("X")),
TR(TD(1255), TD("Hebrew"), TD("X"), TD(), TD(), TD(), TD("X")),
TR(TD(1256), TD("Arabic"), TD("X"), TD(), TD(), TD(), TD("X")),
TR(TD(1257), TD("Baltic"), TD("X"), TD(), TD(), TD(), TD("X")),
TR(TD(1361), TD("Korean (Johab)"), TD("X"), TD(), TD(), TD("**"), TD("X"))
),
TBODY(
TR(TD(437), TD("MS-DOS United States"), TD(), TD("X"), TD("X"), TD("X"), TD("X")),
TR(TD(708), TD("Arabic (ASMO 708)"), TD(), TD("X"), TD(), TD(), TD("X")),
TR(TD(709), TD("Arabic (ASMO 449+, BCON V4)"), TD(), TD("X"), TD(), TD(), TD("X")),
TR(TD(710), TD("Arabic (Transparent Arabic)"), TD(), TD("X"), TD(), TD(), TD("X")),
TR(TD(720), TD("Arabic (Transparent ASMO)"), TD(), TD("X"), TD(), TD(), TD("X"))
)
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment