TIP: Try navigating through list using left & right arrow keys
E

EHTML

HTML Framework that allows you not to write JavaScript code.

161
Github issues
25
Github stars
about 1 month ago
Github last update date

NPM Version Build Status

EHTML (or Extended HTML) can be described as a set of custom elements that you can put on HTML page for different purposes and use cases. The main idea and goal of this library is to provide a convenient way to get rid of JavaScript code on the client side as much as it's possible for basic and routine stuff.

Disclaimer: "I cannot build complex things with EHTML yet, but I can build simple things with it so easily that no other library can do."

Contents

Usage

EHTML is very easy to include in your project. Save this file locally and use it:

<head>
  <script src="/../js/ehtml.bundle.min.js" type="text/javascript"></script>
</head>

Introduction Video

Simple EHTML Blog App

Supported elements

E-HTML
Sometimes html files can be very big, so why not just split them into different smaller html files and put sort of links to them in the main html file? `e-html` allows you to do that by introducing a module system in HTML.

So, let's say we have main articles.html file

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

  <head>
    <link rel="shortcut icon" href="/../images/favicon.ico"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>e-html</title>
    <link rel="stylesheet" href="/../css/main.css">
    <script src="/../js/ehtml.bundle.min.js" type="text/javascript"></script>
  </head>

  <body class="main">
    <div class="articles">

      <e-html data-src="/../html/first.html"></e-html>
      <e-html data-src="/../html/second.html"></e-html>
      <e-html data-src="/../html/third.html"></e-html>

    </div>
  </body>

</html>

and as you can see, we have three e-html tags here. And each of them refers to some html file which contains some part of the article.hmtl. This tag has only one custom attribute data-src, which tells us where exactly the file that we want to include is served.

And for example, first.html would look something like this

<div class="article">
  <!-- some content of the first article -->
</div>

And when you open articles.html in a browser, it will be rendered as if you included all the parts in one file:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

  <head>
    <link rel="shortcut icon" href="/../images/favicon.ico"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>e-html</title>
    <link rel="stylesheet" href="/../css/main.css">
    <script src="/../js/ehtml.bundle.min.js" type="text/javascript"></script>
  </head>

  <body class="main">
    <div class="articles">

      <div class="article">
        <!-- content of the first article -->
      </div>
      <div class="article">
        <!-- content of the second article -->
      </div>
      <div class="article">
        <!-- content of the third article -->
      </div>

    </div>
  </body>

</html>

The main benefit of using this element is that you can much more easily modify your big html files. So, instead of having one big html file where you have to find a specific part of it to modify, you can just find a file, which contains this specific part and make changes there.

Of course, this element makes an additional http(s) request for fetching a specific part, but you can always cache the files, so it would not cause any performance issues.

E-JSON
`e-json` allows you to fetch `json` resource by `GET` request from the server and apply some actions on the response. So, for example, let's say you have an endpoint `/album/{title}`, which returns following response:
title = 'Humbug'
{
  "title": "Humbug",
  "artist": "Arctic Monkeys",
  "type": "studio album",
  "releaseDate": "19 August 2009",
  "genre": "psychedelic rock, hard rock, stoner rock, desert rock",
  "length": "39:20",
  "label": "Domino",
  "producer": "James Ford, Joshua Homme"
}

Then you can fetch it via e-json like in following html code:

<e-json
  data-src="/../album/Humbug"
  data-response-name="albumResponse"
  data-actions-on-response="
    mapToTemplate('${albumResponse.body}', '#album-info');
  ">

  <template id="album-info" data-object-name="album">
    <div data-text="Title: ${album.title}"></div>
    <div data-text="Artist: ${album.artist}"></div>
    <div data-text="Type: ${album.type}"></div>
    <div data-text="Release date: ${album.releaseDate}"></div>
    <div data-text="Genre: ${album.genre}"></div>
    <div data-text="Length: ${album.length}"></div>
    <div data-text="Label: ${album.label}"></div>
    <div data-text="Producer: ${album.producer}"></div>
  </template>
</e-json>

So, e-json has attributes data-src which tells us where from we can fetch json response. Attribute data-response-name specifies the name that we want to use for the response. It contains body, statusCode and headers properties, so you can use them in the attribute data-actions-on-response. In this case we just decided to map body of our response to the element with id album-info, which also must have the attribute data-object-name. This attribute specifies the name of the object that we want to map. It's important to mention that you can map object only to <template>, which is in e-json that provides the object for mapping. More details about actions on response you can find in this section.

If you need some request headers, you can specify them in the attribute data-request-headers with format { "headerName": "headerValue", ... }.

You can also add attributes data-ajax-icon and data-progress-bar as element selectors for presenting progress of fetching data from the server. You can see how to use them in the examples.

E-JSON template (v1.0.12)
You can use `e-json` as a `