ImageGrid/ui/experiments/dynamic-loading.html

<script src="../jquery.js"></script>

<style>

.field {
	width: auto;
	overflow: visible;
}

.ribbon {
	padding: 10px;
	height: 100px;

	width: auto;
	overflow: visible;
	white-space: nowrap;
	font-size: 0px;
}

.image {
	display: inline-block;
	height: 80px;
	width: 80px;
	background: silver;
}

.current.image {
	background: gray;
}

.unloaded.image {
	opacity: 0.5;
}

</style>


<div class="field">
</div>

<script>

var json = {
	position: 10, 
	ribbons:[
		{
			3: {},
			4: {},
			6: {},
			7: {},
			8: {},
			10: {},
			12: {},
			13: {},
			18: {},
			19: {},
			20: {},
			30: {},
			34: {},
			37: {},
			40: {},
		},
		{
			103: {},
			104: {},
			106: {},
			107: {},
			108: {},
			1010: {},
			1012: {},
			1013: {},
			1018: {},
			1019: {},
			1020: {},
			1030: {},
			1034: {},
			1037: {},
			1040: {},
		},
		{
			203: {},
			204: {},
			206: {},
			207: {},
			208: {},
			2010: {},
			2012: {},
			2013: {},
			2018: {},
			2019: {},
			2020: {},
			2030: {},
			2034: {},
			2037: {},
			2040: {},
		}
	]
}


var LOAD = 5

function enumerate(obj, predicate){
	if(predicate == null){
		predicate = function(o, a){return true}
	}
	var res = []
	for(var k in obj){
		predicate(obj, k) && res.push(k)
	}
	return res
}
	

// build an image element...
function makeImage(id){
	return $('<div class="image"/>')
			.attr({id: id})
			.click(selectImage)
}

function updateImage(image, cur, r, index){
	console.log(cur, r, index)
	var id = image.attr('id')
	if(id == cur){
		image.addClass('current')
	}
	var cur_i = index.indexOf(cur)
	if(cur_i < 0 || Math.abs(index.indexOf(id)-cur_i) > r){
		image.addClass('unloaded')
	} else {
		image.removeClass('unloaded')
	}
	return image
}

function loadJSON(json){
	var field = $('.field')
	var cur_id = json.position+''
	var ribbons = json.ribbons
	var r = Math.floor(LOAD/2)

	var view_ribbons = $('.ribbon')

	for(var i=0; i<ribbons.length; i++){
		var images = ribbons[i]
		var index = enumerate(images)
		if(view_ribbons[i] == null){
			var ribbon = $('<div class="ribbon"/>').appendTo(field)
			for(var j in images){
				updateImage(makeImage(j), cur_id, r, index).appendTo(ribbon)
			}
		} else {
			var ribbon = $(view_ribbons[i])
			for(var j in images){
				updateImage(ribbon.children('#'+j), cur_id, r, index)
			}
		}
	}
}

function selectImage(){
	// update view...
	$('.current.image').removeClass('current')
	$(this).addClass('current')
	// update json...
	json.position = $(this).attr('id')
	// update visible images...
	loadJSON(json)
}

loadJSON(json)

</script>