sbosell’s gists

sbosell / sticker.html

Last active December 25, 2015 05:19

Modal Template

	<div class="modal-header">
	<h3>Select your Sticker</h3>
	</div>
	<div class="modal-body">

	<div ng-repeat="item in items">
	<a ng-click="changeSticker(item)"><sticker animation='item' isanimated='false' speed='0'></sticker></a>
	</div>

	</div>

sbosell / animacion.json

Created October 10, 2013 18:34

	[
	{"name": "pusheen", "width":96, "height": 100, "nframes": 4, "rframes": 2, "url": "https://m.ak.fbcdn.net/dragon.ak/hphotos-ak-ash3/s296x100/851578_185127901661476_1172208870_n.png", "speed": 200},
	{"name": "anooki", "width":480, "height":480, "nframes": 13, "rframes":4 , "url":"https://m.ak.fbcdn.net/dragon.ak/hphotos-ak-prn1/p480x480/851584_629578030410264_540358936_n.png", "speed": 100},
	{"name": "beast", "width":150, "height":100, "nframes": 5, "rframes": 3, "url": "https://m.ak.fbcdn.net/dragon.ak/hphotos-ak-prn1/s296x100/851560_668853719808805_601127660_n.png", "speed": 50}
	]

sbosell / animacion.json

Created October 10, 2013 18:40

Animados con Angular Parte II

	[
	{"name": "pusheen", "width":96, "height": 100, "nframes": 4, "rframes": 2, "url": "https://m.ak.fbcdn.net/dragon.ak/hphotos-ak-ash3/s296x100/851578_185127901661476_1172208870_n.png", "speed": 200},
	{"name": "anooki", "width":480, "height":480, "nframes": 13, "rframes":4 , "url":"https://m.ak.fbcdn.net/dragon.ak/hphotos-ak-prn1/p480x480/851584_629578030410264_540358936_n.png", "speed": 100},
	{"name": "beast", "width":150, "height":100, "nframes": 5, "rframes": 3, "url": "https://m.ak.fbcdn.net/dragon.ak/hphotos-ak-prn1/s296x100/851560_668853719808805_601127660_n.png", "speed": 50}
	]

sbosell / app.js

Created October 10, 2013 18:51

app.js controllers

	// lucuma tiene los modulos externales que usamos, safeApply y timeFunctions
	var app = angular.module('plunker', ['ui.bootstrap', 'ui.slider', 'lucuma']);

	app.value('stickerJson', 'animacion.json');

	app.controller('MainCtrl', function ($scope, $rootScope, $modal, stickerJson, $http) {

	$scope.stickersData = []; // lista de stickers del servicio web
	$scope.stickers = []; // lista de servicios para mostrar en la pagina web

sbosell / index.html

Created October 10, 2013 19:01

	<!DOCTYPE html>
	<html ng-app="plunker">
	<head>
	<meta charset="utf-8" />
	<title>AngularJS Plunker</title>
	<script>document.write('<base href="' + document.location + '" />');</script>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script data-require="[email protected]" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" ></script>
	<script src="lucuma.js"></script>

sbosell / gist:6923888

Created October 10, 2013 19:15

Calculate Position

	function calcBgPosition(index, nRows, nCols, nFrames, width, height) {
	var i = index % nFrames;
	var x = 0,
	y = 0;

	x = (i % nCols) * width * -1;
	y = Math.floor(i / (nCols)) * height * -1;
	return x + 'px ' + y + 'px';
	}

sbosell / gist:6923938

Created October 10, 2013 19:18

	element.bind('click', function (e) {
	e.preventDefault();
	// tenemos que usar safeApply porque es posible que tengamos un conflicto con un digest.
	// este nos ayuda evitar ese conflicto.
	safeApply(scope, function () {
	scope.isAnimated = !scope.isAnimated;
	});
	});

sbosell / gist:6923995

Created October 10, 2013 19:22

	scope.$watch('isAnimated', function (isAnimated) {
	// cuando isAnimated cambie necesitamos lanzarlo o pararlo
	if (scope.isAnimated) {
	startAnimation();
	} else {
	timeFunctions.$clearInterval(scope.animateTimeout);
	}
	});

sbosell / gist:6924148

Last active December 25, 2015 05:19

	function startAnimation() {
	// empezar animacion
	if (scope.isAnimated) {
	timeFunctions.$clearInterval(scope.animateTimeout);
	}
	scope.animateTimeout = timeFunctions.$setInterval(animateBg, scope.Animation.speed, scope);
	}

	function animateBg() {
	// camibar la pos de BG para la animacion

sbosell / gist:6924272

Created October 10, 2013 19:40

lucuma sbosell