nutella_framework 0.4.23 → 0.4.24

data/framework_components/roomcast-teacher-controls/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-teacher-controls/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-teacher-controls/gulp/tasks/build.js

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

data/framework_components/roomcast-teacher-controls/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-teacher-controls/gulp/tasks/default.js

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

data/framework_components/roomcast-teacher-controls/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-teacher-controls/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-teacher-controls/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-teacher-controls/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-teacher-controls/gulp/tasks/setWatch.js

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

data/framework_components/roomcast-teacher-controls/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-teacher-controls/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-teacher-controls/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-teacher-controls/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-teacher-controls/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-teacher-controls/index.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>RoomCast - Teacher controls</title>
+    <meta name="description" content="The interface to control the class activities in real-time.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="dist/main.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, 'broadcasting-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>
+
+
+
+</body>
+
+</html>

data/framework_components/roomcast-teacher-controls/nutella.json

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

data/framework_components/roomcast-teacher-controls/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "roomcast-teacher-controls",
+  "version": "0.1.0",
+  "description": "",
+  "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.0",
+    "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": {
+    "d3": "^3.5.5",
+    "material-ui": "^0.7.0",
+    "nutella_lib": "^0.5.1",
+    "react": "^0.13.0",
+    "react-tap-event-plugin": "^0.1.3"
+  }
+}

data/framework_components/roomcast-teacher-controls/src/app/app.js

@@ -0,0 +1,22 @@
+
+(function () {
+
+    var React = require('react'),
+        injectTapEventPlugin = require("react-tap-event-plugin"),
+        Main = require('./components/main.js'); // 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 = 'Main component';
+    window.ReactMain = React.render(<Main />, document.body);
+
+})();

data/framework_components/roomcast-teacher-controls/src/app/components/ActivitiesGrid.js

@@ -0,0 +1,87 @@
+
+var React = require('react');
+var Mui = require('material-ui');
+var ActivityCard = require('./ActivityCard');
+
+var ActivitiesGrid = React.createClass({
+
+    componentWillMount: function() {
+        this._externalMargin = 20;
+        this._cardMargin = 20;
+        this._heightRatio = 0.9;
+
+        this.computeGrid(this.props.configs);
+    },
+
+    componentWillReceiveProps: function(nextProps) {
+        this.computeGrid(nextProps.configs);
+    },
+
+    /**
+     * Computes grid size based on given number of configs.
+     */
+    computeGrid: function(configs) {
+        var N = Object.keys(configs).length; // num of total cards
+        var i = 1;  // num of rows
+        var j = 2;  // num of columns
+        for(var n=1; n<=N; n++) {
+            var p = i * j;
+            if(n > p) {
+                if(i < j) {
+                    i++;
+                } else {
+                    j++;
+                }
+            }
+        }
+        var cardWidth = (window.innerWidth - this._externalMargin*2 - this._cardMargin*2*j) / j;
+        var cardHeight = (window.innerHeight*this._heightRatio - this._externalMargin - this._cardMargin*2*i) / i;
+        this._cardSize = [cardWidth, cardHeight];
+
+    },
+
+    render: function () {
+
+        var cards = [];
+
+        var height = window.innerHeight * this._heightRatio;
+        var gridStyle = {height: height};
+
+        var cardStyle = {
+            width: this._cardSize[0],
+            height: this._cardSize[1],
+            //position: 'absolute',
+            flexBasis: this._cardSize[0]
+        };
+
+        for(var c in this.props.configs) {
+            if(this.props.configs.hasOwnProperty(c)) {
+                cards.push(
+                    <ActivityCard
+                        configId={c}
+                        configName={this.props.configs[c].name}
+                        currentConfigId={this.props.currentConfig}
+                        cardStyle={cardStyle}
+                        />
+                );
+            }
+        }
+
+        // Flip order
+        var cards_ = [];
+        for(var i=cards.length-1; i>=0; i--) {
+            cards_.push(cards[i]);
+        }
+
+        return (
+
+            <div className='activities-grid' style={gridStyle} >
+                {cards_}
+            </div>
+
+        );
+    }
+
+});
+
+module.exports = ActivitiesGrid;

data/framework_components/roomcast-teacher-controls/src/app/components/ActivityCard.js

@@ -0,0 +1,141 @@
+
+var React = require('react');
+var Mui = require('material-ui');
+var Paper = Mui.Paper;
+var d3 = require('d3');
+
+var ActivityCard = React.createClass({
+
+    componentDidMount: function() {
+        var self= this;
+        this._colorSelected = '#00bcd4';
+        this._timerDuration = 1500;
+
+        d3.select(this.getDOMNode())
+            .on('touchstart', function() {
+                self.cardTouchIn.call(self, this);
+            })
+            .on('mousedown', function() {
+                self.cardTouchIn.call(self, this);
+            })
+            .on('touchend', function() {
+                self.cardTouchOut.call(self);
+            })
+            .on('mouseup', function() {
+                self.cardTouchOut.call(self);
+            });
+
+    },
+
+    cardTouchIn: function(el) {
+        var self = this;
+
+        var cardWidth = this.props.cardStyle['width'];
+        var cardHeight = this.props.cardStyle['height'];
+        var circleRadius = Math.sqrt(Math.pow(cardWidth, 2) + Math.pow(cardHeight, 2)) / 2;
+
+        var publishAfterTransition = function() {
+            var action = function() {
+                nutella.net.publish('currentConfig/update', +self.props.configId);
+            };
+            self._timeoutId = setTimeout(action, self._timerDuration);
+        };
+
+        var svg = d3.select(el)
+            .select('.card-svg')
+            .append('svg')
+            .style({
+                width: cardWidth,
+                height: cardHeight
+            });
+
+        svg.append('circle')
+            .attr({
+                cx: cardWidth / 2,
+                cy: cardHeight / 2,
+                r: '0px'
+            })
+            .style({
+                fill: this._colorSelected
+            })
+            .transition()
+            .call(publishAfterTransition)
+            .duration(self._timerDuration)
+            .attr({
+                r: circleRadius
+            });
+
+    },
+
+    cardTouchOut: function() {
+        d3.selectAll('.activity-card')
+            .select('.card-svg')
+            .select('svg')
+            .remove();
+
+        window.clearTimeout(this._timeoutId);
+    },
+
+    componentWillReceiveProps: function(newProps) {
+        if(+newProps.currentConfigId === +newProps.configId) {
+            this.setState({
+                isSelected: true
+            });
+        } else {
+            this.setState({
+                isSelected: false
+            });
+        }
+
+    },
+
+    getInitialState: function () {
+        return  {
+            isSelected: false
+        }
+    },
+
+    render: function () {
+
+        var selectedCardStyle = {
+            backgroundColor: this._colorSelected,
+            color: 'white'
+        };
+
+        // Copy
+        var cardStyle = {};
+        for(var p_ in this.props.cardStyle) {
+            cardStyle[p_] = this.props.cardStyle[p_];
+        }
+
+        var className='activity-card';
+
+        // Add properties if selected
+        if(this.state.isSelected) {
+            className += ' activity-card-selected';
+            for(var p in selectedCardStyle) {
+                cardStyle[p] = selectedCardStyle[p];
+            }
+
+        }
+
+        return (
+
+            <Paper className={className} style={cardStyle}  >
+
+                <div className='card-svg'> </div>
+
+                <div className='card-name'>
+
+                    <span> {this.props.configName} </span>
+
+                </div>
+
+
+
+            </Paper>);
+    }
+
+});
+
+module.exports = ActivityCard;