Tue Jun 20 2017
Copied to clipboard! Copy reply
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
// *********************************************************
// NEW FEATURES
// *********************************************************

(function(){
	var feature_images = {
		'multi_device' : {
			'desktop' : '../assets/mobileapps/multi_device_desktop.png',
			'mobile' : '../assets/mobileapps/multi_device_mobile.png',
			'orientation' : 'landscape'
		},
		'phrasebook' : {
			'desktop' : '../assets/mobileapps/phrasebook_desktop.png',
			'mobile' : '../assets/mobileapps/phrasebook_mobile.png',
			'orientation' : 'landscape'
		},
		'audio_companion' : {
			'desktop' : '../assets/mobileapps/audio_companion_desktop.png',
			'mobile' : '../assets/mobileapps/audio_companion_mobile.png',
			'orientation' : 'landscape'
		},
		'stories' : {
			'desktop' : '../assets/mobileapps/stories_desktop.png',
			'mobile' : '../assets/mobileapps/stories_mobile.png',
			'orientation' : 'landscape'
		},
		'truaccent' : {
			'desktop' : '../assets/mobileapps/truaccent_desktop.png',
			'mobile' : '../assets/mobileapps/truaccent_mobile.png',
			'orientation' : 'landscape'
		},
		'tutoring' : {
			'desktop' : '../assets/mobileapps/tutoring_desktop.png',
			'mobile' : '../assets/mobileapps/tutoring_mobile.png',
			'orientation' : 'landscape'
		}
	};

	var imgs = {};
	var $macbook_screen = $('.new_features_screen_macbook');
	$macbook_screen.css({'will-change': 'background-image', 'contain': 'strict'});
	var $iphone_screen = $('.new_features_screen_iphone');
	$iphone_screen.css({'will-change': 'background-image', 'contain': 'strict'});
	var $iphone = $('.new_features_iphone');
	
	init_features();
	
	//See if browser can support ObjectURLs::
	if('URL' in window && 'createObjectURL' in window.URL) {
		//If it can, load them into the imgs object keyed to the URL
		imgs = (function loadCache(feature_images){
			var ObjectURLCache = {};

			for(var i in feature_images){
				feature_images.hasOwnProperty(i) && preLoadAsset(feature_images[i].desktop) && preLoadAsset(feature_images[i].mobile);
			}
			
			function preLoadAsset(url) {
			  var xhr = new XMLHttpRequest();
			  xhr.responseType = 'blob';
			  xhr.onreadystatechange = function() {
				if (xhr.readyState === 4) {
				  //Convert the response blob to an ObjectURL
				  var ourl = URL.createObjectURL(xhr.response);
				  //Add it to the cache
				  ObjectURLCache[url] = ourl;
				}
			  }
			  xhr.open('GET', url, true);
			  xhr.send('');
			  return true;
			}

			//return the cache on stack: (values will be added via reference on event loops above)
			return ObjectURLCache
		})(feature_images);
	};
	
	function init_features(){
		var $first_feature = $('.new_feature').eq(0);
		$first_feature.addClass('new_feature_selected');

		var current_feature = $first_feature.attr('data-feature');
		show_feature_images(current_feature);
	}
	
	
	
	

	function show_feature_images(feature_name){
		var current_images = feature_images[feature_name];
		
		// show correct images
		if('requestAnimationFrame' in window){
			requestAnimationFrame(function(){
				
				//If available, pull from ObjectURL cache || just use the network URL;
				var macbook_ourl = imgs[current_images.desktop] || current_images.desktop;
				var iphone_ourl = imgs[current_images.mobile] || current_images.mobile;
				var o_mb = $macbook_screen.get(0);
				var o_ip = $iphone_screen.get(0);
				
				//backgroundImage property replace:
				o_mb.style.backgroundImage = 'url(' + macbook_ourl + ')';
				o_ip.style.backgroundImage = 'url(' + iphone_ourl + ')';
				
			});
		}
		else {
			$macbook_screen.css({
				'background-image': 'url('+current_images.desktop+')'
			});
			$iphone_screen.css({
				'background-image': 'url('+current_images.mobile+')'
			});
		}

		// determine correct phone orientation
		if(current_images.orientation==='portrait'){
			$iphone.addClass('new_features_iphone_portrait');
		}
		else{
			$iphone.removeClass('new_features_iphone_portrait');
		}
	}

	$('.new_feature').on('mouseover', function(){
		var $self = $(this);
		$('.new_feature').removeClass('new_feature_selected');
		$self.addClass('new_feature_selected');

		var current_feature = $self.attr('data-feature');
		show_feature_images(current_feature);
	});

})();