nutella_framework 0.4.13 → 0.4.16

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

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

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

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

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

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

data/framework_components/roomcast-package-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-package-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-package-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-package-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-package-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-package-creator/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>Configuration Interface</title>
+    <meta name="description" content="This interface allows the user to set the mapping of the available channels on the resources.">
+    <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, 'configuration-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-package-creator/nutella.json

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

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

@@ -0,0 +1,38 @@
+{
+    "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": {
+        "d3": "^3.5.5",
+        "material-ui": "^0.4.1",
+        "nutella_lib": "^0.5.1",
+        "react": "^0.12.2",
+        "react-tap-event-plugin": "^0.1.3"
+    }
+}

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

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

data/framework_components/roomcast-package-creator/src/app/components/ButtonInteractionsMixin.js

@@ -0,0 +1,45 @@
+
+var ButtonInteractionsMixin = {
+
+    insertNewChannel: function(channels, chId) {
+
+        var newChannels = [];
+        var found = false;
+        for(var i=0; i<channels.length; i++) {
+            if (+chId === +channels[i]) {
+                return channels;
+            }
+            if(+chId < +channels[i] && !found) {
+                newChannels.push(chId);
+                newChannels.push(channels[i]);
+                found = true;
+            } else {
+                newChannels.push(channels[i]);
+            }
+        }
+        if(!found) {
+            newChannels.push(chId);
+        }
+
+        return newChannels;
+    },
+
+    removeChannel: function(channels, chId) {
+
+        var newChannels = [];
+        for(var ch in channels) {
+            newChannels.push(channels[ch]);
+        }
+        for(var i = newChannels.length; i>=0; i--) {
+            if(newChannels[i] === chId) {
+                newChannels.splice(i, 1);
+            }
+        }
+
+        return newChannels;
+
+    }
+
+};
+
+module.exports = ButtonInteractionsMixin;

data/framework_components/roomcast-package-creator/src/app/components/ChannelCard.js

@@ -0,0 +1,87 @@
+var React = require('react');
+var Mui = require('material-ui');
+var Paper = Mui.Paper;
+
+/**
+ * @prop selectedChannel
+ * @prop channels
+ */
+var ChannelCard = React.createClass({
+
+    handleSelectCard: function() {
+
+        if(this.props.currentSelectedChannel && this.props.currentSelectedChannel.id === this.props.channelId) {
+            this.props.onSelectedChannel(null);
+        } else {
+            // set selected channel (state)
+            var newSelected = {
+                id: this.props.channelId,
+                belongsTo: 'channels',
+                imgNode: null,
+                channel: null,
+                channelData: this.props.channelData
+            };
+            this.props.onSelectedChannel(newSelected);
+
+        }
+
+    },
+
+    render: function() {
+
+        var style = {
+            backgroundImage: 'url(' + this.props.channelData.screenshot + ')',
+            backgroundSize: '100% 100%'
+        };
+
+        if(this.props.currentSelectedChannel) {
+            if(this.props.currentSelectedChannel.id !== this.props.channelId) {
+                style.opacity = '0.5';
+            }
+        }
+
+        var iconStyle = {
+            backgroundColor: this.props.channelData.icon
+        };
+
+        var description =
+            <p className='channel-description'> {this.props.channelData.description} </p>;
+
+        return (
+
+            <div className="col-1-3" >
+
+                <Paper className='channel-card'
+                       ref={'channel' + this.props.channelId}
+                       zDepth={3}
+                       style={style}
+                       onTouchTap={this.handleSelectCard} >
+
+                    <div className='channel-div'>
+
+                        <div className='channel-caption'>
+
+                            <div className='icon-name-wrapper'>
+
+                                <div className='channel-icon' ref='channelIcon' style={iconStyle} > </div>
+
+                                <div className='name-wrapper'>
+                                    <p className='channel-name'> {this.props.channelData.name} </p>
+                                </div>
+
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </Paper>
+
+            </div>);
+
+    }
+
+});
+
+module.exports = ChannelCard;
+

