Merge pull request #3 from sdellis/tabula-rasa

adds tabula-rasa (npm module) base extendable library

README.md

@@ -2,6 +2,8 @@
 =============================================================================
 [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
 
+_"Show, don't tell."_
+
 Tabula is a "starter kit" for native web applications (aka, "single-page apps") that make use of the IIIF Presentation API.
 
 ## About tabula

package.json

@@ -9,7 +9,9 @@
     "build": "NODE_ENV=production webpack",
     "deploy": "surge -p public -d tabula.surge.sh",
     "yolo": "npm run build && npm run deploy",
-    "test": "standard"
+    "test": "babel-node node_modules/argg src/models/presentation/test/index.spec.js",
+    "quiz": "webpack src/models/presentation/test/index.spec.js public/tabula.tests.js | ./node_modules/tape/bin/tape-run/run.js",
+    "lint": "standard"
   },
   "repository": {
     "type": "git",
@@ -54,7 +56,6 @@
     "style-loader": "^0.12.1",
     "stylus-loader": "^1.1.0",
     "surge": "^0.11.1",
-    "tape": "^4.2.2",
     "url-loader": "^0.5.5",
     "webpack": "^1.8.11",
     "webpack-dev-server": "^1.8.2",
@@ -65,5 +66,18 @@
     "ignore": [
       "public/*"
     ]
+  },
+  "devDependencies": {
+    "argg": "0.0.2",
+    "istanbul-instrumenter-loader": "^0.1.3",
+    "karma": "^0.13.15",
+    "karma-chrome-launcher": "^0.2.2",
+    "karma-coverage": "^0.5.3",
+    "karma-phantomjs-launcher": "^0.2.1",
+    "karma-tap": "^1.0.3",
+    "karma-webpack": "^1.7.0",
+    "phantomjs": "git://github.com/just-boris/phantomjs",
+    "tape": "^4.2.2",
+    "tape-run": "^2.1.0"
   }
 }

src/config.js

