Initial presentation ideas

Author: quantuminformation

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["es2015", "react", "stage-0"],
+  "env": {
+    "development": {
+      "presets": ["react-hmre"]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,21 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules
+npm-debug.log
+dist
+out
+.idea

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,19 @@
+# Template
+
+This is a presentation template.
+
+## Reference
+
+The Spectacle core API is available at [https://github.com/FormidableLabs/spectacle/blob/master/README.markdown](https://github.com/FormidableLabs/spectacle/blob/master/README.markdown).
+
+## Development
+
+To start up the local server, run `npm start`
+
+Open a browser and hit [http://localhost:3000](http://localhost:3000), and we are ready to roll
+
+## Building & Deployment
+
+Building the dist version of the project is as easy as running `npm run build`
+
+If you want to deploy the slideshow to gh-pages, run `npm run deploy`

deploy.sh

@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+git checkout master
+npm run build
+exists=`git show-ref refs/heads/gh-pages`
+if [ -n "$exists" ]; then
+    git branch -D gh-pages
+fi
+git branch -D gh-pages
+
+git checkout --orphan gh-pages
+git add dist/* -f
+git commit -m "build files"
+git push -f origin gh-pages
+git checkout master

examples/Hello.tsx

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+export interface HelloProps { compiler: string; framework: string; }
+
+export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;

examples/HelloClassic.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export interface HelloProps { compiler: string; framework: string; }
+
+// 'HelloProps' describes the shape of props.
+// State is never set so we use the 'undefined' type.
+export class Hello extends React.Component<HelloProps, undefined> {
+    render() {
+        return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
+    }
+}

examples/IComponent.ts

@@ -0,0 +1,4 @@
+export interface IComponent {
+  destroy: ()=>void
+  show: ()=>void
+}

examples/SolarPopup.ts

@@ -0,0 +1,91 @@
+import {ModalBackground} from './ModalBackground'
+import {IComponent} from "vanilla-typescript"
+import {constants} from "./constants"
+import './SolarPopup.pcss'
+
+/**
+ * A Popup that can take any content
+ *
+ * Features
+ * Closes in response to [ESC] keypress, submit events.
+ * Adds modal background that fades in with CSS3 transitions
+ * Popup itself slides in with CSS3 transitions
+ *
+ * @constructor
+ */
+export default class SolarPopup implements IComponent {
+  destroyBoundWithThis = this.destroy.bind(this)
+  modalBackground = new ModalBackground()
+  private hostElement: HTMLElement
+  private child: HTMLElement
+
+  constructor(child: HTMLElement) {
+    this.child = child
+  }
+
+
+  /**
+   * Shows
+   * @param {Element} child we need to keep the reference to keep custom functionality in the child
+   */
+  show() {
+
+    const tempElement:HTMLElement = document.createElement('DIV')
+
+    tempElement.innerHTML =
+      `<article class='solar-popup' data-is-initialising="true">
+        <a class='close'><!--&#x274c;-->&#x2716;</a>
+          <div class="childContainer"></div>
+       </article>`
+    tempElement.querySelector(".childContainer").appendChild(this.child)
+
+    this.hostElement = <HTMLElement>tempElement.firstChild
+    document.body.appendChild(this.hostElement)
+    let currentWidth = window.getComputedStyle(document.querySelector("p"))
+
+    this.modalBackground.render()
+
+    setTimeout(() => {
+      //this triggers a css change
+      //let currentWidth = window.getComputedStyle(document.querySelector("p")) }, 50)
+      this.hostElement.dataset["isInitialising"] = "false"
+    })
+    this.addListeners()
+  }
+
+  addListeners() {
+    const closeElement = this.hostElement.querySelector('a')
+    closeElement.addEventListener('click', this.destroyBoundWithThis)
+    this.hostElement.classList.remove('offscreen')
+
+    document.addEventListener('keyup', function (event) {
+      if (event.keyCode === constants.KEYS.ESC) {
+        this.destroyBoundWithThis()
+      }
+    }.bind(this))
+
+    this.hostElement.addEventListener('submit', function (event) {
+      this.destroyBoundWithThis()
+      event.preventDefault()
+    }.bind(this))
+
+
+    // handle the first child submit button click, close popup by default
+    // this is a convention that gets popup to behave in sensible way
+    const submitBtn = this.hostElement.querySelector('button[type="submit"]')
+    if (submitBtn) {
+      submitBtn.addEventListener("click", this.destroyBoundWithThis)
+    }
+  }
+
+  destroy() {
+    //vistual indicator for this element and delegate to the modal
+    this.hostElement.dataset["isDestructing"] = "true"
+    this.modalBackground.destroy()
+    setTimeout(function () {
+      this.hostElement.parentElement.removeChild(this.hostElement)
+    }.bind(this), constants.TRANSITION_TIMES)
+  }
+}
+
+