data/framework_components/roomcast-package-creator/src/app/components/ChannelItem.js

@@ -0,0 +1,71 @@
+var React = require('react');
+var Mui = require('material-ui');
+var d3 = require('d3');
+var Paper = Mui.Paper;
+
+/**
+ * @prop id
+ * @prop name
+ * @prop imgPath
+ * @prop onSelectedChannel
+ * @prop currentSelectedChannel
+ * @prop belongsTo
+ */
+var ChannelItem = React.createClass({
+
+    /**
+     * Manages the interactions with the channels.
+     */
+    handleSelectedChannel: function() {
+
+        var imgNode = this.refs.channelIcon.getDOMNode();
+        var currentSelected = this.props.currentSelectedChannel;
+
+        if(currentSelected && currentSelected.imgNode && currentSelected.id === this.props.id && currentSelected.imgNode == imgNode) {
+
+            // set not selected
+            this.props.onSelectedChannel(null);
+
+        } else {
+
+            // set selected channel (state)
+            var newSelected = {
+                id: this.props.id,
+                belongsTo: this.props.belongsTo,
+                imgNode: imgNode,
+                channel: this,
+                channelData: this.props.channelData
+            };
+            this.props.onSelectedChannel(newSelected);
+        }
+
+    },
+
+    render: function() {
+
+        var iconStyle = {
+            backgroundColor: this.props.channelData.icon
+        };
+
+        // style channels in resources list
+        if(this.props.belongsTo==='resources') {
+            var currentSelected = this.props.currentSelectedChannel;
+            if(currentSelected && (currentSelected.channel == this) && currentSelected.id === this.props.id) {
+                iconStyle.border = '3px solid black';
+            }
+
+        }
+
+        return (
+            <div className='channel-item' onClick={this.handleSelectedChannel}>
+                <div className='channel-icon' ref='channelIcon' style={iconStyle} > </div>
+                <span> {this.props.name} </span>
+            </div>
+        );
+
+    }
+
+});
+
+module.exports = ChannelItem;
+

data/framework_components/roomcast-package-creator/src/app/components/ChannelsCatalogue.js

@@ -0,0 +1,64 @@
+var React = require('react');
+var Mui = require('material-ui');
+var ChannelCard = require('./ChannelCard');
+
+var ChannelsCatalogue = React.createClass({
+
+    handleSelectedChannel: function(ch) {
+        this.props.onSelectedChannel(ch);
+    },
+
+    handleStyleRespectiveChannel: function() {
+        var selected = this.props.selectedChannel;
+        for(ref in this.refs) {
+            console.log(ref, selected);
+            if(this.refs[ref].props.id===selected.id) {
+                console.log(selected.imgNode);
+                break;
+            }
+        }
+    },
+
+    render: function() {
+
+        var channels = [];
+        var chs = this.props.channels;
+        var keys = Object.keys(chs).sort();
+        for(var i = 0; i < keys.length; i++) {
+            var key = keys[i];
+
+            // set respective selected channel in channels list
+            var respectiveSelected = null;
+            if(this.props.selectedChannel && key===this.props.selectedChannel.id) {
+                respectiveSelected = true;
+            }
+
+            channels.push(<ChannelCard
+                id={key}
+                key={key}
+                channelData={chs[key]}
+                channelId={key}
+                currentSelectedChannel={this.props.selectedChannel}
+                respectiveSelected={respectiveSelected}
+                onSelectedChannel={this.handleSelectedChannel} />
+            );
+        }
+
+        var backgroundMessage = null; //TODO
+
+        return (
+            <div className='content-div'>
+
+                {backgroundMessage}
+
+                <div className="grid" ref='gridRef' >
+                    {channels}
+                </div>
+            </div>
+        )
+    }
+
+});
+
+module.exports = ChannelsCatalogue;
+