guseyn / ehtml

HTML as Template Language

v1.0.178

EHTML (or Extended HTML) can be described as a set of custom elements that you can place on an HTML page for different purposes and use cases. The goal of this library is to provide a convenient way to eliminate JavaScript code on the client side as much as possible for basic and routine tasks. The biggest focus of this library is to offer the easiest way to perform AJAX operations just by using HTML. Also EHTML treat your HTML code code not only as a markup language but also as a templating language.

• Web Page
• Documentation
• Blog
• Examples

Simple Blog App: Demo Video

Link to source code

Simple Chat App: Demo Video

Link to source code

Contribution and QA

If you have any questions or concers about EHTML, please feel free to share them in the issues. If you want to send a patch, feel free to create a fork and send it via pull request.

ehtml's Issues

response tag

e-youtube

Widget service elements (consider profit out of it)

add ajax load icons where it's needed

e-ajax-loader

e-timezone-clock

e-google-oauth-button

e-html-resource

ElementWithAppliedValuesInTextNodes

test with response which is randomly delayed

google oauth tag

Post button

Draggable

url encode data-src

ElementWithAppliedValuesInAttributes

support data-src parsing params

github oauth tag

Fix ehtm behavior, replace the element, not by innerhtml

create index page with list of examples

e-box

page pagination

e-chart

e-table

<e-table>
    <e-th>
      <e-td>Name</e-td>
      <e-td>Email</e-td>
    </e-th>
    <e-tr>
      <e-td>${user.name}</e-td>
      <e-td>${user.email}</e-td>
    </e-tr>
</e-table>

RequestBodyWithAppliedLocalStorageValues

Consider of preloading problem

kinda e-page...

e-dom-action (data-event, actions)

e-load-box

make serving files for every type (change regexp for serving files)

e-timer

create logo

Plan (supported tags)

1. <get-response url="/test.html" response-type="html" ></get-response>

    <get-response url="/get_user" response-type="json" obj-name="User">
         <div class="profile">
             User:
             <div class="user-property"> {{ User.name }} </div>
             <div class="user-property"> {{ User.email }} </div>
            <div class="user-property"> {{ User.age }} </div>
        </div>
    </get-response>

2. <post-response url="/test_by_post.html" response-type="html" ></post-response>

   <div name="profile-to-update">
        User:
        <input type="text" name="user-name"></input>
        <input type="text" name="user-email"></input>
       <input type="text" name="user-age"></input>
      <button onclick="update-user"></button>
    </div>
    <post-response name="update-user" url="/update_user" request-body="{name: user-name, email: user-email, age: user-age}" request-header="localStorage.jwt" response-type="json" obj-name="User" replace="profile-to-update">
         <div class="profile">
             User:
             <div class="user-property"> {{ User.name }} </div>
             <div class="user-property"> {{ User.email }} </div>
             <div class="user-property"> {{ User.age }} </div>
            <div class="user-property"> {{ User.promoCode }} </div>
        </div>
    </post-response>

3.     <google-oauth-button clientId="clientId" redirectUri="./"></google-oauth-button>

4.html <youtube id="someVideoId"></youtube>

e-form

test e-json with post request

html-res => e-html

e-github-oauth-button

e-progressbar

consider maybe we don't need custom tags, just class attributes

localStorage variable access in attributes

add travis and test-coverage badges

choose build system and make it as simple as possible

scroll pagination

e-json

extend EHTML: css templates by e-theme tag

"response for post request" tag

youtube tag

write docs

Resizable

action attributes

Validation attributes

e-chart