Copying neo4j-ruby presentation for a general introduction to neo4j and cypher

Gemfile.lock

@@ -2,44 +2,44 @@ GEM
   remote: https://rubygems.org/
   specs:
     asciidoctor (1.5.2)
-    celluloid (0.16.0)
-      timers (~> 4.0.0)
     coderay (1.1.0)
-    ffi (1.9.6)
+    ffi (1.9.10)
     formatador (0.2.5)
-    guard (2.10.5)
+    guard (2.13.0)
       formatador (>= 0.2.4)
-      listen (~> 2.7)
+      listen (>= 2.7, <= 4.0)
       lumberjack (~> 1.0)
       nenv (~> 0.1)
+      notiffany (~> 0.0)
       pry (>= 0.9.12)
+      shellany (~> 0.0)
       thor (>= 0.18.1)
-    haml (4.0.6)
+    haml (4.0.7)
       tilt
-    hitimes (1.2.2)
-    listen (2.8.4)
-      celluloid (>= 0.15.2)
+    listen (3.0.3)
       rb-fsevent (>= 0.9.3)
       rb-inotify (>= 0.9)
     lumberjack (1.0.9)
     method_source (0.8.2)
-    nenv (0.1.1)
-    pry (0.10.1)
+    nenv (0.2.0)
+    notiffany (0.0.8)
+      nenv (~> 0.1)
+      shellany (~> 0.0)
+    pry (0.10.3)
       coderay (~> 1.1.0)
       method_source (~> 0.8.1)
       slop (~> 3.4)
-    rb-fsevent (0.9.4)
+    rb-fsevent (0.9.6)
     rb-inotify (0.9.5)
       ffi (>= 0.5.0)
     retryable-rb (1.1.0)
-    rubypress (1.0.9)
+    rubypress (1.1.1)
       retryable-rb
+    shellany (0.0.1)
     slop (3.6.0)
     thor (0.19.1)
-    thread_safe (0.3.4)
+    thread_safe (0.3.5)
     tilt (2.0.1)
-    timers (4.0.1)
-      hitimes
 
 PLATFORMS
   ruby
@@ -51,3 +51,6 @@ DEPENDENCIES
   rubypress
   thread_safe
   tilt
+
+BUNDLED WITH
+   1.10.6

asciidoc/asciidoctor-backends/haml/deckjs/document.html.haml

@@ -13,6 +13,9 @@
       - deckjs_dir = "#{attr :deckjsdir}"
       %script(src='#{deckjs_dir}/jquery.min.js')
       %script(src='#{deckjs_dir}/core/deck.core.js')
+
+    %script
+      var deckjs_dir = '#{deckjs_dir}';
     %link(rel='stylesheet'){:href=>'http://fonts.googleapis.com/css?family=Open+Sans:800,400,600,300'}
 
     - unless (attr :stylesheet, '').empty?
@@ -129,11 +132,14 @@
     - if attr? :toc
       %script(src='#{deckjs_dir}/extensions/toc/deck.toc.js')
       %div(class='deck-toc')
+    - if attr? :presenterview
+      %script(src="#{deckjs_dir}/extensions/presenterview/deck.presenterview.js")
     - if attr? :arrows
       %script(src='#{deckjs_dir}/extensions/arrows/home.js')
       %script(src='#{deckjs_dir}/extensions/arrows/d3.v3.js')
       %script(src='#{deckjs_dir}/extensions/arrows/arrows-graph-diagram.js')
       %script(src='#{deckjs_dir}/extensions/arrows/arrows-init.js')
+
     - if attr? :footer
       %footer=attr :footer
     - if attr? :logo

asciidoc/deck.js/extensions/presenterview/README.md

