gallery.html - gerrit/www.eclipse.org/sirius - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 	<meta http-equiv="Content-language" content="en">
 	<meta name="description" content="Graphical Editors for your DSL">

 	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
 	<script type="text/javascript" src="js/magnific-popup.min.js"></script>
 	<script type="application/json" src="json/gallery.json"></script>
 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
 	<script src="angular/sirius.js"></script>

 	<link rel="icon" type="image/png" href="favicon.ico" />
 	<title>Sirius - Gallery</title>
 	<link type="text/css" rel="stylesheet" href="css/style.css" />
 	<link type="text/css" rel="stylesheet" href="css/media.css" />
 	<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
 	<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300italic,700,300' rel='stylesheet' type='text/css'>
 	<link rel="stylesheet" href="https://use.fontawesome.com/ef6567f233.css">

 	<!-- Eclipse Foundation Google Tag Manager -->
 	<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
 	new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 	j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 	'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
 	})(window,document,'script','dataLayer','GTM-5WLCZXC');</script>
 	<!-- End Google Tag Manager -->

 	<!-- Eclipse Foundation cookie consent: -->
 	<link rel="stylesheet" type="text/css" href="//www.eclipse.org/eclipse.org-common/themes/solstice/public/stylesheets/vendor/cookieconsent/cookieconsent.min.css" />
 	<script src="//www.eclipse.org/eclipse.org-common/themes/solstice/public/javascript/vendor/cookieconsent/default.min.js"></script>
 	<script type="text/javascript" src="js/ga.js"></script>
 </head>

 <body ng-app="sirius" ng-controller="main" class="cloak">
 <ng-include src="'angular/blocks/header.html'"></ng-include>

 <div id="body_wrapper">
 	<h1 class="page_title">Gallery</h1>
 	<br />

 	<div class="intro_gallery">
 		<h3>What Can You Do with Sirius?</h3>
 		<p>Discover concrete examples of modeling tools created with Sirius for various use-cases: Systems Engineering, Software Development, Business Configuration, etc.</p>
 	</div>

     <div id="usecases"></div>
 	<script type="text/javascript">
   		$.getJSON('json/gallery.json', function(data) {

   			var output = " " ;

 	        for (var i in data.usecases) {
 	        	var medias = " ";
 	        	var thumb = " ";
 	        	var thumblist = " ";
 	        	var title = " ";
 	        	var author = " ";
 	        	var descr = " ";
 	        	var taglist = " ";
 	        	var tag = " ";
 	        	var lnklist = " ";
 	        	var lnk = " ";
 	        	var infos = " ";

 	   	    medias += "<div class='medias' id='" + data.usecases[i].infos.title + "'><div class='popup-gallery-" + i + "'><a href='" + data.usecases[i].medias.mainSrc + "' title='" + data.usecases[i].medias.mainSrc + "'><img class='shadow' src='" + data.usecases[i].medias.mainSrc + "' alt='" + data.usecases[i].medias.imgAlt + "' width='520' /></a></div>";

 	   	 	if(data.usecases[i].medias.thumbs.length < 1){
 	   	 		thumblist += "<div class='thumbs'><ul>";
 	   	 	}
 	   	 	else {
 				thumblist += "<div class='thumbs popup-gallery-" + i + "'><ul>";
 				for (var t in data.usecases[i].medias.thumbs) {
 					thumb += "<li class='thumb-" + t + "'><a href='" + data.usecases[i].medias.thumbs[t].src + "'><img class='shadow' src='" + data.usecases[i].medias.thumbs[t].src + "' alt='" + data.usecases[i].medias.thumbs[t].src + "' width='60' /></a></li>";

 				}
 	   	 	}
 			thumblist += thumb + "</ul></div>";

 			medias += thumblist + "</div>";

 				title += "<div class='title'><h2>" + data.usecases[i].infos.title + "</h2></div>";
 				author += "<div class='author'><p>By " + data.usecases[i].infos.author + "</p></div>";
 				descr += "<div class='descr'><p>" + data.usecases[i].infos.description + "</p></div>";

 				taglist += "<div class='tags taglist'><span class='tag_head'>";
 				for (var j in data.usecases[i].infos.tags) {
 					tag += "</span><div class='tag'><i></i><span>" + data.usecases[i].infos.tags[j].nom + "</span><b></b></div>";
 				 }
 				taglist += tag + "</div>";

 				if(data.usecases[i].infos.lnks.length < 1){
 		   	 		thumblist += "<div class='lnks'><ul>";
 		   	 	}
 		   	 	else {
 				lnklist += "<div class='lnks'><h3 class='lnks_head'>Related links</h3><ul>";
 					for (var k in data.usecases[i].infos.lnks) {
 						lnk += "<li><a href='" + data.usecases[i].infos.lnks[k].url + "' target='_blank'>" + data.usecases[i].infos.lnks[k].nom + "</a></li>";
 					}
 		   	 	}
 				lnklist += lnk + "</ul></div>";

 				infos += "<div class='infos'>" + title + author + taglist + descr + lnklist +"</div>";
 				output += "<div class='usecase'>" + medias  + infos + "</div>";

 			}

 			document.getElementById("usecases").innerHTML=output;

 			for (var n in data.usecases) {

 				$('.popup-gallery-' + n).magnificPopup({
 					delegate: 'a',
 					type: 'image',
 					tLoading: 'Loading image #%curr%...',
 					mainClass: 'mfp-img-mobile',
 					gallery: {
 						enabled: true,
 						navigateByImgClick: true,
 						preload: [0,1] // Will preload 0 - before current, and 1 after the current image
 					},
 					image: {
 						tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
 						titleSrc: function(item) {
 							var usecaseIndex = $(item.el).parents(".usecase").index();
 							return data.usecases[usecaseIndex].infos.title;
 						}
 					}
 				});
 			}
  		 });
    	</script>

    	<br />
    	<div class="intro_gallery">
 		<h3>Your modeling tool created with Sirius is not listed here?</h3>
    		<p>Feel free to submit your work here: <a href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=448492">Bugzilla 448492</a>.</p>
    	</div>

 </div> <!-- Fin body_wrapper -->

 <div class="clear"></div>
 <ng-include src="'angular/blocks/footer.html'"></ng-include>
 <ng-include src="'angular/blocks/call2action.html'"></ng-include>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-language" content="en">
	<meta name="description" content="Graphical Editors for your DSL">

	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="js/magnific-popup.min.js"></script>
	<script type="application/json" src="json/gallery.json"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
	<script src="angular/sirius.js"></script>

	<link rel="icon" type="image/png" href="favicon.ico" />
	<title>Sirius - Gallery</title>
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<link type="text/css" rel="stylesheet" href="css/media.css" />
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300italic,700,300' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://use.fontawesome.com/ef6567f233.css">

	<!-- Eclipse Foundation Google Tag Manager -->
	<script>(function(w,d,s,l,i){w[l]=w[l]\|\|[];w[l].push({'gtm.start':
	new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
	j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
	'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
	})(window,document,'script','dataLayer','GTM-5WLCZXC');</script>
	<!-- End Google Tag Manager -->

	<!-- Eclipse Foundation cookie consent: -->
	<link rel="stylesheet" type="text/css" href="//www.eclipse.org/eclipse.org-common/themes/solstice/public/stylesheets/vendor/cookieconsent/cookieconsent.min.css" />
	<script src="//www.eclipse.org/eclipse.org-common/themes/solstice/public/javascript/vendor/cookieconsent/default.min.js"></script>
	<script type="text/javascript" src="js/ga.js"></script>
	</head>

	<body ng-app="sirius" ng-controller="main" class="cloak">
	<ng-include src="'angular/blocks/header.html'"></ng-include>

	<div id="body_wrapper">
	<h1 class="page_title">Gallery</h1>
	<br />

	<div class="intro_gallery">
	<h3>What Can You Do with Sirius?</h3>
	<p>Discover concrete examples of modeling tools created with Sirius for various use-cases: Systems Engineering, Software Development, Business Configuration, etc.</p>
	</div>

	<div id="usecases"></div>
	<script type="text/javascript">
	$.getJSON('json/gallery.json', function(data) {

	var output = " " ;

	for (var i in data.usecases) {
	var medias = " ";
	var thumb = " ";
	var thumblist = " ";
	var title = " ";
	var author = " ";
	var descr = " ";
	var taglist = " ";
	var tag = " ";
	var lnklist = " ";
	var lnk = " ";
	var infos = " ";

	medias += "<div class='medias' id='" + data.usecases[i].infos.title + "'><div class='popup-gallery-" + i + "'><a href='" + data.usecases[i].medias.mainSrc + "' title='" + data.usecases[i].medias.mainSrc + "'><img class='shadow' src='" + data.usecases[i].medias.mainSrc + "' alt='" + data.usecases[i].medias.imgAlt + "' width='520' /></a></div>";

	if(data.usecases[i].medias.thumbs.length < 1){
	thumblist += "<div class='thumbs'><ul>";
	}
	else {
	thumblist += "<div class='thumbs popup-gallery-" + i + "'><ul>";
	for (var t in data.usecases[i].medias.thumbs) {
	thumb += "<li class='thumb-" + t + "'><a href='" + data.usecases[i].medias.thumbs[t].src + "'><img class='shadow' src='" + data.usecases[i].medias.thumbs[t].src + "' alt='" + data.usecases[i].medias.thumbs[t].src + "' width='60' /></a></li>";

	}
	}
	thumblist += thumb + "</ul></div>";

	medias += thumblist + "</div>";

	title += "<div class='title'><h2>" + data.usecases[i].infos.title + "</h2></div>";
	author += "<div class='author'><p>By " + data.usecases[i].infos.author + "</p></div>";
	descr += "<div class='descr'><p>" + data.usecases[i].infos.description + "</p></div>";

	taglist += "<div class='tags taglist'><span class='tag_head'>";
	for (var j in data.usecases[i].infos.tags) {
	tag += "</span><div class='tag'><i></i><span>" + data.usecases[i].infos.tags[j].nom + "</span><b></b></div>";
	}
	taglist += tag + "</div>";

	if(data.usecases[i].infos.lnks.length < 1){
	thumblist += "<div class='lnks'><ul>";
	}
	else {
	lnklist += "<div class='lnks'><h3 class='lnks_head'>Related links</h3><ul>";
	for (var k in data.usecases[i].infos.lnks) {
	lnk += "<li><a href='" + data.usecases[i].infos.lnks[k].url + "' target='_blank'>" + data.usecases[i].infos.lnks[k].nom + "</a></li>";
	}
	}
	lnklist += lnk + "</ul></div>";

	infos += "<div class='infos'>" + title + author + taglist + descr + lnklist +"</div>";
	output += "<div class='usecase'>" + medias + infos + "</div>";

	}

	document.getElementById("usecases").innerHTML=output;

	for (var n in data.usecases) {

	$('.popup-gallery-' + n).magnificPopup({
	delegate: 'a',
	type: 'image',
	tLoading: 'Loading image #%curr%...',
	mainClass: 'mfp-img-mobile',
	gallery: {
	enabled: true,
	navigateByImgClick: true,
	preload: [0,1] // Will preload 0 - before current, and 1 after the current image
	},
	image: {
	tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
	titleSrc: function(item) {
	var usecaseIndex = $(item.el).parents(".usecase").index();
	return data.usecases[usecaseIndex].infos.title;
	}
	}
	});
	}
	});
	</script>

	<br />
	<div class="intro_gallery">
	<h3>Your modeling tool created with Sirius is not listed here?</h3>
	<p>Feel free to submit your work here: <a href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=448492">Bugzilla 448492</a>.</p>
	</div>

	</div> <!-- Fin body_wrapper -->

	<div class="clear"></div>
	<ng-include src="'angular/blocks/footer.html'"></ng-include>
	<ng-include src="'angular/blocks/call2action.html'"></ng-include>
	</body>
	</html>