demos/FilePicker/filePicker.js
function fileRef(item, network, bucket, selected){

		this.els = [];
		this.selected = false;

		this.item = {};

		// Item contents change
		this.update = function(item){
			if(!item){
				return this.item;
			}
			else {
				// Merge the two together
				this.item = hello.utils.merge(this.item, item);
			}

			// Loop through the elements and update their content
			for(var i=0;i<this.els.length;i++){
				this.els[i].getElementsByTagName('span')[0].innerHTML = this.item.name;
				if(this.item.thumbnail){
					this.els[i].getElementsByTagName('img')[0].src = this.item.thumbnail;
				}
			}
		};

		// Create an element in the given bucket,
		// adding on click event handlers
		this.create = function(bucket){
			var item = this.item;
			var self = this;
			var el = doc.createElement('li');
			el.title = item.name;
			el.innerHTML = "<img "+(item.thumbnail?"src='"+item.thumbnail+"'":"")+"/>"
							+"<span>"+(item.name||'')+"</span>";
			el.onclick = function(){
				// Is this a folder?
				if(item.type==='folder'||item.type==='album'){
					getBucket(network+":"+(item.files?item.files:item.id+"/files"), item.name, bucket.id );
				}
				else {
					// Toggle selected
					self.toggleSelect();
				}
			};
			// Add to bucket
			bucket.appendChild(el);

			// Add to local store
			this.els.push(el);

			return el;
		};


		this.toggleSelect = function(bool){

			if(bool===this.selected){
				// nothing
				return;
			}
			// else change

			// toggle
			this.selected = !this.selected;

			// Selected
			if(this.selected){
				// Does the element exist within the local bucket
				var local = false;
				for(i=0;i<this.els.length;i++){
					if( this.els[i].parentNode === select_el ){
						local=true;
						break;
					}
				}
				if(!local){
					// create it
					this.create(select_el);
				}
			}

			// Loop through the elements and update their content
			for(i=0;i<this.els.length;i++){
				this.els[i].className = this.selected ? "select" : "";
			}

			// get the number of selected items in ref and update
			info_el.innerHTML = ( this.selected ? ++global_counter : --global_counter );
		};

		// Create the initial element
		this.update(item);
		this.create(bucket);

		// if this is selected
		if(selected){
			this.toggleSelect();
		}
	}
function fileRef(item, network, bucket, selected){

		this.els = [];
		this.selected = false;

		this.item = {};

		// Item contents change
		this.update = function(item){
			if(!item){
				return this.item;
			}
			else {
				// Merge the two together
				this.item = hello.utils.merge(this.item, item);
			}

			// Loop through the elements and update their content
			for(var i=0;i<this.els.length;i++){
				this.els[i].getElementsByTagName('span')[0].innerHTML = this.item.name;
				if(this.item.thumbnail){
					this.els[i].getElementsByTagName('img')[0].src = this.item.thumbnail;
				}
			}
		};

		// Create an element in the given bucket,
		// adding on click event handlers
		this.create = function(bucket){
			var item = this.item;
			var self = this;
			var el = doc.createElement('li');
			el.title = item.name;
			el.innerHTML = "<img "+(item.thumbnail?"src='"+item.thumbnail+"'":"")+"/>"
							+"<span>"+(item.name||'')+"</span>";
			el.onclick = function(){
				// Is this a folder?
				if(item.type==='folder'||item.type==='album'){
					getBucket(network+":"+(item.files?item.files:item.id+"/files"), item.name, bucket.id );
				}
				else {
					// Toggle selected
					self.toggleSelect();
				}
			};
			// Add to bucket
			bucket.appendChild(el);

			// Add to local store
			this.els.push(el);

			return el;
		};


		this.toggleSelect = function(bool){

			if(bool===this.selected){
				// nothing
				return;
			}
			// else change

			// toggle
			this.selected = !this.selected;

			// Selected
			if(this.selected){
				// Does the element exist within the local bucket
				var local = false;
				for(i=0;i<this.els.length;i++){
					if( this.els[i].parentNode === select_el ){
						local=true;
						break;
					}
				}
				if(!local){
					// create it
					this.create(select_el);
				}
			}

			// Loop through the elements and update their content
			for(i=0;i<this.els.length;i++){
				this.els[i].className = this.selected ? "select" : "";
			}

			// get the number of selected items in ref and update
			info_el.innerHTML = ( this.selected ? ++global_counter : --global_counter );
		};

		// Create the initial element
		this.update(item);
		this.create(bucket);

		// if this is selected
		if(selected){
			this.toggleSelect();
		}
	}
function fileRef ( item , network , bucket , selected ) { this . els = [ ] ; this . selected = false ; this . item = { } ; // Item contents change this . update = function ( item ) { if ( ! item ) { return this . item ; } else { // Merge the two together this . item = hello . utils . merge ( this . item , item ) ; } // Loop through the elements and update their content for ( var i = 0 ; i < this . els . length ; i ++ ) { this . els [ i ] . getElementsByTagName ( 'span' ) [ 0 ] . innerHTML = this . item . name ; if ( this . item . thumbnail ) { this . els [ i ] . getElementsByTagName ( 'img' ) [ 0 ] . src = this . item . thumbnail ; } } } ; // Create an element in the given bucket, // adding on click event handlers this . create = function ( bucket ) { var item = this . item ; var self = this ; var el = doc . createElement ( 'li' ) ; el . title = item . name ; el . innerHTML = "<img " + ( item . thumbnail ? "src='" + item . thumbnail + "'" : "" ) + "/>" + "<span>" + ( item . name || '' ) + "</span>" ; el . onclick = function ( ) { // Is this a folder? if ( item . type === 'folder' || item . type === 'album' ) { getBucket ( network + ":" + ( item . files ? item . files : item . id + "/files" ) , item . name , bucket . id ) ; } else { // Toggle selected self . toggleSelect ( ) ; } } ; // Add to bucket bucket . appendChild ( el ) ; // Add to local store this . els . push ( el ) ; return el ; } ; this . toggleSelect = function ( bool ) { if ( bool === this . selected ) { // nothing return ; } // else change // toggle this . selected = ! this . selected ; // Selected if ( this . selected ) { // Does the element exist within the local bucket var local = false ; for ( i = 0 ; i < this . els . length ; i ++ ) { if ( this . els [ i ] . parentNode === select_el ) { local = true ; break ; } } if ( ! local ) { // create it this . create ( select_el ) ; } } // Loop through the elements and update their content for ( i = 0 ; i < this . els . length ; i ++ ) { this . els [ i ] . className = this . selected ? "select" : "" ; } // get the number of selected items in ref and update info_el . innerHTML = ( this . selected ? ++ global_counter : -- global_counter ) ; } ; // Create the initial element this . update ( item ) ; this . create ( bucket ) ; // if this is selected if ( selected ) { this . toggleSelect ( ) ; } }
Each item is stored as a fileRef instance in the ref array This function controls the element which it is applied upon. Controlling when the elements update for generated content
Each item is stored as a fileRef instance in the ref array This function controls the element which it is applied upon . Controlling when the elements update for generated content