First commit

Author: Shallker Wang

.gitignore

@@ -0,0 +1,2 @@
+components
+build

History.md

@@ -0,0 +1,14 @@
+
+build: components index.js lib/*.js
+	@component build --dev
+	@touch build/done
+	@rm build/done
+	@echo build done
+
+components: component.json
+	@component install --dev
+
+clean:
+	rm -fr build components template.js
+
+.PHONY: clean

Makefile

@@ -0,0 +1,29 @@
+
+# object-element
+
+  The base abstraction of object element
+
+## Installation
+
+  Install with [component(1)](http://component.io):
+
+    $ component install object-element/object-element
+
+## API
+### objectElement
+#### Properties
+##### .width
+Get or set by pixels, offsetWidth
+
+##### .height
+Get or set by pixels, offsetHeight
+
+##### .id
+##### .tag
+##### .text
+##### .html
+
+
+## License
+
+  MIT

Readme.md

@@ -0,0 +1,21 @@
+{
+  "name": "object-element",
+  "repo": "object-element/object-element",
+  "description": "The base abstraction of object element",
+  "version": "0.0.1",
+  "keywords": [],
+  "dependencies": {
+    "component/domify": "*"
+  },
+  "development": {
+    "shallker/simple-test": "*",
+    "shallker/dom-helper": "*"
+  },
+  "license": "MIT",
+  "main": "index.js",
+  "scripts": [
+    "index.js",
+    "lib/events.js",
+    "lib/object-element.js"
+  ]
+}

component.json

@@ -0,0 +1 @@
+module.exports = require('./lib/object-element');

index.js

@@ -0,0 +1,65 @@
+module.exports = Events;
+
+function Events() {}
+
+Events.prototype.on = function (eventname, callback) {
+  if (typeof this.eventsRegistry[eventname] === 'undefined') {
+    this.eventsRegistry[eventname] = [];
+  }
+
+  return this.eventsRegistry[eventname].push(callback);
+}
+
+Events.prototype.off = function (eventname, callback) {
+  var i, callbacks = this.eventsRegistry[eventname];
+
+  if (callbacks === 'undefined') {
+    return false;
+  }
+
+  for (i = 0; i < callbacks.length; i++) {
+    if (callbacks[i] === callback) {
+      return callbacks.splice(i, 1);
+    }
+  }
+
+  return false;
+}
+
+Events.prototype.trigger = function (eventname, args) {
+  args = slice.call(arguments);
+  eventname = args.shift();
+
+  var callbacks = this.eventsRegistry[eventname];
+  var host = this;
+
+  if (callbacks === 'undefined') {
+    return this;
+  }
+
+  callbacks.forEach(function (callback, index) {
+    setTimeout(function () {
+      callback.apply(host, args);
+    }, 0);
+  });
+
+  return this;
+}
+
+Events.prototype.triggerSync = function (eventname, args) {
+  args = slice.call(arguments);
+  eventname = args.shift();
+
+  var callbacks = this.eventsRegistry[eventname];
+  var host = this;
+
+  if (callbacks === 'undefined') {
+    return this;
+  }
+
+  callbacks.forEach(function (callback, index) {
+    callback.apply(host, args);
+  });
+
+  return this;
+}

lib/events.js

@@ -0,0 +1,131 @@
+var domify = require('domify');
+var Events = require('./events');
+var slice = Array.prototype.slice;
+
+module.exports = ObjectElement;
+
+function ObjectElement(param) {
+  var element, eventsRegistry = {};
+
+  if (typeof param === 'undefined' || param === null) {
+    element = document.createElement('div');
+  } else if (typeof param === 'string') {
+    element = document.createElement(param);
+  } else if (typeof param === 'object') {
+    element = param;
+  }
+
+  Object.defineProperty(this, 'element', {
+    get: function () {
+      return element;
+    },
+
+    set: function (value) {
+      element = value;
+    }
+  });
+
+  Object.defineProperty(this, 'eventsRegistry', {
+    get: function () {
+      return eventsRegistry
+    }
+  });
+}
+
+/**
+ * Wrap HTMLElement with ObjectElement
+ * @param  {HTMLElement element}
+ * @return {ObjectElement}
+ */
+ObjectElement.wrapElement = function (element) {
+  return element.OBJECT_ELEMENT ? element : new ObjectElement(element);
+}
+
+/**
+ * Loop through HTMLElements and wrap each of them with ObjectElement
+ * @param  {Array elements}
+ * @return {Array}
+ */
+ObjectElement.wrapElements = function (elements) {
+  elements = slice.call(elements);
+
+  return elements.map(function (element, i) {
+    return ObjectElement.wrapElement(element);
+  });
+}
+
+ObjectElement.createElement = function (tag) {
+  tag = tag || 'div';
+
+  return this.wrapElement(document.createElement(tag));
+}
+
+ObjectElement.prototype = new Events;
+
+ObjectElement.prototype.defineProperty = function (name, defines) {
+  Object.defineProperty(this, name, defines);
+}
+
+ObjectElement.prototype.defineProperty('OBJECT_ELEMENT', {
+  get: function () {
+    return 1;
+  }
+});
+
+/**
+ * Shortcut to .element.id
+ */
+ObjectElement.prototype.defineProperty('id', {
+  get: function () {
+    return this.element.id;
+  },
+
+  set: function (value) {
+    this.element.id = value;
+  }
+});
+
+/**
+ * Shortcut to .element.tagName
+ */
+ObjectElement.prototype.defineProperty('tag', {
+  get: function () {
+    return this.element.tagName;
+  }
+});
+
+/**
+ * Get or set textContent of the element
+ */
+ObjectElement.prototype.defineProperty('text', {
+  get: function () {
+    return this.element.textContent;
+  },
+
+  set: function (value) {
+    this.element.textContent = value;
+  }
+});
+
+/**
+ * Get or set innerHTML of the element
+ */
+ObjectElement.prototype.defineProperty('html', {
+  get: function () {
+    return this.element.innerHTML;
+  },
+
+  set: function (htmlString) {
+    this.element.innerHTML = '';
+    this.element.appendChild(domify(htmlString));
+  }
+});
+
+/**
+ * Call a function on this element
+ * @param  {Function callback}
+ * @return {Null}
+ */
+ObjectElement.prototype.tie = function (callback) {
+  callback.call(this, this.element);
+}

