Skip to content

Instantly share code, notes, and snippets.

@CootCraig

CootCraig/index.html

Created January 22, 2015 20:35
Show Gist options
  • Save CootCraig/7b35a91b050a16cf39da to your computer and use it in GitHub Desktop.
Save CootCraig/7b35a91b050a16cf39da to your computer and use it in GitHub Desktop.
Download ZIP
Load a list of svg image with a Q Promise
Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<h1>SVG Image test</h1>
<svg
id="topsvg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width=1024
height=500
>
<defs id="top-svg-defs"></defs>
</svg>
<div id="log-div"></div>
<script src="/js/vendor/jquery-1.11.2.min.js"></script>
<script src="/js/vendor/snap.svg.js"></script>
<script src="/js/plugins.js"></script>
<script src="/js/vendor/q.js"></script>
<script src="/js/myUtils.js"></script>
<script src="/js/myApp.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
Raw
main.js
(function() {
$( document ).ready(function() {
myApp.paper = Snap('#topsvg');
myApp.loadResourceImages().then(
function(status_string) {
console.log('loadResourceImages() status ' + status_string);
});
});
})();
Raw
myApp.js
(function() {
if (window['myApp'] !== undefined) {
throw "The name myApp is already defined globally.";
}
// myApp = externs closure object from following function
window['myApp'] = (function() {
var externs = {};
var loadResourceImages = null;
var paper = null;
var svgImages = {}; // id -> image
externs.paper = paper;
externs.svgImages = svgImages;
loadResourceImages = function() {
var deferred = Q.defer();
var imageName = '';
var imageOptions = [];
var loadedImageIndex = 0;
imageOptions.push({
uri: '/img/The_Spaniards_101-El_Estudiante_de_la_tuna.jpg',
width: 557,
height: 987,
class_name: 'The_Spaniards character',
image_name: 'El_Estudiante_de_la_tuna'
});
imageOptions.push({
uri: '/img/pueblo1890s.png',
width: 1408,
height: 860,
class_name: 'background-image',
image_name: 'pueblo-aerial-south'
});
console.log('loadResourceImages calling loadSvgImageList');
myUtils.loadSvgImageList(imageOptions).then (function(loadedImages) {
for (loadedImageIndex = 0; loadedImageIndex < loadedImages.length; ++loadedImageIndex ) {
$('#top-svg-defs').append(loadedImages[loadedImageIndex]);
imageName = $(loadedImages[loadedImageIndex]).attr('name');
console.log('loadResourceImages registered ' + imageName);
svgImages[imageName] = Snap.fragment(loadedImages[loadedImageIndex]);
}
deferred.resolve('success ' + loadedImages.length.toString() + ' images loaded');
});
return deferred.promise;
};
externs.loadResourceImages = loadResourceImages;
return externs;
})();
})();
Raw
myUtils.js
(function() {
if (window['myUtils'] !== undefined) {
throw "The name myUtils is already defined globally.";
}
window['myUtils'] = (function() {
var externs = {};
var loadSvgImage = null;
var loadSvgImageList = null;
// Return a promise resolved when the image as loaded
// The loaded image is passed on the resolve
loadSvgImage = function(uri,width,height,className,imageName) {
var deferred = Q.defer();
var imageElement = null;
imageElement = document.createElementNS("http://www.w3.org/2000/svg", "image");
imageElement.addEventListener('load', function() {
console.log(imageName + ' loaded by loadSvgImage');
deferred.resolve(imageElement);
});
if (typeof className === 'string') {
imageElement.setAttribute('class',className);
}
if (typeof imageName === 'string') {
imageElement.setAttribute('name',imageName);
imageElement.setAttribute('id','image' + imageName);
}
imageElement.width.baseVal.value = width;
imageElement.height.baseVal.value = height;
imageElement.href.baseVal = uri; // This triggers the image load from the uri
return deferred.promise;
};
externs.loadSvgImage = loadSvgImage;
loadSvgImageList = function(imageOptionsList) {
var deferred = Q.defer();
var ii = 0;
var loadPromises = [];
for (ii=0; ii<imageOptionsList.length; ++ii) {
console.log('loadSvgImageList loading ' + imageOptionsList[ii].image_name);
loadPromises.push(
loadSvgImage(
imageOptionsList[ii].uri,
imageOptionsList[ii].width,
imageOptionsList[ii].height,
imageOptionsList[ii].class_name,
imageOptionsList[ii].image_name)
);
}
Q.all(loadPromises).then(
function(loadedImages) {
console.log('q.all then');
deferred.resolve(loadedImages);
}
);
return deferred.promise;
};
externs.loadSvgImageList = loadSvgImageList;
return externs;
})();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment