RubyGems - videos - Versions diffs - 0.0.1 - Mend

@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Videos</title>
+    <link href="css/lib/bootstrap.css" rel="stylesheet" type="text/css">
+    <link href="css/app.css" rel="stylesheet" type="text/css">
+    <link href="css/views.index.css" rel="stylesheet" type="text/css">
+    <link href="css/views.show.css" rel="stylesheet" type="text/css">
+    <script src="js/lib/jquery-2.0.3.js" type="text/javascript"></script>
+    <script src="js/lib/bootstrap.js" type="text/javascript"></script>
+    <script src="js/lib/underscore.js" type="text/javascript"></script>
+    <script src="js/framework.js" type="text/javascript"></script>
+    <script src="js/controllers.index.js" type="text/javascript"></script>
+    <!--    <script src="js/controllers.show.js" type="text/javascript"></script>-->
+    <script src="js/app.js" type="text/javascript"></script>
+    <meta name="HandheldFriendly" content="true">
+    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
+  </head>
+  <body>
+    <div id="view-index">
+      <div id="header">
+        <form class="form-inline">
+          <input type="text" id="search" class="form-control">
+          <span class="btn-group sort">
+            <button class="btn btn-default" data-sort="publishedOn" type="button">Published On</button>
+            <button class="btn btn-default" data-sort="pages" type="button">Pages</button>
+            <button class="btn btn-default" data-sort="title" type="button">Title</button>
+          </span>
+          <span class="btn-group sort-direction">
+            <button class="btn btn-default" data-sort-direction="asc" type="button">
+              <span class="glyphicon glyphicon-sort-by-attributes"></span>
+            </button>
+            <button class="btn btn-default" data-sort-direction="desc" type="button">
+              <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
+            </button>
+          </span>
+          <button type="button" class="btn btn-default" id="clear-search">
+            <span class="glyphicon glyphicon-remove"></span> Clear
+          </button>
+        </form>
+      </div>
+      <div id="wrapper">
+        <ul id="items">
+        </ul>
+        <div class="clear"></div>
+      </div>
+    </div>
+    <div id="view-show">
+      <img src="img/blank.png" id="image">
+    </div>
+    <div id="page-back" class="paginator">◀</div>
+    <div id="page-next" class="paginator">▶</div>
+    <div id="page-back-10" class="paginator">◀◀</div>
+    <div id="page-next-10" class="paginator">▶▶</div>
+    <div id="page-home" class="paginator">❌</div>
+  </body>
+</html>

data/app/js/app.js ADDED

@@ -0,0 +1,53 @@
+var store = null;
+$(function() {
+  $(document).on("dragstart", "a, img", false);
+  $("#page-back").click(function(e) {
+    e.stopPropagation();
+    utils.page(utils.page() - 1);
+  });
+  $("#page-back-10").click(function(e) {
+    e.stopPropagation();
+    utils.page(utils.page() - 10);
+  });
+  $("#page-next").click(function(e) {
+    e.stopPropagation();
+    utils.page(utils.page() + 1);
+  });
+  $("#page-next-10").click(function(e) {
+    e.stopPropagation();
+    utils.page(utils.page() + 10);
+  });
+  $("#page-home").click(function(e) {
+    e.stopPropagation();
+    if(lastControllerLocation != "") {
+      location.hash = lastControllerLocation;
+    }
+    else {
+      window.close();
+    }
+  });
+  $(window).keydown(function(event) {
+    if(event.keyCode == 39 || ((event.keyCode == 32 || event.keyCode == 13)
+      && utils.scrollDistanceFromBottom() <= 0)) {
+      event.preventDefault();
+      utils.page(utils.page() + 1);
+    }
+    else if(event.keyCode == 8 || event.keyCode == 37) {
+      event.preventDefault();
+      utils.page(utils.page() - 1);
+    }
+  });
+  $.getJSON("data.json").done(function(data) {
+    if(data.length == 0) alert("No data.json, or data invalid.");
+    store = data;
+    window.router = new router();
+    router.init();
+    if(location.hash == "#" || location.hash == "") location.hash = "#index!1";
+  });
+});

data/app/js/controllers.index.js ADDED

