<commit_before><!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<title>Page title</title>

	<style type="text/css">
	div {
		width:100px;
		height:1000px;
		margin:1em;
		background:red;
	}
	</style>
</head>

<body>
	<div data-0="left:100px;" data-100="left:200px;">fpp</div>
	<!--<div data-start="0" data-end="50">bar</div>-->

	<script type="text/javascript">
	(function() {
		window.skrollr = {
			//Main entry point
			init: function(el) {
				return new skrollr(el || document.getElementsByTagName('body')[0]);
			}
		};

		var rxKeyframeAttribute = /^data-(\d+)$/;

		function skrollr(container) {
			var self = this;

			//The container element. The parent of all skrollables.
			this.container = container;

			//All event listeners
			this.listeners = {};

			//A list of all elements which should be animated associated with their the data.
			this.skrollables = [];

			//Will contain the max data-end value available.
			this.maxKeyFrame = 0;



			var allElements = this.container.getElementsByTagName('*');

			//Iterate over all elements inside the container.
			for(var i = 0; i < allElements.length; i++) {
				var
					el = allElements[i];
					fx = {},
					keyFrames = [];


				//Iterate over all attributes and search for keyframe attributes.
				for (var i = 0; i < el.attributes.length; i++) {
					var
						attr = el.attributes[i],
						match = attr.name.match(rxKeyframeAttribute);

					if(match !== null) {
						var frame = match[1] | 0;

						keyFrames.push({
							frame: frame,
							props: attr.value
						});

						if(frame > this.maxKeyFrame) {
							this.maxKeyFrame = frame;
						}
					}
				}


				//Does this element have keyframes?
				if(keyFrames.length) {
					keyFrames.sort(function(a, b) {
						return a.frame - b.frame;
					});

					this.skrollables.push({
						element: el,
						keyFrames: keyFrames
					});
				}
			}

			console.log(this.skrollables);

			//Let's go
			skrollr.addEventListener(this.container, 'scroll', function() {
				var top = skrollr.getScrollTop(self.container);

				self.trigger('scroll', top);

				self.trigger('beforerender', top);

				self.render(top);

				self.trigger('afterrender', top);
			});

			return this;
		}

		skrollr.prototype.render = function(top) {
			return this;
		};

		/**
			Triggers and event and calls each listener function
		*/
		skrollr.prototype.trigger = function(type) {
			var fns = this.listeners[type];

			if(fns !== undefined) {
				var args = Array.prototype.slice.call(arguments, 1);

				for(var i = 0; i < fns.length; i++) {
					fns[i].apply(this, args);
				}
			}
		};

		skrollr.prototype.on = function(type, fn) {
			(this.listeners[type] = this.listeners[type] || []).push(fn);

			return this;
		};

		/**
			Ommiting "val": getter
			Setting "val" null: remove
			Passing non-null: setter
		*/
		skrollr.prototype.data = function(el, key, val) {
			if(val === undefined) {
				return el.getAttribute('data-' + key);
			} else if(val === null) {
				el.removeAttribute('data-' + key);
			} else {
				el.setAttribute('data-' + key, val);
			}
		};


		/*
			Public static helpers
		*/

		/**
			Get an elements top scrollbar offset.
		*/
		skrollr.getScrollTop = function(el) {
			//TODO get the scrollTop of (el || this.element)
			return pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

			/*
			if(typeof pageYOffset!= 'undefined'){
				//most browsers
				return pageYOffset;
			}
			else{
				var B= document.body; //IE 'quirks'
				var D= document.documentElement; //IE with doctype
				D= (D.clientHeight)? D: B;
				return D.scrollTop;
			}
			*/
		};

		/**
			Attach an event handler to a DOM element
		*/
		skrollr.addEventListener = function(el, type, fn) {
			if (el.addEventListener) {
				el.addEventListener(type, fn, false);
			} else if (elem.attachEvent) {
				el.attachEvent('on' + type, fn);
			}
		}
	}());

	skrollr
		.init()
		.on('scroll', function(top) {
			console.log('scroll');
		})
		.on('beforerender', function() {
			console.log('beforerender');
		})
		.on('afterrender', function() {
			console.log('afterrender');<commit_msg>Proof of concept for numeric values is working<commit_after><!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<title>Page title</title>

	<style type="text/css">
	div {
		width:100px;
		height:1000px;
		margin:1em;
		background:red;
	}

	* {
		-moz-transition: all .3s;
	}
	</style>
</head>

<body>
	<div data-100="left:200px;" data-300="left:500px;">foo</div>
	<div data-0="left:300px;" data-100="left:700px;">bar</div>
	<!--<div data-start="0" data-end="50">bar</div>-->

	<script type="text/javascript" src="skrollr.js"></script>
	<script type="text/javascript">
	skrollr
		.init()
		.on('scroll', function(top) {
			//console.log('scroll');
		})
		.on('beforerender', function() {
			//console.log('beforerender');
		})
		.on('afterrender', function() {
			//console.log('afterrender');
{'fraction_non_alphanumeric': 0.16921549155908638, 'fraction_numerical': 0.01310824230387289, 'mean_word_length': 2.919066147859922, 'pattern_counts': {'":': 1, '<': 42, '<?xml version=': 0, '>': 40, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2695433', 'n_tokens_mistral': 2193, 'n_tokens_neox': 1735, 'n_words': 379}