nutella_framework 0.4.13 → 0.4.16

data/framework_components/roomcast-channel-creator/gulp/config.js

@@ -0,0 +1,51 @@
+var dest = './dist',
+    src = './src',
+    mui = './node_modules/material-ui/src';
+
+module.exports = {
+    browserSync: {
+        server: {
+            // We're serving the src folder as well
+            // for sass sourcemap linking
+            baseDir: [dest, src]
+        },
+        files: [
+            dest + '/**'
+        ]
+    },
+    less: {
+        src: src + '/less/main.less',
+        watch: [
+            src + '/less/**',
+            mui + '/less/**'
+        ],
+        dest: dest
+    },
+    css: {
+        src: src + "/css/**",
+        dest: dest + "/css"
+    },
+    fonts: {
+        src: src + '/fonts/**',
+        dest: dest + '/fonts'
+    },
+    muiFonts: {
+        src: mui + '/less/material-ui-icons/fonts/**',
+        dest: dest + '/fonts'
+    },
+    nutella: {
+        src: './node_modules/nutella_lib/dist/nutella_lib.js',
+        dest: dest
+    },
+    browserify: {
+        // Enable source maps
+        debug: true,
+        // A separate bundle will be generated for each
+        // bundle config in the list below
+        bundleConfigs: [{
+            entries: src + '/app/app.js',
+            dest: dest,
+            outputName: 'app.js'
+        }]
+    }
+};

data/framework_components/roomcast-channel-creator/gulp/tasks/browserify.js

@@ -0,0 +1,77 @@
+/* browserify task
+   ---------------
+   Bundle javascripty things with browserify!
+   This task is set up to generate multiple separate bundles, from
+   different sources, and to use Watchify when run from the default task.
+   See browserify.bundleConfigs in gulp/config.js
+*/
+
+var browserify   = require('browserify');
+var watchify     = require('watchify');
+var bundleLogger = require('../util/bundleLogger');
+var gulp         = require('gulp');
+var handleErrors = require('../util/handleErrors');
+var source       = require('vinyl-source-stream');
+var config       = require('../config').browserify;
+
+gulp.task('browserify', function(callback) {
+
+  var bundleQueue = config.bundleConfigs.length;
+
+  var browserifyThis = function(bundleConfig) {
+
+    var bundler = browserify({
+      // Required watchify args
+      cache: {}, packageCache: {}, fullPaths: false,
+      // Specify the entry point of your app
+      entries: bundleConfig.entries,
+      // Add file extentions to make optional in your requires
+      extensions: config.extensions,
+      // Enable source maps!
+      debug: config.debug
+    });
+
+    var bundle = function() {
+      // Log when bundling starts
+      bundleLogger.start(bundleConfig.outputName);
+
+      return bundler
+        .bundle()
+        // Report compile errors
+        .on('error', handleErrors)
+        // Use vinyl-source-stream to make the
+        // stream gulp compatible. Specifiy the
+        // desired output filename here.
+        .pipe(source(bundleConfig.outputName))
+        // Specify the output destination
+        .pipe(gulp.dest(bundleConfig.dest))
+        .on('end', reportFinished);
+    };
+
+    if(global.isWatching) {
+      // Wrap with watchify and rebundle on changes
+      bundler = watchify(bundler);
+      // Rebundle on update
+      bundler.on('update', bundle);
+    }
+
+    var reportFinished = function() {
+      // Log when bundling completes
+      bundleLogger.end(bundleConfig.outputName);
+
+      if(bundleQueue) {
+        bundleQueue--;
+        if(bundleQueue === 0) {
+          // If queue is empty, tell gulp the task is complete.
+          // https://github.com/gulpjs/gulp/blob/master/docs/API.md#accept-a-callback
+          callback();
+        }
+      }
+    };
+
+    return bundle();
+  };
+
+  // Start bundling with Browserify for each bundleConfig specified
+  config.bundleConfigs.forEach(browserifyThis);
+});

data/framework_components/roomcast-channel-creator/gulp/tasks/build.js

@@ -0,0 +1,3 @@
+var gulp = require('gulp');
+
+gulp.task('build', ['browserify', 'less', 'fonts', 'muiFonts']);

data/framework_components/roomcast-channel-creator/gulp/tasks/css.js

@@ -0,0 +1,7 @@
+var gulp = require('gulp');
+var config = require('../config').css;
+
+gulp.task('css', function() {
+  return gulp.src(config.src)
+    .pipe(gulp.dest(config.dest));
+});