@@ -0,0 +1,124 @@
+var lastControllerLocation = "";
+controllers.index = function(search, sort, sortDirection) {
+  var _this = this;
+  function sortFor(type) {
+    if(type == "publishedOn") return function(video) {
+      return video.publishedOn;
+    };
+/*    if(type == "pages") return function(video) {
+      return video.pageUrls.length;
+    };*/
+    if(type == "title") return function(video) {
+      return video.title.toLowerCase();
+    };
+  }
+  var videos = store;
+  if(search && search != "") {
+    var words = search.split(/\s+/);
+    _.each(words, function(word) {
+      regex = RegExp(word, "i");
+      videos = _.filter(videos, function(video) {
+        return video.title.match(regex);
+      });
+    });
+  }
+  if(!sort) sort = "publishedOn";
+  videos = _.sortBy(videos, sortFor(sort));
+  if(!sortDirection) sortDirection = "desc";
+  if(sortDirection == "desc") videos = videos.reverse();
+  function perPageFromWindow() {
+    var windowWidth = $(window).width();
+    if(windowWidth < 1000) return 16;
+    else if(windowWidth > 1000 && windowWidth < 1500) return 21;
+    else if(windowWidth > 1500) return 25;
+  }
+  var perPage = perPageFromWindow();
+  var pages = utils.pages(videos, perPage);
+  this.init = function() {
+    console.log("starting index");
+    $("#search").bind("keydown", function(event) {
+      event.stopPropagation();
+      if(event.keyCode == 13) {
+        event.preventDefault();
+        utils.location({ params: [$("#search").val(), sort, sortDirection], hash: "1" });
+      }
+    });
+    $("#clear-search").bind("click", function() {
+      $("#search").val("");
+      event.preventDefault();
+      location.href = "#index!1";
+    });
+    $(".sort button").bind("click", function(event) {
+      event.preventDefault();
+      utils.location({ params: [search, $(this).data("sort"), sortDirection], hash: "1" });
+    });
+    $(".sort button").removeClass("active");
+    $(".sort button[data-sort=" + sort + "]").addClass("active");
+    $(".sort-direction button").bind("click", function(event) {
+      event.preventDefault();
+      utils.location({ params: [search, sort, $(this).data("sort-direction")], hash: "1" });
+    });
+    $(".sort-direction button").removeClass("active");
+    $(".sort-direction button[data-sort-direction=" + sortDirection + "]").addClass("active");
+    $("#view-index").show().addClass("current-view");
+    $("title").text("Videos");
+  }
+  function absoluteURL(url) {
+	  var a = document.createElement("a");
+	  a.href = url;
+	  return a.href;
+  }
+  function addVideos(videos) {
+    $("#items").empty();
+    _.each(videos, function(video) {
+      var item = $("<li>");
+      var link = $("<a>");
+      link.attr("href", "play://" + absoluteURL(video.url));
+      //link.attr("target", "_blank");
+      var img = $("<img>");
+      img.attr("src", video.thumbnailUrl);
+      link.append(img);
+      item.append(link);
+      item.append('<div class="info-wrapper"><div class="info"><div class="title">' + video.title + '</div></div>');
+      $("#items").append(item);
+    });
+  }
+  this.render = function() {
+    console.log("rendering");
+    window.scrollTo(0, 0);
+    var videosPage = utils.paginate(videos, perPage);
+    addVideos(videosPage);
+    lastControllerLocation = location.hash;
+  }
+  this.destroy = function() {
+    console.log("destroying index");
+    $("#search").unbind("keydown");
+    $("#clear-search").unbind("click");
+    $(".sort button").unbind("click");
+    $(".sort-direction button").unbind("click");
+    $("#items").empty();
+    $("#view-index").hide().removeClass("current-view");
+  }
+}

data/app/js/controllers.show.js ADDED

@@ -0,0 +1,48 @@
+controllers.show = function(key) {
+  var _this = this;
+  var book = _.find(store, function(book) {
+    return book.key == key;
+  });
+  function pageUrl(index) {
+    return book.url + "/" + book.pageUrls[index - 1];
+  }
+  function preloadImage(index) {
+    var image = new Image();
+    image.src = pageUrl(index);
+  }
+  function preloadImages() {
+    _(book.pageUrls.length).times(function(i) {
+      preloadImage(i + 1);
+    });
+  }
+  this.init = function() {
+    console.log("starting show");
+    $("#image").attr("src", "img/blank.png");
+    $("#view-show").show().addClass("current-view");
+    $("title").text(book.title + " - Mangos");
+    //setTimeout(preloadImages, 5000);
+  }
+  this.render = function() {
+    window.scrollTo(0, 0);
+    var index = utils.page();
+    $("#image").attr('src', pageUrl(index));
+    if((index + 1) <= book.pageUrls.length) {
+      preloadImage(index + 1);
+    }
+  }
+  this.destroy = function() {
+    console.log("destroying show");
+    $("#view-show").hide().removeClass("current-view");
+  }
+}

data/app/js/framework.js ADDED

@@ -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 = {};