Coly010 Posted July 2, 2015 Share Posted July 2, 2015 (edited) 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 July 2, 2015 by Coly010 Quote Link to comment Share on other sites More sharing options...
SRB Posted July 2, 2015 Share Posted July 2, 2015 Could make use of output buffering and manipulate that. I had a spare couple of minutes, so made this; http://codepad.org/fIuSV5QB Quote Link to comment Share on other sites More sharing options...
KyleMassacre Posted July 2, 2015 Share Posted July 2, 2015 Or pass the function through ob_start: http://codepad.org/26bYcLhm Quote Link to comment Share on other sites More sharing options...
Coly010 Posted July 2, 2015 Author Share Posted July 2, 2015 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. Quote Link to comment Share on other sites More sharing options...
SRB Posted July 2, 2015 Share Posted July 2, 2015 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 :) Quote Link to comment Share on other sites More sharing options...
Coly010 Posted July 2, 2015 Author Share Posted July 2, 2015 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. Quote Link to comment Share on other sites More sharing options...
SRB Posted July 3, 2015 Share Posted July 3, 2015 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.