data/framework_components/roomcast-channel-creator/gulp/tasks/default.js

@@ -0,0 +1,3 @@
+var gulp = require('gulp');
+
+gulp.task('default', ['watch', 'nutella', 'css', 'build']);

data/framework_components/roomcast-channel-creator/gulp/tasks/fonts.js

@@ -0,0 +1,7 @@
+var gulp = require('gulp');
+var config = require('../config').fonts;
+
+gulp.task('fonts', function() {
+  return gulp.src(config.src)
+    .pipe(gulp.dest(config.dest));
+});

data/framework_components/roomcast-channel-creator/gulp/tasks/less.js

@@ -0,0 +1,16 @@
+var gulp = require('gulp'),
+  less = require('gulp-less'),
+  autoprefixer = require('gulp-autoprefixer'),
+  sourcemaps = require('gulp-sourcemaps'),
+  handleErrors = require('../util/handleErrors'),
+  config = require('../config').less;
+
+gulp.task('less', function() {
+  return gulp.src(config.src)
+    .pipe(sourcemaps.init())
+    .pipe(less())
+    .on('error', handleErrors)
+    .pipe(autoprefixer({cascade: false, browsers: ['last 2 versions']}))
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest(config.dest));
+});

data/framework_components/roomcast-channel-creator/gulp/tasks/mui-fonts.js

@@ -0,0 +1,7 @@
+var gulp = require('gulp');
+var config = require('../config').muiFonts;
+
+gulp.task('muiFonts', function() {
+  return gulp.src(config.src)
+    .pipe(gulp.dest(config.dest));
+});

data/framework_components/roomcast-channel-creator/gulp/tasks/nutella.js

@@ -0,0 +1,7 @@
+var gulp = require('gulp');
+var config = require('../config').nutella;
+
+gulp.task('nutella', function() {
+    return gulp.src(config.src)
+        .pipe(gulp.dest(config.dest));
+});

data/framework_components/roomcast-channel-creator/gulp/tasks/setWatch.js

@@ -0,0 +1,5 @@
+var gulp = require('gulp');
+
+gulp.task('setWatch', function() {
+  global.isWatching = true;
+});

data/framework_components/roomcast-channel-creator/gulp/tasks/svgs.js

@@ -0,0 +1,7 @@
+var gulp = require('gulp');
+var config = require('../config').svgs;
+
+gulp.task('svgs', function() {
+  return gulp.src(config.src)
+    .pipe(gulp.dest(config.dest));
+});

data/framework_components/roomcast-channel-creator/gulp/tasks/watch.js

@@ -0,0 +1,12 @@
+
+/* Notes:
+   - gulp/tasks/browserify.js handles js recompiling with watchify
+   - gulp/tasks/browserSync.js watches and reloads compiled files
+*/
+
+var gulp   = require('gulp');
+var config = require('../config');
+
+gulp.task('watch', ['setWatch'], function() {
+  gulp.watch(config.less.watch, ['less']);
+});

data/framework_components/roomcast-channel-creator/gulp/util/bundleLogger.js

@@ -0,0 +1,21 @@
+/* bundleLogger
+   ------------
+   Provides gulp style logs to the bundle method in browserify.js
+*/
+
+var gutil        = require('gulp-util');
+var prettyHrtime = require('pretty-hrtime');
+var startTime;
+
+module.exports = {
+  start: function(filepath) {
+    startTime = process.hrtime();
+    gutil.log('Bundling', gutil.colors.green(filepath) + '...');
+  },
+
+  end: function(filepath) {
+    var taskTime = process.hrtime(startTime);
+    var prettyTime = prettyHrtime(taskTime);
+    gutil.log('Bundled', gutil.colors.green(filepath), 'in', gutil.colors.magenta(prettyTime));
+  }
+};

data/framework_components/roomcast-channel-creator/gulp/util/handleErrors.js

@@ -0,0 +1,15 @@
+var notify = require("gulp-notify");
+
+module.exports = function() {
+
+  var args = Array.prototype.slice.call(arguments);
+
+  // Send error to notification center with gulp-notify
+  notify.onError({
+    title: "Compile Error",
+    message: "<%= error.message %>"
+  }).apply(this, args);
+
+  // Keep gulp from hanging on this task
+  this.emit('end');
+};

data/framework_components/roomcast-channel-creator/gulpfile.js