@@ -2,7 +2,8 @@ const config = {
   'ltopmacellis.local': {
     clientId: '900ada97278b5f64a533',
     gatekeeperUrl: 'https://tabula-localhost.herokuapp.com/authenticate',
-    manifestStore: 'http://localhost:4000/collections/manifests'
+    manifestStore: 'http://iiif.io/api/presentation/2.0/example/fixtures'
+    // manifestStore: 'http://localhost:4000/collections/manifests'
   },
 
   'tabula.surge.sh': {

src/models/me.js

@@ -1,6 +1,6 @@
 import Model from 'ampersand-model'
 import RepoCollection from './annotation/repo-collection'
-import ManifestCollection from './presentation/manifest-collection'
+import Collection from './presentation/collection'
 import githubMixin from '../helpers/github-mixin'
 
 export default Model.extend(githubMixin, {
@@ -11,6 +11,9 @@ export default Model.extend(githubMixin, {
     this.on('change:token', this.onChangeToken)
   },
 
+  /* to-do: use a Gist to persist user data such as preferred language and
+  || possible endpoints to select content from
+  *****/
   props: {
     id: 'number',
     login: 'string',
@@ -22,8 +25,11 @@ export default Model.extend(githubMixin, {
   },
 
   collections: {
-    repos: RepoCollection,
-    presentations: ManifestCollection
+    repos: RepoCollection
+  },
+
+  children: {
+    presentations: Collection
   },
 
   onChangeToken () {

src/models/presentation/collection.js

@@ -1,52 +1,24 @@
-import Model from 'ampersand-model'
-import ManifestCollection from './manifest-collection'
-import IIIFCollection from './collection-collection'
-import ServiceCollection from './service-collection'
-import config from '../config'
+import {Collections} from 'tabula-rasa'
+import ManifestList from './manifest-collection'
+import uuid from 'node-uuid'
+import config from '../../config'
 
-export default Model.extend({
-
-  initialize () {
-    this.getManifest // load the manifesto object into this.manifest
-  },
-
-  idAttribute: '_id',
-
-  url () {
-    return config.manifestStore + '/' + this._id
-  },
+export default Collections.Collection.extend({
 
   props: {
-    _id: 'string',
-    '@id': 'string',
-    '@type': {
+    '_id': {
       type: 'string',
       required: 'true',
-      default: 'sc:Collection',
-      test: function (value) {
-        if (value !== 'sc:Collection') {
-          return "Value must equal 'sc:Collection'."
-        }
-        return false
-      }
-    },
-    label: 'string',
-    logo: 'string',
-    license: 'string',
-    viewingHint: 'string',
-    related: 'string',
-    seeAlso: 'string',
-    within: 'string',
-    thumbnail: 'string',
-    description: 'string',
-    attribution: 'string',
-    metadata: 'array'
+      default: uuid()
+    }
+  },
+
+  url () {
+    return config.manifestStore + '/collection.json'
   },
 
   collections: {
-    manifests: ManifestCollection,
-    collections: IIIFCollection,
-    services: ServiceCollection
+    manifests: ManifestList,
   },
 
   derived: {

src/models/presentation/manifest-collection.js

@@ -1,10 +1,8 @@
-import Collection from 'ampersand-rest-collection'
 import Manifest from './manifest'
+import {ManifestList} from 'tabula-rasa'
 import config from '../../config'
 
-export default Collection.extend({
-  url: config.manifestStore,
-
+export default ManifestList.extend({
   model: Manifest,
 
   getById (id) {
@@ -18,4 +16,5 @@ export default Collection.extend({
 
     return model
   }
+
 })

src/models/presentation/manifest.js

@@ -1,86 +1,50 @@
-import Model from 'ampersand-model'
+import {Manifest} from 'tabula-rasa'
 import manifesto from '../../../node_modules/manifesto.js/dist/server/manifesto.js'
-import SequenceCollection from './sequence-collection'
 import config from '../../config'
 
-export default Model.extend({
+export default Manifest.extend({
 
   initialize () {
     this.getManifest // load the manifesto object into this.manifest
   },
 
-  idAttribute: '_id',
-
   url () {
-    return config.manifestStore + '/' + this._id
-  },
-
-  props: {
-    _id: 'string',
-    '@id': 'string',
-    '@context': 'string',
-    '@type': {
-      type: 'string',
-      required: 'true',
-      default: 'sc:Manifest',
-      test: function (value) {
-        if (value !== 'sc:Manifest') {
-          return "Value must equal 'sc:Manifest'."
-        }
-        return false
-      }
-    },
-    label: 'string',
-    thumbnail: 'string',
-    viewingHint: 'string',
-    metadata: 'array'
-  },
-
-  collections: {
-    sequences: SequenceCollection
+    return config.manifestStore + '/' + this._id + '/manifest.json'
   },
 
   derived: {
-    app_url: {
+    foo: {
       deps: ['_id'],
       fn () {
-        return 'presentations/' + this._id
+        return 'foo/' + this._id
       }
     },
-    subjects: {
-      deps: ['metadata'],
+    app_url: {
+      deps: ['_id'],
       fn () {
-        var s = ''
-
-        if (this.metadata) {
-          this.metadata.forEach(function (md) {
-            if (md.label === 'Subjects') {
-              s = md.value.join(', ')
-            }
-          })
-        }
-
-        return s
+        return 'presentations/' + this._id
       }
     },
     /* ***
     // The getManifest() method is for demo purposes, showing how one can use
     // the Manifesto library within this app by attaching a Manifesto object,
     // with all its methods to this model.
-    // i.e. this.manifest.getLabel()
+    // i.e. this.manifestation.getLabel()
     *** */
     getManifest: {
-      deps: ['_id'],
+      deps: ['@id'],
       fn () {
         var _this = this
-        manifesto.loadManifest(config.manifestStore + '/' + this._id).then(function (manifest) {
-          _this.manifest = manifesto.create(manifest)
-          return _this.manifest
+
+        manifesto.loadManifest(this['@id']).then(function (manifest) {
+          _this.manifestation = manifesto.create(manifest)
+          return _this.manifestation
         },
         function (error) {
           console.error('Failed!', error)
         })
-        this.manifest = _this.manifest
+
+        this.manifestation = _this.manifestation
       }
     }
   }

src/pages/presentation-detail.js

@@ -24,10 +24,10 @@ export default React.createClass({
 
     return (
       <div className='container'>
-         <h1>{presentation.manifest.getLabel()} Slides</h1>
+         <h1>{presentation.manifestation.getLabel()} Slides</h1>
          <p><strong>Subjects:</strong> {presentation.subjects}</p>
          <ul>
-         {presentation.manifest.getSequences().map((sequence) => {
+         {presentation.manifestation.getSequences().map((sequence) => {
            let label = 'Untitled Slide Group'
            if (!sequence.getLabel() === 'undefined') { label = sequence.getLabel() }
            return (
@@ -39,7 +39,7 @@ export default React.createClass({
           <button onClick={this.onAddClick} className='button'>Add a Slide</button>
          </p>
          <ul className='sequence'>
-         {presentation.manifest.getSequences()[0].getThumbs(200).map((thumb) => {
+         {presentation.manifestation.getSequences()[0].getThumbs(200).map((thumb) => {
            return (
             <li className='slide'><img src={thumb.uri}/></li>
            )

src/router.js

@@ -42,11 +42,11 @@ export default Router.extend({
   },
 
   presentations () {
-    this.renderPage(<PresentationsPage presentations={app.me.presentations}/>)
+    this.renderPage(<PresentationsPage presentations={app.me.presentations.manifests}/>)
   },
 
   presentationDetail (id) {
-    const presentation = app.me.presentations.getById(id)
+    const presentation = app.me.presentations.manifests.getById(id)
     this.renderPage(<PresentationDetailPage presentation={presentation}/>)
   },