lib/object-element.js

@@ -0,0 +1,7 @@
+{
+  "server": {
+    "port": 3000,
+    "host": "./"
+  },
+  "liverefresh": "./"
+}

start.json

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test</title>
+  </head>
+  <body>
+    <script src="/build/build.js"></script>
+    <script>
+      var ObjectElement = require('object-element');
+      var test = require('simple-test');
+      var dom = require('dom-helper');
+
+      test('objectElement.tie(callback)', function () {
+        var div = dom.insertDiv();
+        var objectDiv = new ObjectElement(div);
+
+        objectDiv.tie(function (el) {
+          test.eq(el, div);
+          test.eq(this, objectDiv);
+        });
+
+        dom.remove(div);
+      });
+      </script>
+  </body>
+</html>

test/methods.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test</title>
+  </head>
+  <body>
+    <script src="/build/build.js"></script>
+    <script>
+      var ObjectElement = require('object-element');
+      var test = require('simple-test');
+      var dom = require('dom-helper');
+
+      test('objectElement.id', function () {
+        var div = dom.insertDiv();
+        var objectDiv = new ObjectElement(div);
+
+        objectDiv.id = 'test';
+        test.eq(div.id, 'test');
+        dom.remove(div);
+      });
+
+      test('objectElement.text', function () {
+        var div = dom.insertDiv();
+        var objectDiv = new ObjectElement(div);
+
+        objectDiv.text = '.text';
+        test.eq(div.textContent, '.text');
+        dom.remove(div);
+      });
+
+      test('objectElement.html', function () {
+        var div = dom.insertDiv();
+        var objectDiv = new ObjectElement(div);
+
+        objectDiv.html = '<div>html</div>';
+        dom.remove(div);
+      });
+
+      </script>
+  </body>
+</html>