max · August 29, 2015 14:06
diff --git a/index.html b/index.html
 <!doctype html>
 <meta charset="utf-8">
 <title>Example</title>
 <script src=uilang.js></script>

 <style>
  h2 {
    background: #FAFAFB
  }
  h2.active {
    background: white
  }
  p {
    display: none
  }
  h2.active + p {
    display: block
  }
 </style>

 <code>
  clicking on "h2" removes class "active" on "h2.active"

  clicking on "h2" adds class "active" on "target"
 </code>

 <h1>My simple Markdown editor</h1>

 <h2 class=active>Write</h2>
 <p>You should probably use a `script` tag.

 <h2>Preview</h2>
 <p>You should probably use a <code>script</code> tag
diff --git a/uilang.js b/uilang.js
 /*
 * uilang v1.0.1
 * http://uilang.com
 */

 document.addEventListener("DOMContentLoaded", function() {
  "use strict"

  var codeElements = document.getElementsByTagName("code")
  var i = codeElements.length
  var delimiter = "clicking on"
  var codeBlock
  var codeBlockContent

  while (i--) {
    var code = codeElements[i]
    var content = code.textContent.trim()
    if (content.lastIndexOf(delimiter, 0) === 0) {
      codeBlock = code
      codeBlockContent = content
      break
    }
  }

  if (!codeBlock) return
  codeBlock.parentNode.removeChild(codeBlock)

  function InstructionParsing(instruction) {
    var separator = instruction.charAt(0)
    var instructionSplit = instruction.split(separator)

    this.clickSelector = instructionSplit[1]
    this.classBehavior = instructionSplit[2].trim().split(" ")[0]
    this.classValue = instructionSplit[3]
    this.targetSelector = instructionSplit[5]
  }

  function UIElement(clickSelector, classBehavior, classValue, targetSelector) {
    this.clickSelector = clickSelector
    this.classBehavior = classBehavior.charAt(classBehavior.length-1) == "s"
                       ? classBehavior.substring(0, classBehavior.length-1)
                       : classBehavior
    this.classValue = classValue.charAt(0) == "."
                    ? classValue.substring(1, classValue.length)
                    : classValue
    this.targetSelector = targetSelector
    this.createEventListener()
  }

  UIElement.prototype.createEventListener = function() {
    var self = this
    var clicked = document.querySelectorAll(self.clickSelector)
    var i = clicked.length

    if (i < 1) {
      throw new Error("There's no element matching your \"" + self.clickSelector + "\" CSS selector.")
    }

    while (i--) {
      clicked.item(i).addEventListener("click", clickCallback)
    }

    function updateClass(el) {
      el.classList[self.classBehavior](self.classValue)
    }

    function clickCallback(e) {
      switch (self.targetSelector) {
        case "target" :
        case "this"   :
        case "it"     :
        case "itself" :
        case undefined:
          updateClass(e.target)
          break
        default:
          var target = document.querySelectorAll(self.targetSelector)
          var i = target.length
          while (i--) {
            updateClass(target.item(i))
          }
      }
      if (e.target.nodeName.toLowerCase() == "a") {
        e.preventDefault()
      }
    }
  }

  codeBlockContent.split(delimiter).forEach(function(data) {
    if (!data) return
    var params = new InstructionParsing(data.trim())
    new UIElement(
      params.clickSelector,
      params.classBehavior,
      params.classValue,
      params.targetSelector
    )
  })
 })
	<!doctype html>
	<meta charset="utf-8">
	<title>Example</title>
	<script src=uilang.js></script>

	<style>
	h2 {
	background: #FAFAFB
	}
	h2.active {
	background: white
	}
	p {
	display: none
	}
	h2.active + p {
	display: block
	}
	</style>

	<code>
	clicking on "h2" removes class "active" on "h2.active"

	clicking on "h2" adds class "active" on "target"
	</code>

	<h1>My simple Markdown editor</h1>

	<h2 class=active>Write</h2>
	<p>You should probably use a `script` tag.

	<h2>Preview</h2>
	<p>You should probably use a <code>script</code> tag
	/*
	* uilang v1.0.1
	* http://uilang.com
	*/

	document.addEventListener("DOMContentLoaded", function() {
	"use strict"

	var codeElements = document.getElementsByTagName("code")
	var i = codeElements.length
	var delimiter = "clicking on"
	var codeBlock
	var codeBlockContent

	while (i--) {
	var code = codeElements[i]
	var content = code.textContent.trim()
	if (content.lastIndexOf(delimiter, 0) === 0) {
	codeBlock = code
	codeBlockContent = content
	break
	}
	}

	if (!codeBlock) return
	codeBlock.parentNode.removeChild(codeBlock)

	function InstructionParsing(instruction) {
	var separator = instruction.charAt(0)
	var instructionSplit = instruction.split(separator)

	this.clickSelector = instructionSplit[1]
	this.classBehavior = instructionSplit[2].trim().split(" ")[0]
	this.classValue = instructionSplit[3]
	this.targetSelector = instructionSplit[5]
	}

	function UIElement(clickSelector, classBehavior, classValue, targetSelector) {
	this.clickSelector = clickSelector
	this.classBehavior = classBehavior.charAt(classBehavior.length-1) == "s"
	? classBehavior.substring(0, classBehavior.length-1)
	: classBehavior
	this.classValue = classValue.charAt(0) == "."
	? classValue.substring(1, classValue.length)
	: classValue
	this.targetSelector = targetSelector
	this.createEventListener()
	}

	UIElement.prototype.createEventListener = function() {
	var self = this
	var clicked = document.querySelectorAll(self.clickSelector)
	var i = clicked.length

	if (i < 1) {
	throw new Error("There's no element matching your \"" + self.clickSelector + "\" CSS selector.")
	}

	while (i--) {
	clicked.item(i).addEventListener("click", clickCallback)
	}

	function updateClass(el) {
	el.classList[self.classBehavior](self.classValue)
	}

	function clickCallback(e) {
	switch (self.targetSelector) {
	case "target" :
	case "this" :
	case "it" :
	case "itself" :
	case undefined:
	updateClass(e.target)
	break
	default:
	var target = document.querySelectorAll(self.targetSelector)
	var i = target.length
	while (i--) {
	updateClass(target.item(i))
	}
	}
	if (e.target.nodeName.toLowerCase() == "a") {
	e.preventDefault()
	}
	}
	}

	codeBlockContent.split(delimiter).forEach(function(data) {
	if (!data) return
	var params = new InstructionParsing(data.trim())
	new UIElement(
	params.clickSelector,
	params.classBehavior,
	params.classValue,
	params.targetSelector
	)
	})
	})