add basic implementation of image api playground

package.json

@@ -9,9 +9,11 @@
   "license": "MIT",
   "dependencies": {
     "bootstrap": "4.0.0-alpha.6",
+    "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-addons-update": "^15.6.0",
-    "react-dom": "^15.6.1"
+    "react-dom": "^15.6.1",
+    "react-image": "^1.0.1"
   },
   "devDependencies": {
     "babel-core": "^6.25.0",

src/_data/navigation.yml

@@ -5,11 +5,12 @@
       name: What is IIIF?
     - slug: what-can-iiif-do
       name: What can IIIF do?
-    - slug: why-use-iiif
-      name: Why use IIIF?
 
 - slug: image-api
   name: Image API
+  pages:
+    - slug: playground
+      name: Playground
 
 - slug: presentation-api
   name: Presentation API

src/_image-api/playground.md

@@ -0,0 +1,12 @@
+---
+layout: page
+title: Image API Playground
+---
+
+{% raw %}
+
+    {scheme}://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format}
+
+{% endraw %}
+
+<div id='image-api-playground'> </div>

src/_overview/what-can-iiif-do.md

@@ -36,8 +36,8 @@ As of July 2017 the current IIIF Technical Specifications are:
  - [IIIF Authentication API](http://iiif.io/api/auth/1.0)
  - [IIIF Search API](http://iiif.io/api/search/1.0)
 
-The two most established IIIF APIs are the Image and Presentation APIs. This guide will discuss these in more depth. 
+The two most established IIIF APIs are the Image and Presentation APIs. This guide will discuss these in more depth. Let's get started with the Image API.
 
 <div class='d-flex justify-content-around'>
-  <a class="btn btn-secondary" href="{{'overview/why-use-iiif' | relative_url }}">Next &raquo;</a>
+  <a class="btn btn-secondary" href="{{'image-api' | relative_url }}">Next &raquo;</a>
 </div>

src/_sass/image_api_playground.scss

@@ -0,0 +1,4 @@
+.img-container {
+  background: $gray;
+  min-height: 400px;
+}

src/assets/main.scss

@@ -8,3 +8,4 @@
 @import '../../node_modules/bootstrap/scss/bootstrap';
 
 @import 'application';
+@import 'image_api_playground';

src/image_api.md

@@ -0,0 +1,7 @@
+---
+layout: page
+title: Image API
+permalink: /image-api/
+---
+
+The IIIF Image API is designed for standardization of requesting and delivering images on the Web. 

src/javascripts/components/ImageApiPlayground.js

@@ -0,0 +1,116 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Img from 'react-image';
+
+class ImageApiPlayground extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      region: '1015,1460,799,824',
+      size: 'pct:25',
+      rotation: '0',
+      quality: 'default',
+      format: 'jpg',
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.imageUrl = this.imageUrl.bind(this);
+  }
+  imageUrl() {
+    return `${this.props.urlPrefix}/${this.state.region}/${this.state.size}/${this.state.rotation}/${this.state.quality}.${this.state.format}`
+  }
+
+  handleChange(event) {
+    const newState = {};
+    newState[event.target.placeholder] = event.target.value;
+    this.setState(newState);
+  }
+
+
+  render() {
+    const image = this.imageUrl();
+    const spinner = (<img alt="spinner" className="" src='/assets/spinning-circles.svg'/>);
+    return (
+      <div>
+        <div className="row">
+          {this.props.urlPrefix}/
+        </div>
+        <div className="row">
+          <div className="col-3">
+            <input
+              type="text"
+              className="form-control"
+              placeholder="region"
+              value={this.state.region}
+              onChange={this.handleChange}
+
+            />
+          </div>
+          /
+          <div className="col-2">
+            <input
+              type="text"
+              className="form-control"
+              placeholder="size"
+              value={this.state.size}
+              onChange={this.handleChange}
+
+            />
+          </div>
+          /
+          <div className="col-2">
+            <input
+              type="text"
+              className="form-control"
+              placeholder="rotation"
+              value={this.state.rotation}
+              onChange={this.handleChange}
+
+            />
+          </div>
+          /
+          <div className="col-2">
+            <input
+              type="text"
+              className="form-control"
+              placeholder="quality"
+              value={this.state.quality}
+              onChange={this.handleChange}
+
+            />
+          </div>
+          .
+          <div className="col-2">
+            <input
+              type="text"
+              className="form-control"
+              placeholder="format"
+              value={this.state.format}
+              onChange={this.handleChange}
+
+            />
+          </div>
+        </div>
+        <div className="row p-4">
+          <div className="col-md-12 img-container rounded">
+            <div className="container d-flex h-100 justify-content-center">
+              <div className="row align-self-center">
+                <Img src={image} loader={spinner} className="p-4" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+// https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/1015,1460,799,824/pct:25/0/default.jpg
+
+ImageApiPlayground.propTypes = {
+  region: PropTypes.string,
+  urlPrefix: PropTypes.string,
+}
+
+export default ImageApiPlayground;

src/javascripts/index.js

@@ -1,5 +1,15 @@
-console.log('holla')
+import React, { PureComponent } from 'react';
+import { render } from 'react-dom';
+import ImageApiPlayground from './components/ImageApiPlayground';
 
+class App extends PureComponent {
+  render() {
+    return (
+      <ImageApiPlayground
+        urlPrefix="https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44"
+      />
+    );
+  }
+}
 
-console.log('back')
-console.log('nextsdfkldsf')
+render(<App />, document.getElementById('image-api-playground'));

webpack.config.js

@@ -11,7 +11,7 @@ module.exports = {
   module: {
     loaders: [
       {
-        test: /\.js?$/,
+        test: /\.jsx?$/,
         exclude: /(node_modules)/,
         loader: 'babel-loader',
         query: {

yarn.lock

@@ -2555,7 +2555,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10:
+prop-types@^15.5.10, prop-types@^15.5.8:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
@@ -2634,6 +2634,12 @@ react-dom@^15.6.1:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
+react-image@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-image/-/react-image-1.0.1.tgz#eb3178a7b2a09945310a4bea6f89317d8b6f8c40"
+  dependencies:
+    prop-types "^15.5.8"
+
 react@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"