| <!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> |