Skip to content

Instantly share code, notes, and snippets.

@jmas

jmas/gist:6d6574ac413855911716

Last active August 29, 2015 14:23
Download ZIP

Revisions

  1. jmas revised this gist Jun 16, 2015. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -55,7 +55,8 @@ DataList.prototype = {
    window.notifyList = new DataList(
    document.getElementById('notify'),
    [],
    document.getElementById('notify-item-tpl').innerHTML, function(itemEl, itemData) {
    document.getElementById('notify-item-tpl').innerHTML,
    function(itemEl, itemData) {
    var containerEl = itemEl.querySelector('[data-container]');
    var userEl = itemEl.querySelector('[data-user]');
    var userImageEl = itemEl.querySelector('[data-user-image]');
  2. jmas revised this gist Jun 16, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -29,7 +29,7 @@ DataList.prototype = {
    }
    this.el.innerHTML = '';
    for (var i=0,ln=this.data.length; i<ln; i++) {
    this.el.appendChild(this.makeItem(this.data[i]));
    this.el.appendChild(this.makeItemEl(this.data[i]));
    }
    },
    update: function(data) {
    @@ -39,7 +39,7 @@ DataList.prototype = {
    this.data = data;
    this.render();
    },
    makeItem: function(itemData) {
    makeItemEl: function(itemData) {
    var itemEl = document.createElement('DIV');
    itemEl.innerHTML = this.itemTpl;
    if (this.populateItemDataFn) {
  3. jmas renamed this gist Jun 16, 2015. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → gistfile1.js
    View file
    File renamed without changes.
  4. jmas revised this gist Jun 16, 2015. 1 changed file with 27 additions and 14 deletions.
    41 changes: 27 additions & 14 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -32,6 +32,13 @@ DataList.prototype = {
    this.el.appendChild(this.makeItem(this.data[i]));
    }
    },
    update: function(data) {
    if (! (data instanceof Array)) {
    throw new Error('data should be an Array.');
    }
    this.data = data;
    this.render();
    },
    makeItem: function(itemData) {
    var itemEl = document.createElement('DIV');
    itemEl.innerHTML = this.itemTpl;
    @@ -41,22 +48,28 @@ DataList.prototype = {
    return itemEl;
    }
    };


    // How to use

    window.notifyList = new DataList(document.getElementById('notify'), [
    window.notifyList = new DataList(
    document.getElementById('notify'),
    [],
    document.getElementById('notify-item-tpl').innerHTML, function(itemEl, itemData) {
    var containerEl = itemEl.querySelector('[data-container]');
    var userEl = itemEl.querySelector('[data-user]');
    var userImageEl = itemEl.querySelector('[data-user-image]');
    var userNameEl = itemEl.querySelector('[data-user-name]');
    var textEl = itemEl.querySelector('[data-text]');
    var actionEl = itemEl.querySelector('[data-action]');
    containerEl.classList.add('notify-item-new');
    userNameEl.innerHTML = itemData.name;
    textEl.innerHTML = 'Hello, world';
    actionEl.innerHTML = '<a class="btn btn-primary" href="#">Follow</a>';
    }
    );

    window.notifyList.update([
    { name: 'Hello' },
    { name: 'Bro' }
    ], document.getElementById('notify-item-tpl').innerHTML, function(itemEl, itemData) {
    var containerEl = itemEl.querySelector('[data-container]');
    var userEl = itemEl.querySelector('[data-user]');
    var userImageEl = itemEl.querySelector('[data-user-image]');
    var userNameEl = itemEl.querySelector('[data-user-name]');
    var textEl = itemEl.querySelector('[data-text]');
    var actionEl = itemEl.querySelector('[data-action]');
    containerEl.classList.add('notify-item-new');
    userNameEl.innerHTML = itemData.name;
    textEl.innerHTML = 'Hello, world';
    actionEl.innerHTML = '<a class="btn btn-primary" href="#">Follow</a>';
    });
    ]);
  5. jmas created this gist Jun 16, 2015.
    62 changes: 62 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,62 @@
    var DataList = function(el, data, itemTpl, populateItemDataFn) {
    if (! (el instanceof Node)) {
    throw new Error('el should be an Node.');
    }
    if (! (data instanceof Array)) {
    throw new Error('data should be an Array.');
    }
    if (typeof itemTpl !== 'string') {
    throw new Error('itemTpl should be an String.');
    }
    if (typeof populateItemDataFn !== 'undefined' && ! (populateItemDataFn instanceof Function)) {
    throw new Error('populateItemDataFn should be an Function.');
    }
    this.el = el;
    this.data = data;
    this.itemTpl = itemTpl;
    this.populateItemDataFn = populateItemDataFn;
    this.render();
    };

    DataList.prototype = {
    el: null,
    itemTpl: '',
    data: [],
    populateItemDataFn: null,
    render: function() {
    if (! this.el) {
    return;
    }
    this.el.innerHTML = '';
    for (var i=0,ln=this.data.length; i<ln; i++) {
    this.el.appendChild(this.makeItem(this.data[i]));
    }
    },
    makeItem: function(itemData) {
    var itemEl = document.createElement('DIV');
    itemEl.innerHTML = this.itemTpl;
    if (this.populateItemDataFn) {
    this.populateItemDataFn(itemEl, itemData);
    }
    return itemEl;
    }
    };


    // How to use

    window.notifyList = new DataList(document.getElementById('notify'), [
    { name: 'Hello' },
    { name: 'Bro' }
    ], document.getElementById('notify-item-tpl').innerHTML, function(itemEl, itemData) {
    var containerEl = itemEl.querySelector('[data-container]');
    var userEl = itemEl.querySelector('[data-user]');
    var userImageEl = itemEl.querySelector('[data-user-image]');
    var userNameEl = itemEl.querySelector('[data-user-name]');
    var textEl = itemEl.querySelector('[data-text]');
    var actionEl = itemEl.querySelector('[data-action]');
    containerEl.classList.add('notify-item-new');
    userNameEl.innerHTML = itemData.name;
    textEl.innerHTML = 'Hello, world';
    actionEl.innerHTML = '<a class="btn btn-primary" href="#">Follow</a>';
    });