catscope 0.0.1

data/assets/bower_components/modernizr/test/qunit/run-qunit.js

@@ -0,0 +1,72 @@
+/**
+* Wait until the test condition is true or a timeout occurs. Useful for waiting
+* on a server response or for a ui change (fadeIn, etc.) to occur.
+*
+* @param testFx javascript condition that evaluates to a boolean,
+* it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
+* as a callback function.
+* @param onReady what to do when testFx condition is fulfilled,
+* it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
+* as a callback function.
+* @param timeOutMillis the max amount of time to wait. If not specified, 3 sec is used.
+*/
+function waitFor(testFx, onReady, timeOutMillis) {
+    var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 3001, //< Default Max Timout is 3s
+        start = new Date().getTime(),
+        condition = false,
+        interval = setInterval(function() {
+            if ( (new Date().getTime() - start < maxtimeOutMillis) && !condition ) {
+                // If not time-out yet and condition not yet fulfilled
+                condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); //< defensive code
+            } else {
+                if(!condition) {
+                    // If condition still not fulfilled (timeout but condition is 'false')
+                    console.log("'waitFor()' timeout");
+                    phantom.exit(1);
+                } else {
+                    // Condition fulfilled (timeout and/or condition is 'true')
+                    typeof(onReady) === "string" ? eval(onReady) : onReady(); //< Do what it's supposed to do once the condition is fulfilled
+                    clearInterval(interval); //< Stop this interval
+                }
+            }
+        }, 100); //< repeat check every 250ms
+};
+
+
+if (phantom.args.length === 0 || phantom.args.length > 2) {
+    console.log('Usage: run-qunit.js URL');
+    phantom.exit();
+}
+
+var page = new WebPage();
+
+// Route "console.log()" calls from within the Page context to the main Phantom context (i.e. current "this")
+page.onConsoleMessage = function(msg) {
+    console.log(msg);
+};
+
+page.open(phantom.args[0], function(status){
+    if (status !== "success") {
+        console.log("Unable to access network");
+        phantom.exit();
+    } else {
+        waitFor(function(){
+            return page.evaluate(function(){
+                var el = document.getElementById('qunit-testresult');
+                if (el && el.innerText.match('completed')) {
+                    return true;
+                }
+                return false;
+            });
+        }, function(){
+            var failedNum = page.evaluate(function(){
+                var el = document.getElementById('qunit-testresult');
+                try {
+                    return el.getElementsByClassName('failed')[0].innerHTML;
+                } catch (e) { }
+                return 10000;
+            });
+            phantom.exit((parseInt(failedNum, 10) > 0) ? 1 : 0);
+        });
+    }
+});

data/assets/config.rb

@@ -0,0 +1,24 @@
+# Require any additional compass plugins here.
+add_import_path "bower_components/foundation/scss"
+
+# Set this to the root of your project when deployed:
+http_path = "/assets"
+css_dir = "stylesheets"
+sass_dir = "scss"
+images_dir = "images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

data/assets/example.html

