init

10 years ago · 016c15707d
10 changed files with 290 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+vendor
+*.zip
+.DS_Store
--- a/README.md
+++ b/README.md
@ -0,0 +1,5 @@
+Movies
+
+This is a frontend for testing Movie API serving for #ShowtimesTH. Hopefully one day, this will turn out to be read/write wiki-style. At the beginning, it will depend on crawler.
+
+Data crawled from TheMovieDB API and/or SF web page.
--- a/css/bootstrap-theme.min.css
+++ b/css/bootstrap-theme.min.css
--- a/css/bootstrap.min.css
+++ b/css/bootstrap.min.css
--- a/index.html
+++ b/index.html
@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Movies by #ShowtimesTH</title>
+  <meta name="description" content="Now Showing Movie Information, Thailand">
+  <meta name="keywords" content="Now showing, Movies, Theater, Thailand">
+  <meta name="google-play-app" content="app-id=co.zzyzx.showtimes.android">
+  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
+  <link rel="stylesheet" href="css/bootstrap.min.css">
+
+  <style>
+    .muted {
+      color:#989898;
+    }
+    li.thumbnail {
+      margin-left: 10px;
+      margin-bottom: 10px;
+      min-width: 250px;
+      max-width: 330px;
+      min-height: 150px;
+    }
+    li.thumbnail > img {
+      margin: 0 10px 5px 10px;
+    }
+  </style>
+</head>
+<body>
+
+<script type="text/x-handlebars">
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-12 col-sm-6 col-md-6 col-md-offset-3"><h1 class="text-center">Movies <small><a href="//showtimes.everyday.in.th">#ShowtimesTH</a></small></h1></div>
+  </div>
+  <div class="row-fluid">
+    {{outlet}}
+  </div>
+
+{{outlet modal}}
+<footer>
+<hr/>
+<div class="row">
+<div class="col-xs-12 col-sm-6 col-md-6 col-md-offset-3 text-center">
+<small class="muted">Data gathered from TheMovieDB.org and/or SF and/or Major web page</small>
+</div>
+</div>
+</footer>
+</div>
+</script>
+
+<script type="text/x-handlebars" data-template-name="movies">
+<ul id="container">
+{{#each model}}
+<li class="thumbnail">
+  {{#if backdrop_path}}
+  <img src="http://placehold.it/300x169" alt="" data-echo="http://image.tmdb.org/t/p/w300{{unbound backdrop_path}}" width="300" height="169" class="img-rounded" {{action 'openInfoModal' this}}>
+  {{else}}
+    {{#if poster_path}}
+      <img src="http://placehold.it/92x138" alt=""width="92" height="138" align="left" class="img-rounded" {{action 'openInfoModal' this}} data-echo="http://image.tmdb.org/t/p/w92{{unbound poster_path}}">
+    {{else}}
+      <img src="http://placehold.it/92x138" alt=""width="92" height="138" align="left" class="img-rounded" {{action 'openInfoModal' this}}>
+    {{/if}}
+  {{/if}}
+  <div class="caption">
+    <h4 {{action 'openInfoModal' this}}>{{title}}</h4>
+    {{#if tagline}}<blockquote class="blockquote-reverse"><footer>{{tagline}}</footer></blockquote>{{/if}}
+    {{#if vote_average}}<p class="small">TMDb rating: {{vote_average}} ({{vote_count}} votes)</p>{{/if}}
+    <p>{{#if imdb_id}}<a href="http://www.imdb.com/title/{{unbound imdb_id}}/" class="btn btn-default btn-xs" role="button">IMDb</a> {{/if}}<a href="http://www.themoviedb.org/movie/{{unbound movie_id}}/" class="btn btn-default btn-xs">TMDb</a></p>
+  </div>
+</li>
+{{/each}} 
+</ul>
+</script>
+
+<script type="text/x-handlebars" data-template-name="movie">
+{{#base-modal close='closeModal'}}
+
+<div class="modal-header">
+  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+  <h4 class="modal-title">{{original_title}}</h4>
+</div>
+<div class="modal-body">
+  <ul>
+    {{#if release_date}}<li><strong>Release Date</strong>: {{format-date release_date}}</li>{{/if}}
+    {{#if budget}}<li><strong>Budget</strong>: {{budget}}</li>{{/if}}
+    {{#if runtime}}<li><strong>Runtime</strong>: {{runtime}}</li>{{/if}}
+  </ul>
+  {{#if overview}}<p>{{overview}}</p>{{/if}}
+  <small class="muted">{{_id}}</small>
+</div>
+
+{{/base-modal}}
+</script>
+
+<script type="text/x-handlebars" data-template-name="components/base-modal">
+  <div class="modal fade">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        {{yield}}
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</script>
+
+<script src="js/jquery-2.1.1.min.js"></script>
+<script src="js/isotope.pkgd.min.js"></script>
+<script src="js/echo.min.js"></script>
+<script src="js/bootstrap.min.js"></script>
+<script src="//showtimes.everyday.in.th/bower_components/moment/moment.js"></script>
+<script src="//showtimes.everyday.in.th/js/libs/handlebars-1.1.2.js"></script>
+<script src="//showtimes.everyday.in.th/js/libs/ember-1.7.0.min.js"></script>
+<script src="/js/app.js"></script>
+<script>
+echo.init({
+    offset: 100,
+    throttle: 250,
+    unload: false,
+    callback: function (element, op) {
+      $('#container').isotope();
+    }
+  });
+
+</script>
+
+</body>
+</html>
--- a/js/app.js
+++ b/js/app.js
@ -0,0 +1,108 @@
+App = Ember.Application.create();
+
+App.ApplicationRoute = Ember.Route.extend({
+    setupController: function(controller) {
+        controller.set('title', "Hello World");
+    },
+    actions: {
+        openInfoModal: function(content) {
+            this.controllerFor('movie').set('content', content);
+            return this.render('movie', {
+                into: 'application',
+                outlet: 'modal'
+            });
+        },
+        closeModal: function() {
+            return this.disconnectOutlet({
+                outlet: 'modal',
+                parentView: 'application'
+            });
+    }
+  }
+});
+
+// var restUrl = 'http://showtimes.everyday.in.th/api';
+var restUrl = 'http://localhost:8888';
+var today = new Date();
+
+
+App.ApplicationController = Ember.Controller.extend({
+    appName: '#Movies'
+});
+
+
+App.Router.map(function() {
+    this.resource('movies');
+});
+
+// redirect '/' to 'groups' by default
+App.IndexRoute = Ember.Route.extend({
+  beforeModel: function() {
+    this.transitionTo('movies');
+  }
+});
+
+/*App.MovieRoute = Ember.Route.extend({
+  model: function(params) {
+    return $.getJSON(restUrl+'/movie/'+params+'/').then(function(data) {
+        return data.objects.map(function(item) {
+            console.log("get movie: " + item);
+            return item;
+        });
+    });
+  }
+});*/
+
+App.MovieController = Ember.ObjectController.extend({
+  actions: {
+    close: function() {
+      return this.send('closeModal');
+    }
+  }
+});
+
+/*
+ * ModalComponent
+ */
+App.BaseModalComponent = Ember.Component.extend({
+  actions: {
+    ok: function() {
+      this.$('.modal').modal('hide');
+      this.sendAction('ok');
+    }
+  },
+  show: function(params) {
+    this.$('.modal').modal().on('hidden.bs.modal', function() {
+      this.sendAction('close');
+    }.bind(this));
+  }.on('didInsertElement')
+});
+
+App.MoviesRoute = Ember.Route.extend({
+    model: function(params) {
+        return $.getJSON(restUrl+'/movies/').then(function(data) {
+            return data.objects.map(function(movies) {
+                return movies;
+            });
+        });
+    }
+});
+
+App.MoviesView = Ember.View.extend({
+    didInsertElement: function() {
+        Ember.run.next(this, function() {
+            this.$('#container').isotope({
+                layoutMode: 'masonry',
+                itemSelector: '.thumbnail',
+                transitionDuration: '0.7s',
+                isResizeBound: true
+            });
+        });
+    }
+});
+
+
+Ember.Handlebars.helper('format-date', function(date) {
+  return moment(date).format('ll');
+});
+
--- a/js/bootstrap.min.js
+++ b/js/bootstrap.min.js
--- a/js/echo.min.js
+++ b/js/echo.min.js
@ -0,0 +1,2 @@
+/*! echo.js v1.6.0 | (c) 2014 @toddmotto | https://github.com/toddmotto/echo */
+!function(t,e){"function"==typeof define&&define.amd?define(function(){return e(t)}):"object"==typeof exports?module.exports=e:t.echo=e(t)}(this,function(t){"use strict";var e,n,o,r,c,i={},l=function(){},a=function(t,e){var n=t.getBoundingClientRect();return n.right>=e.l&&n.bottom>=e.t&&n.left<=e.r&&n.top<=e.b},d=function(){(r||!n)&&(clearTimeout(n),n=setTimeout(function(){i.render(),n=null},o))};return i.init=function(n){n=n||{};var a=n.offset||0,u=n.offsetVertical||a,f=n.offsetHorizontal||a,s=function(t,e){return parseInt(t||e,10)};e={t:s(n.offsetTop,u),b:s(n.offsetBottom,u),l:s(n.offsetLeft,f),r:s(n.offsetRight,f)},o=s(n.throttle,250),r=n.debounce!==!1,c=!!n.unload,l=n.callback||l,i.render(),document.addEventListener?(t.addEventListener("scroll",d,!1),t.addEventListener("load",d,!1)):(t.attachEvent("onscroll",d),t.attachEvent("onload",d))},i.render=function(){for(var n,o,r=document.querySelectorAll("img[data-echo]"),d=r.length,u={l:0-e.l,t:0-e.t,b:(t.innerHeight||document.documentElement.clientHeight)+e.b,r:(t.innerWidth||document.documentElement.clientWidth)+e.r},f=0;d>f;f++)o=r[f],a(o,u)?(c&&o.setAttribute("data-echo-placeholder",o.src),o.src=o.getAttribute("data-echo"),c||o.removeAttribute("data-echo"),l(o,"load")):c&&(n=o.getAttribute("data-echo-placeholder"))&&(o.src=n,o.removeAttribute("data-echo-placeholder"),l(o,"unload"));d||i.detach()},i.detach=function(){document.removeEventListener?t.removeEventListener("scroll",d):t.detachEvent("onscroll",d),clearTimeout(n)},i});
--- a/js/isotope.pkgd.min.js
+++ b/js/isotope.pkgd.min.js
--- a/js/jquery-2.1.1.min.js
+++ b/js/jquery-2.1.1.min.js