@@ -0,0 +1,16 @@
+/*
+  gulpfile.js
+  ===========
+  Rather than manage one giant configuration file responsible
+  for creating multiple tasks, each task has been broken out into
+  its own file in gulp/tasks. Any files in that directory get
+  automatically required below.
+  To add a new task, simply add a new task file that directory.
+  gulp/tasks/default.js specifies the default set of tasks to run
+  when you run `gulp`.
+*/
+
+var requireDir = require('require-dir');
+
+// Require all tasks in gulp/tasks, including subfolders
+requireDir('./gulp/tasks', { recurse: true });

data/framework_components/roomcast-channel-creator/index.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Channel Creation Interface</title>
+    <meta name="description" content="This interface allows the teacher/developer to add/delete or modify the channels catalogue of RoomCast.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="dist/main.css">
+    <link rel="stylesheet" type="text/css" href="dist/css/font-awesome.min.css">
+    <link rel="stylesheet" type="text/css" href="dist/css/ionicons.min.css">
+</head>
+
+<body>
+
+<!-- Nutella -->
+<script src="dist/nutella_lib.js" type="text/javascript" charset="utf-8"></script>
+<script type="text/javascript">
+
+    // Parse the query parameters
+    var query_parameters = NUTELLA.parseURLParameters();
+
+    // Get an instance of nutella.
+    var nutella = NUTELLA.init(query_parameters.broker, query_parameters.app_id, query_parameters.run_id, 'channel-creation-interface');
+
+</script>
+
+<!-- This script adds the Roboto font to our project. For more detail go to this site:  http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500 -->
+<script>
+    var WebFontConfig = {
+        google: {
+            families: ['Roboto:400,300,200,100,500:latin']
+        }
+    };
+    (function () {
+        var wf = document.createElement('script');
+        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
+                '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
+        wf.type = 'text/javascript';
+        wf.async = 'true';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(wf, s);
+    })();
+</script>
+
+<script src="dist/app.js"></script>
+<!--script src="json2.js"></script-->
+
+</body>
+
+</html>

data/framework_components/roomcast-channel-creator/nutella.json

@@ -0,0 +1,6 @@
+{
+  "name": "roomcast-channel-creator",
+  "version": "0.1.0",
+  "type": "interface",
+  "description": "The web interface of RoomCast channel creator"
+}

data/framework_components/roomcast-channel-creator/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "material-ui-example",
+  "version": "0.0.1",
+  "description": "Sample project that uses material-ui",
+  "browserify": {
+    "transform": [
+      [
+        "reactify",
+        {
+          "es6": true
+        }
+      ]
+    ]
+  },
+  "devDependencies": {
+    "browser-sync": "^1.8.1",
+    "browserify": "^7.0.3",
+    "gulp": "^3.8.10",
+    "gulp-autoprefixer": "^2.0.0",
+    "gulp-less": "^3.0.3",
+    "gulp-notify": "^2.1.0",
+    "gulp-sourcemaps": "^1.2.8",
+    "gulp-util": "^3.0.1",
+    "pretty-hrtime": "^0.2.2",
+    "reactify": "^0.17.1",
+    "require-dir": "^0.1.0",
+    "underscore": "^1.7.0",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "material-ui": "^0.7.3",
+    "nutella_lib": "^0.5.1",
+    "react": "^0.13.2",
+    "react-tap-event-plugin": "^0.1.3"
+  }
+}

data/framework_components/roomcast-channel-creator/src/app/app.js

@@ -0,0 +1,22 @@
+
+(function () {
+
+    var React = require('react'),
+        injectTapEventPlugin = require("react-tap-event-plugin"),
+        Main = require('./components/main'); // Our custom react component
+
+    //Needed for React Developer Tools
+    window.React = React;
+
+    //Needed for onTouchTap
+    //Can go away when react 1.0 release
+    //Check this repo:
+    //https://github.com/zilverline/react-tap-event-plugin
+    injectTapEventPlugin();
+
+    // Render the main app react component into the document body.
+    // For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
+    window.ReactMain = React.render( <Main /> , document.body);
+    ReactMain.imagesQueue = 0;
+
+})();

data/framework_components/roomcast-channel-creator/src/app/components/AnimationMixin.js