@@ -0,0 +1,163 @@
+<!doctype html>
+<html class="no-js" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Foundation</title>
+    <link rel="stylesheet" href="stylesheets/app.css" />
+    <script src="bower_components/modernizr/modernizr.js"></script>
+  </head>
+  <body>
+    <div class="row">
+      <div class="large-12 columns">
+        <h1>Welcome to Foundation</h1>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="large-12 columns">
+        <div class="panel">
+          <h3>We&rsquo;re stoked you want to try Foundation! </h3>
+          <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
+          <p>Once you've exhausted the fun in this document, you should check out:</p>
+          <div class="row">
+            <div class="large-4 medium-4 columns">
+          <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
+        </div>
+            <div class="large-4 medium-4 columns">
+              <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
+            </div>
+            <div class="large-4 medium-4 columns">
+              <p><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</p>
+            </div>        
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-8 medium-8 columns">
+        <h5>Here&rsquo;s your basic grid:</h5>
+        <!-- Grid Example -->
+
+        <div class="row">
+          <div class="large-12 columns">
+            <div class="callout panel">
+              <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="large-6 medium-6 columns">
+            <div class="callout panel">
+              <p>Six columns</p>
+            </div>
+          </div>
+          <div class="large-6 medium-6 columns">
+            <div class="callout panel">
+              <p>Six columns</p>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="large-4 medium-4 small-4 columns">
+            <div class="callout panel">
+              <p>Four columns</p>
+            </div>
+          </div>
+          <div class="large-4 medium-4 small-4 columns">
+            <div class="callout panel">
+              <p>Four columns</p>
+            </div>
+          </div>
+          <div class="large-4 medium-4 small-4 columns">
+            <div class="callout panel">
+              <p>Four columns</p>
+            </div>
+          </div>
+        </div>
+        
+        <hr />
+                
+        <h5>We bet you&rsquo;ll need a form somewhere:</h5>
+        <form>
+          <div class="row">
+            <div class="large-12 columns">
+              <label>Input Label</label>
+              <input type="text" placeholder="large-12.columns" />
+            </div>
+          </div>
+          <div class="row">
+            <div class="large-4 medium-4 columns">
+              <label>Input Label</label>
+              <input type="text" placeholder="large-4.columns" />
+            </div>
+            <div class="large-4 medium-4 columns">
+              <label>Input Label</label>
+              <input type="text" placeholder="large-4.columns" />
+            </div>
+            <div class="large-4 medium-4 columns">
+              <div class="row collapse">
+                <label>Input Label</label>
+                <div class="small-9 columns">
+                  <input type="text" placeholder="small-9.columns" />
+                </div>
+                <div class="small-3 columns">
+                  <span class="postfix">.com</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="large-12 columns">
+              <label>Select Box</label>
+              <select>
+                <option value="husker">Husker</option>
+                <option value="starbuck">Starbuck</option>
+                <option value="hotdog">Hot Dog</option>
+                <option value="apollo">Apollo</option>
+              </select>
+            </div>
+          </div>
+          <div class="row">
+            <div class="large-6 medium-6 columns">
+              <label>Choose Your Favorite</label>
+              <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
+              <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
+            </div>
+            <div class="large-6 medium-6 columns">
+              <label>Check these out</label>
+              <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
+              <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
+            </div>
+          </div>
+          <div class="row">
+            <div class="large-12 columns">
+              <label>Textarea Label</label>
+              <textarea placeholder="small-12.columns"></textarea>
+            </div>
+          </div>
+        </form>
+      </div>     
+
+      <div class="large-4 medium-4 columns">
+        <h5>Try one of these buttons:</h5>
+        <p><a href="#" class="small button">Simple Button</a><br/>
+        <a href="#" class="small radius button">Radius Button</a><br/>
+        <a href="#" class="small round button">Round Button</a><br/>            
+        <a href="#" class="medium success button">Success Btn</a><br/>
+        <a href="#" class="medium alert button">Alert Btn</a><br/>
+        <a href="#" class="medium secondary button">Secondary Btn</a></p>           
+        <div class="panel">
+          <h5>So many components, girl!</h5>
+          <p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
+          <a href="http://foundation.zurb.com/docs/" class="small button">Go to Foundation Docs</a>          
+        </div>
+      </div>
+    </div>
+
+    <script src="bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="bower_components/foundation/js/foundation.min.js"></script>
+    <script src="js/app.js"></script>
+  </body>
+</html>

data/assets/js/app.js