@@ -0,0 +1,24 @@
+#deck.js extension presenterview
+
+Presenterview is an extension for deck.js that brings a presentation view for the presentator. You can add comments into your presentation that will be shown
+in the presenter view and the next slide is also included.
+
+## Dependencies (not included in this repository)
+
+- [deck.js](https://github.com/imakewebthings/deck.js)
+
+## Instruction
+
+1. Copy the presenterview extension to your deck.js extensions directory
+2. Include the extensions javascript at the bottom of your presentations index.html: `<script type="text/javascript" src="../extensions/presenterview/deck.presenterview.js"></script>`
+3. Also include the hash extension at the bottom of your presentations index.html: `<script type="text/javascript" src="../extensions/hash/deck.hash.js"></script>`
+4. Add notes as HTML commentaries to the sections of your presentation (<!-- commentary -->) - you may use HTML-Markup inside the commentaries if you like to
+5. (Optional) Style your presentation view
+6. Open up your presentation - if the popup gets blocked, allow it and reload
+7. Click on you Presentation Window again and do your stuff.
+
+## License
+
+Copyright (c) 2011 [Steven Wirges](https://github.com/stvnwrgs) & [Marc Dix](https://github.com/mdix)
+
+Dual licensed under the [MIT license](https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt) and [GPL license](https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt).

asciidoc/deck.js/extensions/presenterview/TODO

@@ -0,0 +1,4 @@
+- check for class 'slide' instead of checking for section tag
+- get comment for first slide on initial load (where no hash is present)
+- styling, of course
+- calculate size of preview window & iframe depending on the screen with & height

asciidoc/deck.js/extensions/presenterview/deck.presenterview.css

@@ -0,0 +1,22 @@
+.wrapper {
+  height: 100%;
+  width: 100%;
+}
+
+.wrapper section {
+    box-sizing: border-box;
+    padding: 20px;
+}
+
+#note, #next-slide  {
+  height: 100%;
+  float: left;
+}
+
+#note {
+    width: 40%;
+}
+
+#next-slide {
+    width: 60%;
+}

asciidoc/deck.js/extensions/presenterview/deck.presenterview.html

@@ -0,0 +1,22 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Presenter View</title>
+    <meta name="viewport" content="width=1024, user-scalable=no">
+    <!-- presenterview styling -->
+    <link rel="stylesheet" href="deck.presenterview.css">
+    <!-- preview styling, added via js on run -->
+</head>
+<body>
+    <div class="wrapper">
+        <section class="sector " id="note">
+
+        </section>
+        <section  class="sector" id="next-slide">
+            <iframe src="iframe.html" width="500" height="600"></iframe>
+        </section>
+    </div>
+</body>
+<script type="text/javascript" src="presenterwindow.js"></script>
+</html>

asciidoc/deck.js/extensions/presenterview/deck.presenterview.js

@@ -0,0 +1,158 @@
+if (window.$ !== undefined) {
+    /**
+    * When the presentation loads, the path to all included stylesheets is written to the localStorage, so we can
+    * show a smaller version of the slide in the presenterView. After that the presenterView launchs as a popup.
+    */
+    $(document).bind('deck.init', function() {
+        // write css links to localStorage
+        presenterView.writeAllCssPathsToLocalStorage();
+
+        // open popup, 3 args: link to open, windows name, width + height
+        var presenter = window.open(presenterView.getLinkToPresenterView(), 
+                                    'deck.js - presenterView', 
+                                    'width=' + screen.width + ', height=' + screen.height);
+    });
+
+    /**
+    * Note: This event is also triggered when the presentation is loaded!
+    * When the current slide changes, the current item is determined in order to grab its content and extract
+    * the html commentaries. If this slide is a section (what means it's a new slide, not just a nested element), 
+    * we grab the html commentaries and the content and store it in the localSession which gets read by the 
+    * presenterView.
+    */
+    $(document).bind('deck.change', function(event, from, to) {
+        presenterView.setCurrentItem(document.getElementById(location.hash.substring(1)));
+
+        if (presenterView.currentItemIsFromTypeSection()) {
+            // prepare
+            presenterView.storeNotes();
+            presenterView.storeNextSlide();
+
+            // write prepared content to localStorage
+            presenterView.write();
+        }
+    });
+}
+
+/**
+ * presenterView object, does all the work. Methods are called by the events above.
+ */
+var presenterView = (function() {
+    "use strict";
+    // private
+    var currentItem = null;
+    var currentItemsContent = null;
+    var writeToLocalStorage = [];
+
+    /**
+     * Creates the link to the presenterView, based on the current location (this is needed because nobody
+     * knows how the very much appreciated user names his presentation).
+     */
+    var createLinkToPresenterView = function() {
+        var hrefArr        = window.location.href.split('/');
+        var lastElemsIndex = hrefArr.length - 1;
+
+        delete hrefArr[lastElemsIndex];
+        delete hrefArr[lastElemsIndex - 1];
+
+        var baseUrl = deckjs_dir ? deckjs_dir + '/' : hrefArr.join('/');
+        var urlToPresenterView = baseUrl + 'extensions/presenterview/deck.presenterview.html';
+
+        return urlToPresenterView;
+    };
+
+    var addItemToLocalStorageArray = function(identifier, item) {
+        writeToLocalStorage[identifier] = item;
+    };
+
+    /**
+     * Extracts the html commentary from the current items content.
+     */
+    var getNotes = function() {
+        var startOfComment = currentItemsContent.indexOf('<!--');
+        var endOfComment   = currentItemsContent.indexOf('-->');
+
+        if (startOfComment !== -1 && endOfComment !== -1) {
+            return currentItemsContent.substring(startOfComment + 4, endOfComment);
+        }
+
+        return '';
+    };
+
+    /**
+     * Checks if there's a next slide (another section in the markup below the current) and returns
+     * the content if so.
+     */
+    var getNextSlide = function() {
+        if (currentItem.nextElementSibling.nodeName === 'SECTION') {
+            return currentItem.nextElementSibling.innerHTML;
+        } else {
+            return '';
+        }
+    };
+
+    // public
+    return {
+        /**
+         * Loops trough all stylesheets that are included in the presentation and writes them to the localStorage.
+         */
+        writeAllCssPathsToLocalStorage: function() {
+            if (document.styleSheets.length > 0) {
+                var styleArr = [];
+
+                for (var i = 0; i < document.styleSheets.length - 1; i++) {
+                    styleArr.push(document.styleSheets[i].href);
+                }
+
+                localStorage.setItem('stylesheets', JSON.stringify(styleArr));
+            }
+        },
+
+        getLinkToPresenterView: function() {
+            return createLinkToPresenterView();
+        },
+
+        /**
+         * Check if the current item is a slide or just a nested element in a slide.
+         */
+        currentItemIsFromTypeSection: function() {
+            return currentItem.nodeName === 'SECTION';
+        },
+
+        /**
+         * Write the current Item (DomNode) to the objects store to do some stuff with it.
+         */
+        setCurrentItem: function(DomNode) {
+            currentItem = DomNode;
+            currentItemsContent = DomNode.innerHTML;
+        },
+
+        /**
+         * Called to get and store the html commentary of the current slide.
+         */
+        storeNotes: function() {
+            addItemToLocalStorageArray('notes', getNotes());
+        },
+
+        /**
+         * Called to get and store the html markup of the next slide.
+         */
+        storeNextSlide: function() {
+            addItemToLocalStorageArray('next_slide', getNextSlide());
+        },
+
+        /**
+         * Writes the items that are stored in writeToLocalStorage[] to the localStorage - should be called after 
+         * writeToLocalStorage[] has been filled with values. :)
+         */
+        write: function() {
+            if (writeToLocalStorage.notes !== 'undefined') {
+                localStorage.setItem('notes', writeToLocalStorage['notes']);
+            }
+
+            if (writeToLocalStorage.next_slide !== 'undefined') {
+                localStorage.setItem('next_slide', writeToLocalStorage['next_slide']);
+            }
+        }
+    }
+})();

