Demos: added demos from jointjs.com (clientIO#399)

DavidDurman · Sep 12, 2016 · 8d55736 · 8d55736
1 parent 47a95e2
commit 8d55736
Show file tree

Hide file tree

Showing 53 changed files with 8,222 additions and 571 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,5 +1,8 @@
 'use strict';
 
+var phantomjs = require('phantomjs-prebuilt');
+var selenium = require('selenium-standalone');
+
 module.exports = function(grunt) {
 
     var cheerio = require('cheerio');
@@ -419,6 +422,16 @@ module.exports = function(grunt) {
             }
         },
         mochaTest: {
+            e2e: {
+                src: [
+                    'test/e2e/*.js'
+                ],
+                options: {
+                    reporter: 'spec',
+                    timeout: 120000,
+                    clearRequireCache: true
+                }
+            },
             server: {
                 src: [
                     'test/*-nodejs/*'
@@ -510,6 +523,9 @@ module.exports = function(grunt) {
                 ),
                 tasks: ['build']
             }
+        },
+        env: {
+
         }
     };
 
@@ -774,4 +790,149 @@ module.exports = function(grunt) {
 
     grunt.registerTask('install', ['bowerInstall', 'build:all']);
     grunt.registerTask('default', ['install', 'build', 'watch']);
+
+    /*
+        List of Available Platforms on Sauce Labs:
+        https://saucelabs.com/platforms
+    */
+    var e2eBrowsers = {
+        'chrome': {
+            'browserName': 'chrome',
+            'name': 'Chrome'
+        },
+        'chrome-linux': {
+            'browserName': 'chrome',
+            'platform': 'linux',
+            'name': 'Chrome on Linux'
+        },
+        'chrome-windows7': {
+            'browserName': 'chrome',
+            'platform': 'windows',
+            'name': 'Chrome on Windows 7'
+        },
+        'chrome-mac': {
+            'browserName': 'chrome',
+            'platform': 'mac',
+            'name': 'Chrome on Mac'
+        },
+        'firefox': {
+            'browserName': 'firefox',
+            'name': 'Firefox'
+        },
+        'firefox-linux': {
+            'browserName': 'firefox',
+            'platform': 'linux',
+            'name': 'Firefox on Linux'
+        },
+        'firefox-mac': {
+            'browserName': 'firefox',
+            'platform': 'mac',
+            'name': 'Firefox on Mac'
+        },
+        'phantomjs': {
+            'browserName': 'phantomjs',
+            'name': 'PhantomJS'
+        },
+        'phantomjs-2.x': {
+            'browserName': 'phantomjs',
+            // Set the path to the PhantomJS 2.x binary.
+            // Can be in different places depending upon the current environment.
+            // For example, if phantomjs is on the current user's PATH (with the correct version).
+            'phantomjs.binary.path': phantomjs.path,
+            'name': 'PhantomJS 2.x'
+        }
+    };
+
+    Object.keys(e2eBrowsers).forEach(function(key) {
+
+        var browser = e2eBrowsers[key];
+
+        config.env[key] = {
+            E2E_DESIRED: JSON.stringify(browser)
+        };
+    });
+
+    Object.keys(e2eBrowsers).forEach(function(key) {
+        grunt.registerTask('test:e2e:' + key, [
+            'env:' + key,
+            'mochaTest:e2e'
+        ]);
+    });
+
+    grunt.registerTask('test:e2e', ['mochaTest:e2e']);
+
+    grunt.registerTask('test:e2e:all', [
+        'test:e2e:chrome-linux',
+        'test:e2e:chrome-windows7',
+        'test:e2e:chrome-mac',
+        'test:e2e:firefox-linux',
+        'test:e2e:firefox-mac'
+    ]);
+
+    grunt.registerTask('selenium', function(action) {
+
+        var done = this.async();
+
+        switch (action) {
+
+            case 'install':
+                return installSelenium(done);
+
+            case 'start':
+                return installSelenium(function(error) {
+                    if (error) return done(error);
+                    startSelenium(done);
+                });
+
+            case 'stop':
+                return stopSelenium(done);
+
+            // For backwards compatibility (`grunt selenium`).
+            // This task starts the local selenium server and then waits.
+            default:
+                return installSelenium(function(error) {
+                    if (error) return done(error);
+                    startSelenium(function(error) {
+                        if (error) return done(error);
+                        grunt.log.writeln('Selenium started');
+                        grunt.log.writeln('Exit this process ' + '[CTRL+C]'['white'].bold + ' to stop selenium');
+                        // Never call done.
+                        // This allows selenium to continue running until the grunt process is killed.
+                    });
+                });
+        }
+    });
+
+    var seleniumInstalled = (function() {
+
+        return grunt.file.exists(__dirname + '/node_modules/selenium-standalone/.selenium/selenium-server');
+
+    }());
+
+    var seleniumChildProcess;
+
+    function startSelenium(cb) {
+        grunt.log.writeln('Starting selenium..');
+        selenium.start(function(error, child) {
+            if (error) return cb(error);
+            seleniumChildProcess = child;
+            cb();
+        });
+    }
+
+    function stopSelenium(cb) {
+        if (seleniumChildProcess) seleniumChildProcess.kill();
+        cb();
+    }
+
+    function installSelenium(cb) {
+        if (seleniumInstalled) return cb();
+        grunt.log.writeln('Installing selenium..');
+        seleniumInstalled = true;
+        selenium.install(cb);
+    }
+    process.on('exit', function() {
+        // Kill selenium server process if it is running.
+        if (seleniumChildProcess) seleniumChildProcess.kill();
+    });
 };
diff --git a/demo/chess/css/chess.css b/demo/chess/css/chess.css
@@ -0,0 +1,30 @@
+#board {
+    margin: 0 auto;
+    border-style: none;
+    width: 400px;
+}
+.board-bg {
+    border-spacing: 0;
+    width: 402px;
+    height: 402px;
+    z-index: -1;
+    border-collapse: inherit;
+    margin: 0 auto;
+}
+#board > svg {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+.board-bg td {
+    width: 46px;
+    height: 46px;
+    border-style: none;
+    background: #30d0c6;
+}
+.board-bg tr:nth-child(odd) td:nth-child(even),
+.board-bg tr:nth-child(even) td:nth-child(odd) {
+    background: #7c68fd;
+}
diff --git a/demo/chess/index.html b/demo/chess/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8"/>
+
+        <title>Chess</title>
+
+        <link rel="stylesheet" type="text/css" href="../../build/joint.css" />
+        <link rel="stylesheet" type="text/css" href="../common.css" />
+        <link rel="stylesheet" type="text/css" href="css/chess.css" />
+    </head>
+    <body>
+        <article>
+            <h2>Chess</h2>
+            <p>powered by <a href="https://github.com/glinscott/Garbochess-JS">GarboChess.js</a></p>
+        </article>
+        <div id="board"/>
+        <table class="board-bg">
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
+        </table>
+
+        <div id="message"></div>
+
+        <script src="../../node_modules/jquery/dist/jquery.js"></script>
+        <script src="../../node_modules/lodash/index.js"></script>
+        <script src="../../node_modules/backbone/backbone.js"></script>
+
+        <script src="../../build/joint.js"></script>
+        <script src="src/garbochess.js"></script>
+        <script src="src/chess.js"></script>
+
+    </body>
+</html>