Created
February 24, 2017 18:38
-
-
Save federicofazzeri/7ac188962da0c5cff9b2eb3e8915b5d7 to your computer and use it in GitHub Desktop.
Simple list filter without "bothering" angular $scope
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(window, angular) { | |
'use strict'; | |
/** | |
* Simple list filter without "bothering" angular $scope | |
* I used OLOO as a OO Js style (instead of the classic prototypal inheritance) | |
*/ | |
var listFilter = angular.module('listFilter', []); | |
var jqLite = angular.element; | |
var exceptions = {}; | |
var dom = Object.create(exceptions); | |
var inits = Object.create(dom); | |
var listFilterSrv = Object.create(inits); | |
listFilter.factory('ListFilterSrv', ListFilterSrv); | |
exceptions.checkNodeList = function(nodeList){ | |
if(!nodeList || !nodeList.length || nodeList.length <= 0){ | |
throw 'supply an array of Htmlelements or a nodelist'; | |
} | |
}; | |
exceptions.checkButton = function(button){ | |
if(!button || (!button.nodeName && !button[0])){ | |
throw 'supply a valid element as button'; | |
} | |
}; | |
dom.hideAll = function(){ | |
this.list.map(function(ele){ | |
if(ele.css('display') !== 'none'){ | |
//ele.addClass('hg-hide'); | |
} | |
}); | |
}; | |
dom.showHide = function(){ | |
var i = this.shown, | |
action = this.expanded ? 'removeClass' : 'addClass'; | |
while(i<this.list.length){ | |
this.list[i][action](this.hideListEleClass); | |
i++; | |
} | |
}; | |
dom.updateMessage = function(){ | |
var showing = this.list.reduce(function(tot, curr){ | |
if(!curr.hasClass(this.hideListEleClass)){ | |
tot++; | |
} | |
return tot; | |
}.bind(this), 0); | |
if(this.message){ | |
this.msgShownEle.textContent = showing; | |
this.msgTotEle.textContent = this.list.length; | |
} | |
}; | |
inits.initList = function(nodeList){ | |
var list; | |
this.checkNodeList(nodeList); | |
if(Array.isArray(nodeList)){ | |
list = nodeList.map(function(ele){ | |
if(ele.nodeName){ | |
return angular.element(ele); | |
} | |
}); | |
}else{ | |
list = Array.prototype.map.call(nodeList, function(ele){ | |
if(ele.nodeName){ | |
return angular.element(ele); | |
} | |
}); | |
} | |
this.list = list; | |
}; | |
inits.initShown = function(shown){ | |
var n = Number(shown); | |
this.shown = n || 4; | |
}; | |
inits.initButton = function(button){ | |
this.checkButton(button); | |
this.button = (button[0] && button.hasClass) ? button : angular.element(button); | |
}; | |
inits.initButtonExpandedClass = function(buttonClass){ | |
this.buttonExpandedClass = buttonClass || 'expanded'; | |
}; | |
inits.initMessage = function(ele){ | |
if(!ele){ | |
return; | |
} | |
this.message = (ele[0] && ele[0].nodeName) ? ele : angular.element(ele); | |
}; | |
inits.initMessageNumbersToUpdateEles = function(shownClass, totClass){ | |
shownClass = shownClass || 'shown'; | |
totClass = totClass || 'tot'; | |
this.msgShownEle = this.message[0].getElementsByClassName(shownClass)[0]; | |
this.msgTotEle = this.message[0].getElementsByClassName(totClass)[0]; | |
}; | |
inits.initHideListEleClass = function (className) { | |
this.hideListEleClass = className || 'ng-hide'; | |
}; | |
listFilterSrv.init = function(nodeList, button, message, shown, buttonClass, hideClass){ | |
this.initList(nodeList); | |
this.initButton(button); | |
this.initMessage(message); | |
this.initShown(shown); | |
this.initButtonExpandedClass(buttonClass); | |
this.initHideListEleClass(hideClass); | |
this.initMessageNumbersToUpdateEles(); | |
this.showHide(); | |
this.updateMessage(); | |
}; | |
listFilterSrv.toggleState = function(){ | |
this.expanded = !this.expanded; | |
}; | |
listFilterSrv.runFilter = function(){ | |
this.toggleState(); | |
this.showHide(); | |
this.updateMessage(); | |
}; | |
function ListFilterSrv(){ | |
return { | |
newInstance: function(){ | |
return Object.create(listFilterSrv); | |
} | |
}; | |
} | |
})(window, window.angular); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment