Jump to content
MakeWebGames

Custom HTML elements


Coly010

Recommended Posts

So I made this post over on GMF but I thought I might as well post it here too to see what people think.

I've recently purchased an rpg graphic set from Graphic River and I've been trying to create things like dialog boxes, main page styles and user data sections, exp bars etc.

Whilst doing this I've realised that I'm using a lot of html elements for individual things. A simple example:


<div class='dialog'>
  <span class='title'>Title</span>
  <span class='actionButtons'><button>Close</button></span>
  <p class='text-content'>Some amount of text relating to the dialog box</p>
</div>

Then I use CSS to position and style everything.

I saw [MENTION=1]a_bertrand[/MENTION] make a post about LESS on GMF and I thought, hey, that could be useful. I can use the one class over and over again for similar elements but change maybe one thing:

[css]

.window {

background: #303030 url("../img/window-bk.png");

border-image: url("../img/border/fancy.png") 25 25 25 25;

border-radius: 8px;

border-width: 6px;

padding: 2px;

color: #fff;

font-size: 14px;

word-spacing: 3px;

letter-spacing: 1.5px;

}

.red_window {

.window;

color: red;

}

[/css]

etc, therefore saving me writing a lot of css for similar elements like that.

Great, that saves me a bit of time.

My thoughts now brought me to something else though.

If we can have a precompiler for CSS, can we have the same for HTML?

What if we were able to create and define our own HTML elements, that are formed from various standard HTML elements. What if I could turn:


<div class='dialog'>
  <span class='title'>Title</span>
  <span class='actionButtons'><button>Close</button></span>
  <p class='text-content'>Some amount of text relating to the dialog box</p>
</div>

into


<dialog-box window-title='Title' action-button='Close' action-button-click='CloseDialog();'>
  Some amount of text relating to the dialog box
</dialog-box>

then simply define my CSS styles as:

[css]

dialog-box {

background: #303030 url("../img/window-bk.png");

border-image: url("../img/border/fancy.png") 25 25 25 25;

border-radius: 8px;

border-width: 6px;

padding: 2px;

color: #fff;

font-size: 14px;

word-spacing: 3px;

letter-spacing: 1.5px;

}

[/css]

then if need be, I assign the <dialog-box></dialog-box> a class of red-window to override the font-color.

Possibly have a file where you define the HTML elements:

[js]

DEFINE <dialog-box></dialog-box> {

markup {

<div class='dialog'>

<span class='title'>@param(window-title)</span>

<span class='actionButtons'>

<button onclick='@param(action-button-click)'>@param(action-button)</button>

</span>

<p class='text-content'>@param(innerHTML);</p>

</div>

}

params {

window-title,

action-button,

action-button-click

}

css {

.dialog {

// basic standard css

}

.title {

// basic styling and positioning

}

.actionButtons {

// basic styling and positioning

}

}

}

[/js]

I did a quick search and found this: http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

From looking at it quickly, I think it may do what I've written about, but it does so with JS. I was thinking having it more like LESS, where you compile your final code and it converts the custom element tags back to their standard markup, making it compatible for every user, whether they have JS turned on or not. Rather than leaving it to chance that every user will have JS turned on to convert your custom elements.

Any opinions, or do any of you know of something like this?

Edited by Coly010
Link to comment
Share on other sites

Thats an interesting way of doing it through PHP, but I think it would hang if you tried to do it for a large scale application that contains many custom elements? It's also a straight replace, with if your <red-dialog> was more than just a div with a class?

[MENTION=1]a_bertrand[/MENTION] pointed me to something that seems to match what i was looking for perfectly despite relying on JS:

https://www.polymer-project.org/1.0/

I think its quite interesting and could be a must-have for large applications that reuse a lot elements for the one component, and therefore to save you from writing a lot of the same code over and over. Basically implementing D.R.Y into HTML.

Link to comment
Share on other sites

Thats an interesting way of doing it through PHP, but I think it would hang if you tried to do it for a large scale application that contains many custom elements? It's also a straight replace, with if your <red-dialog> was more than just a div with a class?

@a_bertrand pointed me to something that seems to match what i was looking for perfectly despite relying on JS:

https://www.polymer-project.org/1.0/

I think its quite interesting and could be a must-have for large applications that reuse a lot elements for the one component, and therefore to save you from writing a lot of the same code over and over. Basically implementing D.R.Y into HTML.

I wouldn't think so - I've used it on games in the past to bypass the "will update on next page" issue.

If the output was more than just a div with a class? You're match and edit to suit.

I may throw something more complex together when I have change :)

Link to comment
Share on other sites

I wouldn't think so - I've used it on games in the past to bypass the "will update on next page" issue.

If the output was more than just a div with a class? You're match and edit to suit.

I may throw something more complex together when I have change :)

so would that not mean throwing together a massive amount of find and replaces?

How would you handle this though:

 

<dialog-box box-title='Title' box-button='Close' box-button-action='SomeAction();'>
  Content goes here
</dialog-box>

 

to this:

 

<div class='window'>
  <span class='title'>Title</span>
  <span class='content'>Content goes here</content>
  <span class='buttons'><button onclick='SomeAction();'>Close</button></span>
</div>

 

You method also depends on PHP to parse the code otherwise it fails.

I will still admit its a good solution, I just want to see where it can be taken to.

Link to comment
Share on other sites

Not necessarily. You could pass in pipe split data, such as;

 

{window|Title|Content|Close}

 

To generate;

 

[color=#333333]<div class='window'>[/color]
[color=#333333]   <span class='title'>Title</span>[/color]
[color=#333333]   <span class='content'>Content goes here</content>[/color]
[color=#333333]   <span class='buttons'><button onclick='SomeAction();'>Close</button></span>[/color]
[color=#333333]</div>[/color]

 

Of course, it's only limited to what you're willing to put in.

For the most part, you could preg_match_all the entire output, then use the first parameter ({window|some|other|stuff}) to throw it inside a function to parse the rest.

Not sure I can offer much more guidance on this, as I do not know your aims, but in theory this wouldn't work much different to other "libraries" that do similar.

They will all have overheads as they will all need to pattern match and convert.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...