@@ -0,0 +1,44 @@
+
+var AnimationMixin = {
+
+    /**
+     * Flips element wrt vertical axis
+     * @param node DOM node
+     * @param startDeg
+     * @param endDeg
+     * @param ccw true if animated in ccw direction
+     * @param callback called at the end of the animation
+     */
+    flipY: function(node, startDeg, endDeg, ccw, callback) {
+        var self = this;
+
+        this.ny = startDeg;
+
+        if(this.rotYINT) {
+            clearInterval(this.rotYINT);
+        }
+
+        function rotate() {
+            if(ccw) {
+                self.ny -= 5;
+            } else {
+                self.ny += 5;
+            }
+            node.style.transform="rotateY(" + self.ny + "deg)";
+            node.style.webkitTransform="rotateY(" + self.ny + "deg)";
+            node.style.OTransform="rotateY(" + self.ny + "deg)";
+            node.style.MozTransform="rotateY(" + self.ny + "deg)";
+            if (self.ny === endDeg) {
+                clearInterval(self.rotYINT);
+                if(callback) {
+                    callback();
+                }
+            }
+        }
+        this.rotYINT = setInterval(rotate, 4);
+
+    }
+
+};
+
+module.exports = AnimationMixin;

data/framework_components/roomcast-channel-creator/src/app/components/CataloguePage.js

@@ -0,0 +1,130 @@
+
+var React = require('react');
+var Mui = require('material-ui');
+var TopBar = require('./TopBar');
+var Dialog = Mui.Dialog;
+var FlatButton = Mui.FlatButton;
+
+var CataloguePage = React.createClass({
+
+    componentDidMount: function() {
+        this.updateDimensions();
+        window.addEventListener("resize", this.updateDimensions);
+    },
+
+    componentWillUnmount: function() {
+        window.removeEventListener("resize", this.updateDimensions);
+    },
+
+    getInitialState: function () {
+        return  {
+            height: 0
+        }
+    },
+
+    updateDimensions: function() {
+        var height = this.refs.gridRef.getDOMNode().offsetHeight;
+
+        this.setState({height: height});
+    },
+
+    enableSaveDialog: function() {
+        this.props.onExitSelection();
+        this.refs.saveDialog.show();
+    },
+
+    disableSaveDialog: function() {
+        this.refs.saveDialog.dismiss();
+    },
+
+    enableUndoDialog: function() {
+        this.props.onExitSelection();
+        this.refs.undoDialog.show();
+    },
+
+    disableUndoDialog: function() {
+        this.refs.undoDialog.dismiss();
+    },
+
+    render: function() {
+
+        var self = this;
+
+        var handleOnSave = function() {
+            self.props.onSave();
+            self.disableSaveDialog();
+        };
+
+        var customActionsSave = [
+            React.createElement(FlatButton, {
+                key: 2,
+                label: "Confirm",
+                secondary: true,
+                onTouchTap: handleOnSave}),
+            React.createElement(FlatButton, {
+                key: 1,
+                label: "Cancel",
+                primary: true,
+                onTouchTap: this.disableSaveDialog})
+        ];
+
+        var handleOnUndo = function() {
+            self.props.onUndo();
+            self.disableUndoDialog();
+        };
+
+        var customActionsUndo = [
+            React.createElement(FlatButton, {
+                key: 2,
+                label: "Confirm",
+                secondary: true,
+                onTouchTap: handleOnUndo}),
+            React.createElement(FlatButton, {
+                key: 1,
+                label: "Cancel",
+                primary: true,
+                onTouchTap: this.disableUndoDialog})
+        ];
+
+        var overlayStyle = {
+            height: this.state.height
+        };
+
+        var overlay = <div className="grid-overlay"  onTouchTap={this.props.onExitSelection} ></div>;
+        if(this.props.isSelected) {
+            overlay = <div className="grid-overlay is-shown"  onTouchTap={this.props.onExitSelection} ></div>;
+        }
+
+        return (
+
+            <div>
+
+                <TopBar
+                    onSave={this.enableSaveDialog}
+                    onUndo={this.enableUndoDialog}
+                    onAddCard={this.props.onAddCard}
+                    onExitSelection={this.props.onExitSelection} />
+
+                <div className='content-div'>
+
+                    {this.props.backgroudMessage}
+
+                    <div className="grid" ref='gridRef' >
+                        {overlay}
+                        {this.props.channels}
+                    </div>
+                </div>
+
+                <Dialog ref='saveDialog' actions={customActionsSave} > Do you want to save this catalogue? </Dialog>
+                <Dialog ref='undoDialog' actions={customActionsUndo} > Do you want to reload the starting catalogue? </Dialog>
+
+            </div>
+
+        );
+
+    }
+
+});
+
+module.exports = CataloguePage;
+