@@ -0,0 +1,200 @@
+// Foundation JavaScript
+// Documentation can be found at: http://foundation.zurb.com/docs
+$(document).foundation();
+
+var io = new RocketIO().connect();
+
+function filelist_expand_dir(entryElem, container) {
+    $.getJSON("/api/lsdir/" + entryElem.dataset.path,
+	      function(jsonData, status, jqxhr) {
+		  container.empty()
+		  for (var i = 0; i < jsonData.length; i++) {
+		      var entry = jsonData[i];
+		      var elem = $('<li>', {class: "js-filelist-" + entry.type});
+		      var child_ul = $('<ul>');
+		      var anch = $('<a>', {id: entry.id,
+					   "data-path": entry.path,
+					   "data-type": entry.type,
+					   "data-name": entry.name,
+					   text: entry.name,
+					   class: "js-filelist-" + entry.type,
+					   click: function(e){
+					       if (e.target.dataset.type == "dir") {
+						   filelist_expand_dir(e.target, $(e.target.nextSibling));
+					       } else {
+						   // filelist_open_file(e.target.dataset.path);
+						   wm.create(e.target.dataset.path);
+					       }
+					   }});
+		      var save_link = $('<a>', {href: "/save/" + entry.path})
+		      save_link.append($('<img>', {src: "/assets/img/disk.png"}));
+
+		      elem.append(anch);
+		      if (entry.type != "dir") {
+			  elem.append("&nbsp;");
+			  elem.append(save_link);
+		      }
+		      elem.append(child_ul);
+		      container.append(elem);
+		  }
+	      });
+}
+
+function filelist_open_file(path) {
+    window.open('/file' + path, '_blank');
+}
+
+
+function WindowManager() {
+    this.windows = [];
+}
+WindowManager.prototype.add = function(win) {
+    this.windows.push(win);
+    win.manager = this;
+};
+WindowManager.prototype.del = function(win) {
+    for (var i = 0; i < this.windows.length; i++) {
+	if (this.windows[i] == win) {
+	    this.windows.splice(i--, 1);
+	}
+    }
+};
+WindowManager.prototype.set_zindex = function() {
+    for (var i = 0; i < this.windows.length; i++) {
+	this.windows[i].div_window.css('z-index', i);
+    }
+};
+WindowManager.prototype.create = function(path) {
+    var new_win = new PreviewWindow(path);
+    this.add(new_win);
+};
+WindowManager.prototype.reload_by_path = function(path) {
+    for (var i = 0; i < this.windows.length; i++) {
+	if (this.windows[i].path == path) {
+	    this.windows[i].reload();
+	}
+    }
+}
+
+var wm = new WindowManager();
+
+function PreviewWindow(path) {
+    var pw = this;
+
+    this.path = path;
+    this.width = 600;
+    this.height = 400;
+
+    // create dom elements
+    this.div_window = $('<div>', {class: 'js-pw-window',
+				  click: function(e) {
+				      pw.focus();
+				  }});
+    this.div_title = $('<div>', {class: 'js-pw-title',
+				 click: function(e) {
+				     pw.focus();
+				 }});
+    this.h3_title = $('<h3>', {class: 'js-pw-title',
+			       text: this.path});
+    this.a_close = $('<a>', {class: 'js-pw-close',
+			     click: function(e) {
+				 pw.close();
+			     }}).append($('<img src="/assets/img/cross.png" />'));
+    this.div_content = $('<div>', {class: 'js-pw-content'});
+
+    this.content_elem = this.generate_content_elem();
+
+    this.div_window.css('left', 100 + window.scrollX + 'px');
+    this.div_window.css('top', 100 + window.scrollY + 'px');
+    this.div_window.css('width', this.width + 'px');
+    this.div_window.css('height', this.height + 'px');
+
+    // putting things together
+    this.div_title.append(this.h3_title).append(this.a_close).appendTo(this.div_window);
+    this.div_content.append(this.content_elem).appendTo(this.div_window);
+    this.div_window.appendTo($('body'));
+
+    this.resize();
+
+    this.div_window.draggable();
+    this.div_window.resizable({
+	resize: function(e, ui) {
+	    pw.resize();
+	}
+    });
+
+    this.manager = null;
+
+    // send event to server
+    io.push("open_file", this.path);
+
+    return this;
+}
+PreviewWindow.prototype.close = function() {
+    this.div_window.remove();
+    if (this.manager != null) {
+	this.manager.del(this);
+    }
+    io.push("close_file", this.path);
+};
+PreviewWindow.prototype.focus = function() {
+    var my_idx;
+
+    console.log("focus");
+
+    if (this.manager == null) {
+	return;
+    }
+
+    this.manager.del(this);
+    this.manager.add(this);
+    this.manager.set_zindex();
+};
+PreviewWindow.prototype.resize = function() {
+    this.width = this.div_window.width();
+    this.height = this.div_window.height();
+    this.div_content.height(this.div_window.height() - this.div_title.height());
+};
+PreviewWindow.prototype.reload = function() {
+    console.log("reload " + this.path);
+    this.content_elem.attr("src", "/preview/" + this.path + "?" + (new Date()).getTime());
+};
+PreviewWindow.prototype.generate_content_elem = function() {
+    var timehash = (new Date()).getTime().toString();
+    var src_url = "/preview/" + this.path + "?" + timehash;
+
+    if (this.path.match(/\.(jpe?g|png|eps|svg)/i)) { // images as img
+	// create off screen image first
+	var img = new Image();
+	img.onload = function() {
+	    // TODO: window resizing
+	    // alert(this.width + "x" + this.height);
+	}
+	img.src = src_url;
+
+	this.content_elem = $('<img>', {class: 'js-pw-content', src: src_url});
+    } else { // other files as text in iframe
+	this.content_elem = $('<iframe>', {class: 'js-pw-content', src: src_url});
+    }
+
+    return this.content_elem;
+};
+
+(function(){
+    var filelist = $("#js-filelist");
+
+    filelist_expand_dir(filelist[0], filelist);
+
+    io.on("file_modified", function(path){
+	console.log("file_modified : " + path);
+	wm.reload_by_path(path);
+    });
+    io.on("file_moved", function(path){
+	console.log("file_moved : " + path);
+	wm.reload_by_path(path);
+    });
+    io.on("file_deleted", function(path){
+	console.log("file_deleted : " + path);
+	wm.reload_by_path(path);
+    });
+})();