[ci skip]Moved the example under this project and added a Makefile

(c) Copyright IBM Corp. 2015
jupyter · Dec 16, 2015 · 7701390 · 7701390
1 parent d227b4a
commit 7701390
Show file tree

Hide file tree

Showing 11 changed files with 216 additions and 4 deletions.
diff --git a/.npmignore b/.npmignore
diff --git a/etc/examples/standalone/.gitignore b/etc/examples/standalone/.gitignore
@@ -0,0 +1,2 @@
+index.built.js
+es5/
diff --git a/etc/examples/standalone/.jshintrc b/etc/examples/standalone/.jshintrc
@@ -0,0 +1,3 @@
+{
+    "esnext": true
+}
diff --git a/etc/examples/standalone/Makefile b/etc/examples/standalone/Makefile
@@ -0,0 +1,29 @@
+# Copyright (c) Jupyter Development Team.
+# Distributed under the terms of the Modified BSD License.
+
+.PHONY: help clean build run
+
+clean: clean-npm clean-build
+
+clean-npm:
+	-@rm -r node_modules
+
+clean-build:
+	-@rm -r es5
+	-@rm index.built.js
+
+build-ipywidgets:
+	@echo 'Building ipywidgets'
+	cd ../../../../ipywidgets/ipywidgets && npm install
+
+build-urth-widgets:
+	@echo 'Building urth-widgets'
+	cd ../../.. && make dist NOSCALA=true && npm install
+
+build: build-urth-widgets build-ipywidgets
+	@echo 'Building example'
+	npm install
+	cd node_modules/urth-widgets/dist/urth_widgets && ln -s bower_components/ urth_components
+
+run:
+	python -m SimpleHTTPServer 8000
diff --git a/etc/examples/standalone/README.md b/etc/examples/standalone/README.md
@@ -0,0 +1,10 @@
+# Using urth-widgets in non-notebook, web context
+## Description
+This directory is an example project that shows how you can embed the widgets in
+a context other than the notebook.
+
+## Try it
+This assumes that ipywidgets is cloned out at the same level as declarativewidgets
+In this directory:
+1. `make build`
+2. `make run`
diff --git a/etc/examples/standalone/index.html b/etc/examples/standalone/index.html
@@ -0,0 +1,44 @@
+<html>
+    <head>
+        <script src="index.built.js"></script>
+        <meta http-equiv="content-type" content="text/html; charset=UTF8">
+        <link rel="stylesheet" type="text/css" href="./node_modules/font-awesome/css/font-awesome.css">
+        <style>
+        body {
+            margin-left: auto;
+            margin-right: auto;
+            max-width: 900px;
+            background-color: #eee;
+        }
+
+        .jupyter-js-widgets-example {
+            margin-top: 10px;
+            margin-bottom: 10px;
+            background-color: white;
+            overflow: auto;
+            box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+        }
+
+        .widgetarea, .inputarea {
+            margin: 5px;
+        }
+
+        .CodeMirror {
+            border: 1px solid #ccc;
+            height: auto;
+            background-color: #f7f7f7;
+            border-radius: 2px;
+        }
+
+        .CodeMirror-Scroll {
+            height: auto;
+        }
+        </style>
+    </head>
+    <body>
+        <div class="jupyter-js-widgets-example">
+            <div class="inputarea"></div>
+            <div class="widgetarea"></div>
+        </div>
+    </body>
+</html>
diff --git a/etc/examples/standalone/package.json b/etc/examples/standalone/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "urth-standalone-example",
+  "version": "1.0.0",
+  "description": "Example of urth-widgets running in a standalone web app using jupyter-js-services",
+  "main": "index.js",
+  "scripts": {
+    "prepublish": "npm run build",
+    "build": "npm run build:es5 && npm run build:bundle",
+    "build:es5": "babel src --out-dir es5 --presets es2015",
+    "build:bundle": "browserify -g node-lessify ./es5/index.js --outfile ./index.built.js --debug",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "IPython",
+  "license": "BSD-3-Clause",
+  "dependencies": {
+    "browserify": "^11.2.0",
+    "codemirror": "^5.9.0",
+    "font-awesome": "^4.5.0",
+    "jupyter-js-widgets": "file:../../../../ipywidgets/ipywidgets",
+    "urth-widgets": "file:../../../../declarativewidgets",
+    "jquery": "^2.1.4",
+    "jquery-ui": "^1.10.5",
+    "jupyter-js-services": "^0.2.2",
+    "node-lessify": "^0.1.1"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.3.15",
+    "babel-preset-es2015": "^6.3.13",
+    "bower": "^1.7.0"
+  }
+}
diff --git a/etc/examples/standalone/src/index.js b/etc/examples/standalone/src/index.js
@@ -0,0 +1,52 @@
+var CodeMirror = require("codemirror");
+require("../node_modules/codemirror/lib/codemirror.css");
+require("../node_modules/codemirror/mode/python/python");
+
+var WidgetManager = require("./manager").WidgetManager;
+
+var urth_widgets = require('urth-widgets');
+
+var services = require('jupyter-js-services');
+var getKernelSpecs = services.getKernelSpecs;
+var startNewKernel = services.startNewKernel;
+
+var BASEURL = prompt('Notebook BASEURL', 'http://192.168.99.100:8888');
+
+var WSURL = 'ws:' + BASEURL.split(':').slice(1).join(':');
+
+debugger;
+
+urth_widgets.init('./node_modules/urth-widgets/dist/urth_widgets/');
+
+document.addEventListener("DOMContentLoaded", function(event) {
+
+    // Connect to the notebook webserver.
+    getKernelSpecs(BASEURL).then(kernelSpecs => {
+        return startNewKernel({
+            baseUrl: BASEURL,
+            wsUrl: WSURL,
+            name: kernelSpecs.default,
+        });
+    }).then(kernel => {
+
+        // Create a codemirror instance
+        var code = require("../widget_code.json").join("\n");
+        var inputarea = document.getElementsByClassName("inputarea")[0];
+        var editor = CodeMirror(inputarea, {
+            value: code,
+            mode: "python",
+            tabSize: 4,
+            showCursorWhenSelecting: true,
+            viewportMargin: Infinity,
+            readOnly: true
+        });
+
+        // Create the widget area and widget manager
+        var widgetarea = document.getElementsByClassName("widgetarea")[0];
+        var manager = new WidgetManager(kernel, widgetarea);
+
+        // Run backend code to create the widgets.  You could also create the
+        // widgets in the frontend, like the other /web/ examples demonstrate.
+        kernel.execute({ code: code });
+    });
+});
diff --git a/etc/examples/standalone/src/manager.js b/etc/examples/standalone/src/manager.js
@@ -0,0 +1,37 @@
+require('../node_modules/jupyter-js-widgets/static/components/bootstrap/css/bootstrap.css');
+require('../node_modules/jquery-ui/themes/smoothness/jquery-ui.min.css');
+
+const ipywidgets = require('jupyter-js-widgets');
+
+export class WidgetManager extends ipywidgets.ManagerBase {
+    constructor(kernel, el) {
+        super();
+        this.kernel = kernel;
+        this.el = el;
+
+        // Create a comm manager shim
+        this.commManager = new ipywidgets.shims.services.CommManager(kernel);
+
+        // Register the comm target
+        this.commManager.register_target(this.comm_target_name, this.handle_comm_open.bind(this));
+    }
+
+    display_view(msg, view, options) {
+        var that = this;
+        return Promise.resolve(view).then(function(view) {
+            that.el.appendChild(view.el);
+            view.on('remove', function() {
+                console.log('view removed', view);
+            });
+            return view;
+        });
+    }
+
+    _create_comm(targetName, id, metadata) {
+        return this.commManager.new_comm(targetName, metadata, id);
+    }
+
+    _get_comm_info() {
+        return Promise.resolve({});
+    }
+}
diff --git a/etc/examples/standalone/widget_code.json b/etc/examples/standalone/widget_code.json
@@ -0,0 +1,4 @@
+[
+    "%%HTML",
+    "<H1>HELLO WORLD</H1>"
+]
diff --git a/nb-extension/js/widgets/DeclWidgetModel.js b/nb-extension/js/widgets/DeclWidgetModel.js
@@ -3,16 +3,16 @@
 
 // npm compatibility
 function requireLocalFiles() {
-    require('../../../../node_modules/jupyter-js-widgets/static/widgets/js/manager-base');
-    require('../../../../node_modules/jupyter-js-widgets/static/widgets/js/widget');
+    require('../../../../../../node_modules/jupyter-js-widgets/static/widgets/js/manager-base');
+    require('../../../../../../node_modules/jupyter-js-widgets/static/widgets/js/widget');
 }
 
 if (typeof define !== 'function') {
     var amdefine = require('amdefine')(module, require);
 
     var mapping = {}
-    mapping['nbextensions/widgets/widgets/js/manager'] = '../../../../node_modules/jupyter-js-widgets/static/widgets/js/manager-base'
-    mapping['nbextensions/widgets/widgets/js/widget'] = '../../../../node_modules/jupyter-js-widgets/static/widgets/js/widget'
+    mapping['nbextensions/widgets/widgets/js/manager'] = '../../../../../../node_modules/jupyter-js-widgets/static/widgets/js/manager-base'
+    mapping['nbextensions/widgets/widgets/js/widget'] = '../../../../../../node_modules/jupyter-js-widgets/static/widgets/js/widget'
 
     var define = function(){
         var args = Array.prototype.slice.call(arguments);