asciidoc/deck.js/extensions/presenterview/iframe.html

@@ -0,0 +1,39 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Presenter View</title>
+    <meta name="viewport" content="width=1024, user-scalable=no">
+    <!-- presenterview styling -->
+    <link rel="stylesheet" href="deck.presenterview.css">
+    <!-- preview styling, added via js on run -->
+</head>
+<body class="deck-container" style="zoom: 0.5; width: 600px;">
+    <section class="slide" id="nextSlide">
+
+    </section>
+</body>
+<script type="text/javascript">
+    // UNBELIEVABLE IMPERFORMANT, NEEDS TO BE REPLACED WITH... IDKY
+    window.setInterval("update()", 2000);
+
+    // retrieve links to the stylesheets
+    var stylesheets = JSON.parse(localStorage.getItem('stylesheets'));
+
+    for (var i = 0; i <= stylesheets.length - 1; i++) {
+        var linkElement = document.createElement('link');
+
+        linkElement.setAttribute('rel', 'stylesheet');
+        linkElement.setAttribute('href', stylesheets[i]);
+
+        document.head.appendChild(linkElement);
+    }
+
+    var nextSlideDisplay = document.getElementById('nextSlide');
+    function update() {
+        nextSlideDisplay.innerHTML = localStorage.getItem('next_slide');
+    }
+
+    update();
+</script>
+</html>

asciidoc/deck.js/extensions/presenterview/presenterwindow.js

@@ -0,0 +1,23 @@
+/**
+* set interval to read localStorage
+*/
+window.setInterval("update()", 200);
+
+var stylesheets = JSON.parse(localStorage.getItem('stylesheets'));
+
+for (var i = 0; i <= stylesheets.length - 1; i++) {
+    var linkElement = document.createElement('link');
+
+    linkElement.setAttribute('rel', 'stylsheet');
+    linkElement.setAttribute('href', stylesheets[i]);
+
+    document.head.appendChild(linkElement);
+}
+
+/**
+ * updates the notes
+ */
+function update() {
+    var note            = document.getElementById('note');
+    note.innerHTML      = localStorage.getItem('notes');
+}