Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Replace jquery usage by domify/classes #1

Closed
wants to merge 1 commit into from

4 participants

Arpad Borsos TJ Holowaychuk Nami-Doc Dominic Barnes
Arpad Borsos
Owner

I wasn’t able to use component/dom, I’ve fixed that separately, maybe I will migrate this to dom later.

TJ Holowaychuk

unfortunately for a few of these I think we'll have to wait until dom is more ready, we need a few things in this case for sure, the domready portion x-browser, event handling x-browser, a querySelector fallback with sizzle or something smaller

Nami-Doc
Owner

zest can be used, I rembered something for event handling, and I think extracting domready into a component isn't that much of a problem. Would you consider it, if this was ok ?

Dominic Barnes

jQuery was removed via #6 (just merged)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Sep 11, 2012
Arpad Borsos Swatinem Replace jquery usage by domify/classes d0aed39
This page is out of date. Refresh to see the latest.

Showing 2 changed files with 31 additions and 26 deletions. Show diff stats Hide diff stats

  1. +3 2 component.json
  2. +28 24 index.js
5 component.json
@@ -5,8 +5,9 @@
5 5 "keywords": ["notify", "notification", "ui", "growl"],
6 6 "dependencies": {
7 7 "component/emitter": "*",
8   - "component/jquery": "*"
  8 + "component/domify": "*",
  9 + "component/classes": "*"
9 10 },
10 11 "scripts": ["index.js", "template.js"],
11 12 "styles": ["notification.css"]
12   -}
  13 +}
52 index.js
@@ -4,7 +4,8 @@
4 4 */
5 5
6 6 var Emitter = require('emitter')
7   - , o = require('jquery');
  7 + , domify = require('domify')
  8 + , classes = require('classes');
8 9
9 10 /**
10 11 * Notification list.
@@ -19,11 +20,11 @@ var list;
19 20 exports = module.exports = notify;
20 21
21 22 // list
  23 +document.addEventListener('DOMContentLoaded', function () {
  24 + list = domify('<ul id="notifications"></ul>');
  25 + document.querySelector('body').appendChild(list);
  26 +}, false);
22 27
23   -o(function(){
24   - list = o('<ul id="notifications">');
25   - list.appendTo('body');
26   -})
27 28
28 29 /**
29 30 * Return a new `Notification` with the given
@@ -92,9 +93,10 @@ exports.Notification = Notification;
92 93 function Notification(options) {
93 94 Emitter.call(this);
94 95 options = options || {};
95   - this.el = o(require('./template'));
  96 + this.el = domify(require('./template'));
  97 + this.classes = classes(this.el);
96 98 this.render(options);
97   - if (options.classname) this.el.addClass(options.classname);
  99 + if (options.classname) this.classes.add(options.classname);
98 100 if (Notification.effect) this.effect(Notification.effect);
99 101 };
100 102
@@ -115,31 +117,33 @@ Notification.prototype.render = function(options){
115 117 var el = this.el
116 118 , title = options.title
117 119 , msg = options.message
118   - , self = this;
  120 + , self = this
  121 + , titleElement = el.querySelector('.title')
  122 + , contentElement = el.querySelector('p');
119 123
120   - el.find('.close').click(function(){
  124 + el.querySelector('.close').addEventListener('click', function(){
121 125 self.emit('close');
122 126 self.hide();
123 127 return false;
124   - });
  128 + }, false);
125 129
126   - el.click(function(e){
  130 + el.addEventListener('click', function(e){
127 131 e.preventDefault();
128 132 self.emit('click', e);
129   - });
  133 + }, false);
130 134
131   - el.find('.title').text(title);
132   - if (!title) el.find('.title').remove();
  135 + titleElement.textContent = title;
  136 + if (!title) titleElement.parentNode.removeChild(titleElement);
133 137
134 138 // message
135 139 if ('string' == typeof msg) {
136   - el.find('p').text(msg);
  140 + contentElement.textContent = msg;
137 141 } else if (msg) {
138   - el.find('p').replaceWith(msg.el || msg);
  142 + contentElement.parentNode.replaceChild(msg.el || msg, contentElement);
139 143 }
140 144
141 145 setTimeout(function(){
142   - el.removeClass('hide');
  146 + self.classes.remove('hide');
143 147 }, 0);
144 148 };
145 149
@@ -151,7 +155,7 @@ Notification.prototype.render = function(options){
151 155 */
152 156
153 157 Notification.prototype.closable = function(){
154   - this.el.addClass('closable');
  158 + this.classes.add('closable');
155 159 return this;
156 160 };
157 161
@@ -165,7 +169,7 @@ Notification.prototype.closable = function(){
165 169
166 170 Notification.prototype.effect = function(type){
167 171 this._effect = type;
168   - this.el.addClass(type);
  172 + this.classes.add(type);
169 173 return this;
170 174 };
171 175
@@ -177,7 +181,7 @@ Notification.prototype.effect = function(type){
177 181 */
178 182
179 183 Notification.prototype.show = function(){
180   - this.el.appendTo(list);
  184 + list.appendChild(this.el);
181 185 return this;
182 186 };
183 187
@@ -191,7 +195,7 @@ Notification.prototype.show = function(){
191 195
192 196 Notification.prototype.type = function(type){
193 197 this._type = type;
194   - this.el.addClass(type);
  198 + this.classes.add(type);
195 199 return this;
196 200 };
197 201
@@ -229,7 +233,7 @@ Notification.prototype.hide = function(ms){
229 233 }
230 234
231 235 // hide / remove
232   - this.el.addClass('hide');
  236 + this.classes.add('hide');
233 237 if (this._effect) {
234 238 setTimeout(function(self){
235 239 self.remove();
@@ -249,6 +253,6 @@ Notification.prototype.hide = function(ms){
249 253 */
250 254
251 255 Notification.prototype.remove = function(){
252   - this.el.remove();
  256 + list.removeChild(this.el);
253 257 return this;
254   -};
  258 +};

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.