storys 0.0.1

data/app/js/controllers.index.js

@@ -0,0 +1,90 @@
+controllers.index = function(search, sort, sortDirection) {
+  var _this = this;
+
+  function sortFor(type) {
+    if(!type) type = "publishedOn";
+
+    if(type == "publishedOn") return function(story) {
+      return story.publishedOn;
+    };
+    if(type == "wordCount") return function(story) {
+      return story.wordCount;
+    };
+  }
+
+  var storys = store;
+  if(search && search != "") {
+    regex = RegExp(search, "i");
+    storys = _.filter(storys, function(story) {
+      return story.title.match(regex);
+    });
+  }
+  storys = _.sortBy(storys, sortFor(sort));
+
+  if(!sortDirection) sortDirection = "desc";
+  if(sortDirection == "desc") storys = storys.reverse();
+
+  storys = _.first(storys, 500);
+
+  function addStorys(storys) {
+    if($("#stories > li").length) return;
+
+    _.each(storys, function(story) {
+      var item = $("<li>");
+      var link = $("<a>");
+      link.attr("href", "#show/" + story.key + "!1");
+
+      link.append($("<span title='Story title'>").text(story.title));
+      var emblems = $("<div class='emblems'>");
+      emblems.append($("<span class='wc' title='Page count of story'>").text(Math.ceil(story.wordCount / 300)));
+      link.append(emblems);
+
+      item.append(link);
+
+      $("#stories").append(item);
+    });
+  }
+
+  this.init = function() {
+    console.log("starting index");
+
+    $("#search").bind("keydown", function(event) {
+      if(event.keyCode == 13) {
+        event.preventDefault();
+        utils.location({ params: [$("#search").val(), sort, sortDirection], hash: "1" });
+      }
+    });
+
+    $("#clear-search").bind("click", function() {
+      $("#search").val("");
+    });
+
+    $("a.sort").bind("click", function(event) {
+      event.preventDefault();
+      utils.location({ params: [search, $(this).data("sort"), sortDirection], hash: "1" });
+    });
+
+    $("a.sort-direction").bind("click", function(event) {
+      event.preventDefault();
+      utils.location({ params: [search, sort, $(this).data("sort-direction")], hash: "1" });
+    });
+
+    $("#view-index").show().addClass("current-view");
+    addStorys(storys);
+    $.twoup.layout();
+  }
+
+  this.render = function() {
+  }
+
+  this.destroy = function() {
+    console.log("destroying index");
+    $("#search").unbind("keydown");
+    $("#clear-search").unbind("click");
+    $("a.sort").unbind("click");
+    $("a.sort-direction").unbind("click");
+    $("#stories").empty();
+    $("#view-index").hammer().off("swiperight").off("swipeleft").off("drag");
+    $("#view-index").hide().removeClass("current-view");
+  }
+}

data/app/js/controllers.show.js

@@ -0,0 +1,34 @@
+controllers.show = function(key) {
+  var _this = this;
+
+  var story = _.find(store, function(story) {
+    return story.key == key;
+  });
+
+  function loadStory(url) {
+    var iframe = $("<iframe />");
+    $("body").append(iframe);
+    iframe.load(function() {
+      $("#story").html(iframe[0].contentDocument.body.innerHTML);
+      $.twoup.layout();
+      iframe.remove();
+    });
+    iframe.attr("src", url);
+  }
+
+  this.init = function() {
+    console.log("starting show");
+    $("#view-show").show().addClass("current-view");
+    loadStory(story.url);
+  }
+
+  this.render = function() {
+  }
+
+  this.destroy = function() {
+    console.log("destroying show");
+    $("#story").empty();
+    $("#view-show").hide().removeClass("current-view");
+  }
+}
+

data/app/js/framework.js

@@ -0,0 +1,90 @@
+var utils = {};
+
+utils.location = function(changes) {
+  if(arguments.length == 1) {
+    var output = _.extend(utils.location(), changes);
+    location.hash = "#" + [output.controller].concat(output.params).join("/") + "!" + output.hash;
+  }
+  else {
+    var route_hash = location.hash.substr(1).split("!");
+    var route = route_hash[0];
+    var controller = route.split("/")[0];
+    var params = route.split("/").slice(1);
+    var hash = route_hash.slice(1).join("!");
+    return {
+      route: route, //Don't set this
+      controller: controller,
+      params: params,
+      hash: hash
+    };
+  }
+}
+
+utils.page = function(index, max) {
+  if(arguments.length == 2) {
+    if(isNaN(index) || index < 1) index = 1;
+    if(index > max) index = max;
+    utils.location({ hash: index });
+  }
+  else if(arguments.length == 1) {
+    utils.location({ hash: index });
+  }
+  else {
+    var index = parseInt(utils.location().hash);
+    if(isNaN(index) || index < 1) index = 1;
+    return index;
+  }
+}
+
+utils.scrollDistanceFromBottom = function() {
+  return utils.pageHeight() - (window.pageYOffset + self.innerHeight);
+}
+
+utils.pageHeight = function() {
+  return $(".current-view").height();
+}
+
+utils.nearBottomOfPage = function() {
+  return utils.scrollDistanceFromBottom() < 250;
+}
+
+utils.pages = function(array, perPage) {
+  return Math.ceil(array.length / (perPage + 0.0));
+}
+
+utils.paginate = function(array, perPage) {
+  var page = utils.page();
+  return array.slice((page - 1) * perPage, page * perPage);
+}
+
+var router = function() {
+  var _this = this;
+
+  var currentController = null;
+  var currentRoute = null;
+
+  this.init = function() {
+    $(window).bind("hashchange", function() {
+      var route = utils.location().route;
+      if(route == "") return;
+
+      if(route != currentRoute) {
+        console.log("changing route from ", currentRoute, " to ", route);
+        currentRoute = route;
+
+        if(currentController) {
+          currentController.destroy();
+          delete currentController;
+        }
+
+        var controllerFunction = controllers[utils.location().controller];
+        currentController = new (controllerFunction.bind.apply(controllerFunction, [null].concat(utils.location().params)));
+        currentController.init();
+      }
+      
+      currentController.render();
+    }).trigger("hashchange");
+  }
+};
+
+var controllers = {};

