Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

[t670] Dependency loader is complete.

1. Dependency loader is done.
2. Added _load possibility to module preparation
  • Loading branch information...
commit 9b2b30d55ac94b25d888249784c636b6fbdd4d62 1 parent bae8982
@secretrobotron secretrobotron authored
View
1  config/default.conf
@@ -37,6 +37,7 @@
},
"dirs": {
"popcorn-js": "../external/popcorn-js/",
+ "css": "../css/",
"dialogs": "../dialogs/",
"resources": "../resources/"
},
View
82 src/core/page.js
@@ -4,12 +4,12 @@
define( [ "core/logger", "core/eventmanager" ], function( Logger, EventManager ) {
- return function( config ) {
+ return function( loader, config ) {
var POPCORN_BASE_URL = config.dirs[ "popcorn-js" ],
- POPCORN_URL = POPCORN_BASE_URL + "popcorn.js",
- PLAYER_URL = POPCORN_BASE_URL + "modules/player/popcorn.player.js",
- PLAYER_TYPE_URL = POPCORN_BASE_URL + "players/{type}/popcorn.{type}.js";
+ POPCORN_URL = "{popcorn-js}/popcorn.js",
+ PLAYER_URL = "{popcorn-js}/modules/player/popcorn.player.js",
+ PLAYER_TYPE_URL = "{popcorn-js}/players/{type}/popcorn.{type}.js";
var _eventManager = new EventManager( this ),
_snapshot;
@@ -25,59 +25,33 @@ define( [ "core/logger", "core/eventmanager" ], function( Logger, EventManager )
};
}; // scrape
- this.preparePopcorn = function( readyCallback ) {
-
- function addScript( url ) {
- var script = document.createElement( "script" );
- script.src = url;
- document.head.appendChild( script );
- }
-
- function isPopcornReady( cb ) {
- if ( !window.Popcorn ) {
- setTimeout( function() {
- isPopcornReady( cb );
- }, 100 );
- }
- else {
- cb();
- } //if
- } //isPopcornReady
-
- function isPlayerReady() {
- if ( !window.Popcorn.player ) {
- setTimeout( function() {
- isPlayerReady();
- }, 100 );
- }
- else {
- readyCallback();
+ this.prepare = function( readyCallback ){
+ loader.load([
+ {
+ type: "js",
+ url: "{popcorn-js}/popcorn.js",
+ check: function(){
+ return !!window.Popcorn;
+ }
+ },
+ {
+ type: "js",
+ url: "{popcorn-js}/modules/player/popcorn.player.js",
+ check: function(){
+ return !!window.Popcorn.player;
+ }
}
- }
+ ], readyCallback, true );
+ };
- function checkPlayer() {
- if( !window.Popcorn.player ) {
- addScript( PLAYER_URL );
- isPlayerReady();
- } else {
- readyCallback();
+ this.addPlayerType = function( type, callback ){
+ loader.load({
+ type: "js",
+ url: PLAYER_TYPE_URL.replace( /\{type\}/g, type ),
+ check: function(){
+ !!Popcorn[ type ];
}
- }
-
- if ( !window.Popcorn ) {
- addScript( POPCORN_URL );
- isPopcornReady( checkPlayer );
- } else {
- checkPlayer();
- }
- }; // preparePopcorn
-
- this.addPlayerType = function( type ){
- if( !Popcorn[ type ] ){
- var script = document.createElement( "script" );
- script.src = PLAYER_TYPE_URL.replace( /\{type\}/g, type );
- document.head.appendChild( script );
- }
+ }, callback );
};
this.getHTML = function( popcornStrings ){
View
143 src/dependencies.js
@@ -4,4 +4,147 @@
define([], function(){
+ var DEFAULT_DIRS = {
+ "popcorn-js": "../external/popcorn-js",
+ "css": "css"
+ },
+ VAR_REGEX = /\{([\w-\._]+)\}/g,
+ CSS_POLL_INTERVAL = 10;
+
+ var DEFAULT_CHECK_FUNCTION = function(){
+ var index = 0;
+ return function(){
+ return index++ > 0;
+ };
+ };
+
+ return function( config ){
+
+ var _configDirs = config.dirs;
+
+ function fixUrl( url ){
+ var replaceVars = url.match( VAR_REGEX );
+
+ for( var i = 0; i < replaceVars.length; ++i ){
+ var rv = replaceVars[ i ],
+ varOnly = /\{([\w-\._]+)\}/g.exec( rv )[ 1 ],
+ regex = new RegExp( rv, "g" ),
+ replacement = _configDirs[ varOnly ] || DEFAULT_DIRS[ varOnly ] || "";
+ url = url.replace( regex, replacement );
+ }
+
+ return url.replace( "//", "/" );
+ }
+
+ var _loaders = {
+ js: function( url, exclude, callback, checkFn ){
+ checkFn = checkFn || DEFAULT_CHECK_FUNCTION();
+
+ url = fixUrl( url );
+
+ if( !checkFn() ){
+ var scriptElement = document.createElement( "script" );
+ scriptElement.src = url;
+ scriptElement.type = "text/javascript";
+ document.head.appendChild( scriptElement );
+ scriptElement.onload = scriptElement.onreadystatechange = function(e){
+ callback();
+ };
+ }
+ else{
+ // keep event-loop behaviour consistent
+ setTimeout(function(){
+ callback();
+ }, 0);
+ }
+ },
+ css: function( url, exclude, callback, checkFn ){
+ var scriptElement;
+ checkFn = checkFn || function(){
+ if( !scriptElement ){
+ return false;
+ }
+ for( var i = 0; i < document.styleSheets.length; ++i ){
+ if( document.styleSheets[ i ].href === scriptElement.href ){
+ return true;
+ }
+ }
+ return false;
+ };
+
+ url = fixUrl( url );
+ if( !checkFn() ){
+ scriptElement = document.createElement( "link" );
+ scriptElement.rel = "stylesheet"
+ scriptElement.href = url;
+ document.head.appendChild( scriptElement );
+ }
+
+ var interval = setInterval(function(){
+ if( checkFn() ){
+ clearInterval( interval );
+ callback();
+ }
+ }, CSS_POLL_INTERVAL );
+
+ }
+ };
+
+ var Loader = {
+
+ load: function( items, callback, ordered ){
+ if( items instanceof Array && items.length > 0 ){
+
+ if( !ordered ){
+ var loaded = 0;
+ function onLoad(){
+ ++loaded;
+ if( loaded === items.length ){
+ if( callback ){
+ callback();
+ }
+ }
+ }
+
+ for( var i = 0; i < items.length; ++i ){
+ Loader.load( items[ i ], onLoad );
+ }
+ }
+ else {
+ var index = 0;
+ function next(){
+ if( index === items.length ){
+ callback();
+ }
+ else{
+ Loader.load( items[ index++ ], next );
+ }
+ }
+ next();
+ }
+
+ }
+ else {
+ var item = items;
+
+ if( _loaders[ item.type ] ){
+ if( item.url ){
+ _loaders[ item.type ]( item.url, item.exclude, callback, item.check );
+ }
+ else{
+ throw new Error( "Attempted to load resource without url." );
+ }
+ }
+ else {
+ throw new Error( "Loader type " + item.type + " not found! Attempted: " + item.url );
+ }
+
+ }
+ }
+ };
+
+ return Loader;
+
+ };
+
});
View
12 src/main.js
@@ -14,6 +14,7 @@
"./core/media",
"./core/page",
"./modules",
+ "./dependencies",
"ui/ui",
"util/xhr"
],
@@ -24,6 +25,7 @@
Media,
Page,
Modules,
+ Dependencies,
UI,
XHR
){
@@ -494,9 +496,8 @@
targets = scrapedObject.target,
medias = scrapedObject.media;
- _page.preparePopcorn(function() {
+ _page.prepare(function() {
var i, j, il, jl, url, oldTarget, oldMedia, mediaPopcornOptions;
-
for( i = 0, il = targets.length; i < il; ++i ) {
oldTarget = null;
if( _targets.length > 0 ){
@@ -645,9 +646,12 @@
} //for
//prepare modules first
- var moduleCollection = Modules( _this, _config );
+ var moduleCollection = Modules( _this, _config ),
+ loader = Dependencies( _config );
+
+ _this.loader = loader;
- _page = new Page( _config );
+ _page = new Page( loader, _config );
_this.ui = new UI( _this, _config.ui );
View
22 src/modules.js
@@ -17,6 +17,7 @@ define(
return function( butter, config, onReady ){
var modules = [],
+ loadedModules = 0,
readyModules = 0;
for( var i=0; i<moduleList.length; ++i ){
@@ -26,6 +27,27 @@ define(
} //for
return {
+ load: function( onLoaded ){
+ function onModuleLoaded(){
+ loadedModules++;
+ if( loadedModules === modules.length ){
+ onLoaded();
+ }
+ }
+
+ for( var i=0; i<modules.length; ++i ){
+ if( modules[ i ]._load ){
+ modules[ i ]._load( onModuleLoaded );
+ }
+ else{
+ loadedModules++;
+ } //if
+ } //for
+
+ if( loadedModules === modules.length ){
+ onLoaded();
+ }
+ },
ready: function( onReady ){
function onModuleReady(){
readyModules++;
View
5 src/timeline/media.js
@@ -284,6 +284,7 @@ define( [
function updateUI() {
if( _media.duration ){
+ _tracksContainer.update();
_timebar.update( _zoom );
_hScrollBar.update();
_vScrollBar.update();
@@ -292,6 +293,10 @@ define( [
} //if
} //updateUI
+ butter.listen( "ready", function(){
+ updateUI();
+ });
+
_tracksContainer.zoom = _zoom;
Object.defineProperties( this, {
View
5 src/timeline/track-container.js
@@ -77,6 +77,11 @@ define( [ "core/logger", "core/eventmanager" ], function( Logger, EventManager )
_container.removeChild( trackView.element );
});
+ _this.update = function(){
+ resetContainer();
+ console.log( _element.offsetWidth, _container.offsetWidth );
+ };
+
Object.defineProperties( this, {
zoom: {
enumerable: true,
View
4 src/timeline/zoombar.js
@@ -49,11 +49,11 @@ define( [], function(){
this.update = function( level ) {
_rect = _element.getBoundingClientRect();
- _handle.style.width = ( _rect.width / ZOOM_LEVELS ) + "px";
_handleWidth = ( _rect.width / ZOOM_LEVELS );
+ _handle.style.width = _handleWidth + "px";
_elementWidth = _rect.width;
if( level !== undefined ){
- _handle.style.left = ( level * _rect.width / ZOOM_LEVELS ) + "px";
+ _handle.style.left = ( level * _handleWidth ) + "px";
} //if
};
View
17 src/ui/ui.js
@@ -4,7 +4,8 @@
define( [ "core/eventmanager", "./toggler", "./logo-spinner", "./context-button", "./header" ], function( EventManager, Toggler, LogoSpinner, ContextButton, Header ){
- var TRANSITION_DURATION = 500;
+ var TRANSITION_DURATION = 500,
+ BUTTER_CSS_FILE = "{css}/butter.ui.css";
function Area( id, element ){
var _em = new EventManager( this ),
@@ -113,6 +114,20 @@ define( [ "core/eventmanager", "./toggler", "./logo-spinner", "./context-button"
});
}
+ this._load = function( onReady ){
+ if( options.enabled !== false ){
+ butter.loader.load([
+ {
+ type: "css",
+ url: BUTTER_CSS_FILE
+ }
+ ], onReady );
+ }
+ else{
+ onReady();
+ }
+ };
+
this.registerStateToggleFunctions = function( state, events ){
_em.listen( "contentstatechanged", function( e ){
if( e.data.oldState === state ){
View
1  templates/test.html
@@ -6,7 +6,6 @@
<script src="https://browserid.org/include.js" type="text/javascript" data-butter-exclude></script>
<script src="../src/butter.js" data-butter-exclude /></script>
<script type="text/javascript" src="test.js" data-butter-exclude /></script>
- <link rel="stylesheet" href="../css/butter.ui.css" data-butter-exclude />
<style>
#main, .content-div {
float: left;
Please sign in to comment.
Something went wrong with that request. Please try again.