/ ~hypervariety /

Text (16524 bytes)
Saved 2 months ago
templates
Push esc to read the page. Hold Ctrl/Alt/Opt to edit elements on the page.
Or drag a box to create new ones.
Sign in and out   Your home page ~ / Your files

Template Test

I made a <template_test> tag to check operations under different conditions (/templates, /files/templates, /~hypervariety/templates). Its styles and script are in the header of the document, so they're already loaded.

1. A <template_test>

Here goes.
My border will be green if I'm properly inited. Otherwise red.
My background will be yellow if my property was read in. Otherwise orange.
And my text will be padded if my auxiliary property works.

It appears that it works. Or maybe "if it appears then it worked." Whatever.

2. The <templates> tag

Now, as blogged, a <templates> tag that makes templates. But this one is based on Events (for the moment) and it's exportable. Exporting could use PHP to look for the templates start and end tags and then turn it into a script and a media, but even easier is to rig the Page tag to support it.

<templates> is now defined. Let's define a roundie.

<Roundie> (click to show details) The roundie should be a fun shape and be and look depressible: Title Text ...how's that?
It also changes colors when clicked. By default it inherits the parent's background.

That should be it. Let's try to make another Roundie. Is it green and does it react to clicks?

3. The <template_editor> tag

Prototyping a 'template editor' for Roundie. To 'be able to program' means to be able to see invisibles. "Foundational" is pretentious-talk for the same thing. To edit HTML, look at the invisible tags...to instruct the computer what to do 'Behind the Scenes', then put the instructions BtS!

Lots of HTML5 is now behind the scenes and cryptic. For example, table id template_editor is called <table id=template_editor> in one place, table#template_editor in another place, and document.getElementById('template_editor') still somewhere else.

Here's a <template_editor>. It's actually a table with some useful behavior, and each use of the tag can connect itself to any object in the page. We'll start by connecting to the prototypical Roundie template so it can be viewed and edited directly.

Property name Property value
Script name Javascript
rule = (comment / quoted / literal / .)* [script] doublequote = '\"'; singlequote = "\'"; alpha = ."abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; comment = "//" (-."\n\r" .)* ."\n\r"? [comment] comment = "/*" (-."*/" .)* ."*/"? [comment] quoted = quoted<doublequote> / quoted<singlequote> quoted<delim> = delim (-delim .)* delim [quoted] literal = ("var" / "in" / "function" / "if" / "else" / "do" / "while" / "throw" / "this") -alpha [keyword] literal = alpha+ --"(" [function] literal = alpha+

'Stremely cool! Now let's make a new roundie and point at it.

An Editable Roundie

Now to consider a better way to do properties: set the attribute, but dont trap changes until the init. Also must say that templates defined INSIDE a page shouldn't affect the outside, at least when you're not using 'true' JS.

Editing is enabled
Learn about instructions Hide the box