data/app/js/jquery.twoup.js

@@ -0,0 +1,103 @@
+;(function($) {
+  var columns = 0;
+  var padding_width = 0;
+  var content_width = 0;
+  var scroll_width = 0;
+  var content, slider, padding;
+
+  //Cargo-culting from colorbox
+  var twoup = $.fn.twoup = $.twoup = function(column_rule) {
+    if(content) {
+      alert("You already have a twoup!");
+      return;
+    }
+
+    twoup.content = content = $("<div></div>").css({ "-webkit-column-rule": column_rule, "-moz-column-rule": column_rule, "column-rule": column_rule });
+    twoup.slider = slider = $("<div></div>");
+    twoup.padding = padding = $(this).css({ "overflow": "hidden" });
+
+    var children = padding.children().detach();
+    padding.append(slider);
+    slider.append(content);
+    content.append(children);
+
+    if(!twoup.enabled()) return;
+
+    $(window).resize(twoup.layout).resize();
+
+    $(window).bind('hashchange', function() {
+      slider.stop(true, true).animate({ "margin-left": -((twoup.page() - 1) * scroll_width) + "px" }, 500, "swing");
+    }).trigger('hashchange');
+
+    $(window).keydown(function(event) {
+      if(event.keyCode == 32 || event.keyCode == 39) {
+        event.preventDefault();
+        twoup.page(1, true);
+      }
+      else if(event.keyCode == 8 || event.keyCode == 37) {
+        event.preventDefault();
+        twoup.page(-1, true);
+      }
+    });
+
+    return this;
+  };
+
+  twoup.enabled = function() {
+    //at the moment, only WebKit and MSIE10 has proper support for css3 columns AND getting the right width for a column element with overflow
+    return $.browser.webkit || ($.browser.msie && $.browser.version >= 10);
+  }
+
+  twoup.columns = function() {
+    return Math.max(1, Math.floor($(window).width() / (18 * padding_width)));
+  };
+
+  twoup.column_width = function() {
+    return twoup.enabled() ? parseInt(content.css("-webkit-column-width") || content.css("-moz-column-width") || content.css("column-width")) : content.width()
+  };
+
+  twoup.pages = function() {
+    return Math.ceil(content_width / scroll_width);
+  };
+
+  twoup.bound_page_number = function(number) {
+    var index = parseInt(number); 
+    if(isNaN(index) || index < 1) index = 1;
+    if(index > twoup.pages()) index = twoup.pages();
+
+    return index;
+  };
+
+  twoup.page_spread = function() {
+    var pages = [];
+    for(var i = twoup.page(); i < twoup.pages(), pages.length < twoup.columns(); i++) pages.push(i);
+    return pages;
+  };
+
+  twoup.page = function() {
+    if(arguments.length == 2 && arguments[1]) twoup.page(twoup.page() + arguments[0]);
+    else if(arguments.length == 1) utils.page(twoup.bound_page_number(arguments[0]));
+    else return twoup.bound_page_number(utils.page());
+  };
+
+  twoup.layout = function() {
+    padding_width = parseInt(padding.css("padding-top"));
+
+    var old_columns = columns;
+    columns = twoup.columns();
+
+    var column_gap_width = (padding_width * 2) + parseInt(content.css("-webkit-column-rule-width") || content.css("column-rule-width"));
+    var inner_width = window.innerWidth - (padding_width * 2);
+    var inner_height = window.innerHeight - (padding_width * 2);
+    var column_width = Math.floor((inner_width - (column_gap_width * (columns - 1))) / columns);
+    scroll_width = inner_width + column_gap_width;
+
+    padding.css({ "width": inner_width + "px", "height": inner_height + "px", "overflow": "hidden" });
+    content.css({ "width": inner_width + "px", "height": inner_height + "px", "-webkit-column-width": column_width + "px",
+     "-moz-column-width": column_width + "px", "column-width": column_width + "px", "-webkit-column-gap": column_gap_width + "px",
+     "-moz-column-gap": column_gap_width + "px", "column-gap": column_gap_width + "px" });
+    content_width = content[0].scrollWidth;
+
+    if(columns != old_columns) $(window).trigger("onhashchange");
+  };
+})(jQuery);