Skip to content

Instantly share code, notes, and snippets.

View kmaida's full-sized avatar

Kim Maida kmaida

271 followers · 7 following
View GitHub Profile
@kmaida
kmaida / ng-image-onload.js
Last active November 3, 2017 14:25
AngularJS image onload directive
app.module['myApp'].directive('imageOnload', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
// call the function that was passed
scope.$apply(attrs.imageOnload);
// usage: <img ng-src="src" image-onload="imgLoadedCallback()" />
});
@kmaida
kmaida / animated-ng-if.scss
Last active March 9, 2016 15:00
AngularJS - Sass - Animating the height of an ng-if to achieve an expanding/collapsing effect. To animate ng-show/hide, see: http://codepen.io/kmaida/pen/QwgddQ
.animated-ng-if {
&.ng-enter {
transition: max-height 350ms ease-in; /* transition the height FROM 0 to x when entering (autoprefix or use mixin) */
max-height: 0;
}
&.ng-enter.ng-enter-active,
&.ng-leave {
max-height: 600px; /* max-height when active (adjust value to fit needs) */
}
&.ng-leave.ng-leave-active {
@kmaida
kmaida / object-inheritance.js
Last active August 29, 2015 14:11
JavaScript inheritance with objects - http://davidwalsh.name/javascript-objects-deconstruction
// Define an object with init function and add methods
var Person = {
init: function(name, gender) {
this.name = name;
this.gender = gender;
},
speak: function() {
alert('Howdy, my name is ' + this.name);
}
};
@kmaida
kmaida / grunt-beep.js
Created December 12, 2014 19:40
Grunt - register 'beep!' task
grunt.registerTask('beep', 'beep!', function() { grunt.log.writeln('\x07').ok(); }); // beep!
@kmaida
kmaida / prototypal-inheritance.js
Last active August 29, 2015 14:11
JavaScript prototypal inheritance example - http://stackoverflow.com/questions/387707/whats-the-best-way-to-define-a-class-in-javascript
// Define a class like this
function Person(name, gender) {
// Add object properties like this
this.name = name;
this.gender = gender;
}
// Add methods like this. All Person objects will be able to invoke this
Person.prototype.speak = function() {
alert('Howdy, my name is ' + this.name);
@kmaida
kmaida / resourceUrlWhitelist.js
Last active August 29, 2015 14:11
AngularJS 1.2+ - Config to whitelist subdomains on the same root domain
var urlDomain = window.location.hostname.replace('www.', '');
app.config('$sceDelegateProvider', function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'http://*.' + urlDomain + '/**'
]);
});
@kmaida
kmaida / trustAsHTMLFilter.js
Last active July 13, 2018 20:05
AngularJS 1.2+ - $sce.trustAsHtml() using a filter. Usage: ng-bind-html="string | trustAsHTML"
myApp.filter('trustAsHTML', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
@kmaida
kmaida / startFromFilter.js
Last active April 10, 2017 20:45
AngularJS - filter for ng-repeat for startFrom; can be used with built in limitTo. Usage: <div ng-repeat="item in items | startFrom:1 | limitTo:items.length-2">
app.filter('startFrom', function() {
return function(input, start) {
if (input) {
start = +start; // parse to int
return input.slice(start);
}
return [];
}
});
@kmaida
kmaida / dynamicPagRepeatAngular.html
Last active December 13, 2023 14:37
AngularJS - Dynamic pagination on ng-repeat with search/filtering. Use with ui.bootstrap
<!DOCTYPE HTML>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dynamic Pagination w/ Filtering</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Kim Maida">
<!-- JS Libraries -->
@kmaida
kmaida / matchmediacheck.js
Last active August 29, 2015 13:57
Function to check if matchMedia is supported; if so, use it, otherwise, use JS window width calculation (fixes issues with -webkit browsers returning incorrect window widths due to scrollbars)
function getviewport() {
var win = window,
matchMediaSupported = (win.matchMedia || win.msMatchMedia),
viewport;
if (matchMediaSupported) {
if (win.matchMedia('screen and (min-width: 641px)').matches) {
viewport = 'large';
} else {
viewport = 'small';