Kuzcoo/LICENSE.txt

## README.md

      
    Raw
  

              README.md
            
          
    140infinite

Tweet-sized helper for infinite scroll.
How to

infinite(container)(function () {
		// your handler which triggers when
		// you reach the end of the container
	});
140byt.es

A tweet-sized, fork-to-play, community-curated collection of JavaScript.
How to play


Click the  button above to fork this gist.
Modify all the files to according to the rules below.
Save your entry and tweet it up!

Keep in mind that thanks to the awesome sensibilities of the GitHub team, gists are just repos. So feel free to clone yours and work locally for a more comfortable environment, and to allow commit messages.
Rules

All entries must exist in an index.js file, whose contents are

an assignable, valid Javascript expression that
contains no more than 140 bytes, and
does not leak to the global scope.

All entries must also be licensed under the WTFPL or equally permissive license.
For more information

See the 140byt.es site for a showcase of entries (built itself using 140-byte entries!), and follow @140bytes on Twitter.
To learn about byte-saving hacks for your own code, or to contribute what you've learned, head to the wiki.
140byt.es is brought to you by Jed Schmidt, with help from Alex Kloss. It was inspired by work from Thomas Fuchs and Dustin Diaz.

  
## annotated.js
function (c) {  // take an html element
	return function (f) { // f is the handler to attach
      return function () {
      	// if bottom < window height trigger handler
        c.getBoundingClientRect().bottom<window.innerHeight?f():'';
      };
    }
  };
}

## index.js
// 98 bytes
function(c){return function(f){return function(){c.getBoundingClientRect().bottom<window.innerHeight?f():""}}}

## LICENSE.txt
            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2015 Thomas Gérard <YOUR_URL_HERE>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  0. You just DO WHAT THE FUCK YOU WANT TO.

## package.json
{
  "name": "140infinite",

  "description": "Some kind of infinite scrolling oriented lib",

  "keywords": [
    "five",
    "descriptive",
    "keywords",
    "or",
    "fewer"
  ]
}

## test.html
<!DOCTYPE html>
<title>140infinite</title>
<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .img-container {
    flex: 1 0 300px;
    max-height: 300px;
    padding: 2px 4px;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out;
  }
</style>
<body>
<div class='container'>
</div>
<script>
  // write a small example that shows off the API for your example
  // and tests it in one fell swoop.

  // my lib
  var infinite = function(c){return function(f){return function(){c.getBoundingClientRect().bottom<window.innerHeight?f():""}}};


  // for appending images to the end of the block
  var loadImages = function (container) {
      var div = document.createElement('div');
      div.classList.add('img-container');
      div.innerHTML =
      '<img alt="kikoo" src="http://lorempixel.com/400/300/city?v='+Date.now()+'">';

      div.querySelector('img')
        .addEventListener('load', function show() {
        setTimeout(function() {div.style.opacity = 1;}
          , Math.random() * 100);
        this.removeEventListener('load', show);
      });

      container.appendChild(div);
  };

  var container = document
    .querySelector('.container');
  // preload some images
  for (var i = 0; i < 20; i++) { loadImages(container); }

  window.onscroll = infinite(container)(function () {
      for (var i = 0; i < 5; i++) { loadImages(container); }
    });
</script>
</body>
	function (c) { // take an html element
	return function (f) { // f is the handler to attach
	return function () {
	// if bottom < window height trigger handler
	c.getBoundingClientRect().bottom<window.innerHeight?f():'';
	};
	}
	};
	}
	// 98 bytes
	function(c){return function(f){return function(){c.getBoundingClientRect().bottom<window.innerHeight?f():""}}}
	DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
	Version 2, December 2004

	Copyright (C) 2015 Thomas Gérard <YOUR_URL_HERE>

	Everyone is permitted to copy and distribute verbatim or modified
	copies of this license document, and changing it is allowed as long
	as the name is changed.

	DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
	TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

	0. You just DO WHAT THE FUCK YOU WANT TO.
	{
	"name": "140infinite",

	"description": "Some kind of infinite scrolling oriented lib",

	"keywords": [
	"five",
	"descriptive",
	"keywords",
	"or",
	"fewer"
	]
	}
	<!DOCTYPE html>
	<title>140infinite</title>
	<style>
	.container {
	display: flex;
	flex-wrap: wrap;
	}
	.img-container {
	flex: 1 0 300px;
	max-height: 300px;
	padding: 2px 4px;
	opacity: 0;
	overflow: hidden;
	transition: opacity 0.5s ease-in-out;
	}
	</style>
	<body>
	<div class='container'>
	</div>
	<script>
	// write a small example that shows off the API for your example
	// and tests it in one fell swoop.

	// my lib
	var infinite = function(c){return function(f){return function(){c.getBoundingClientRect().bottom<window.innerHeight?f():""}}};


	// for appending images to the end of the block
	var loadImages = function (container) {
	var div = document.createElement('div');
	div.classList.add('img-container');
	div.innerHTML =
	'<img alt="kikoo" src="http://lorempixel.com/400/300/city?v='+Date.now()+'">';

	div.querySelector('img')
	.addEventListener('load', function show() {
	setTimeout(function() {div.style.opacity = 1;}
	, Math.random() * 100);
	this.removeEventListener('load', show);
	});

	container.appendChild(div);
	};

	var container = document
	.querySelector('.container');
	// preload some images
	for (var i = 0; i < 20; i++) { loadImages(container); }

	window.onscroll = infinite(container)(function () {
	for (var i = 0; i < 5; i++) { loadImages(container); }
	});
	</script>
	</body>