Update build process and templates

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "build/less/bs"]
+	path = build/less/bs
+	url = http://github.com/twitter/bootstrap.git

build/LICENSE

@@ -1,5 +1,5 @@
 /**
-__BUILD__
+ * __OUTFILE__ __BUILD__
  * jQuery Image Cropping Plugin - released under MIT License
  * Copyright (c) 2008-2012 Tapmodo Interactive LLC
  * https://github.com/tapmodo/Jcrop

build/README.md

@@ -0,0 +1,39 @@
+Jcrop Build Folder
+=================
+
+The files in this folder are used by git and .git/hooks/pre-commit script.
+Unless you are developing with Jcrop and git, you can ignore what's here.
+
+### Build process requirements
+
+* Twitter Bootstrap (as git submodule; see below)
+* `bash` (for running build scripts)
+* `php` (runnable from command line for build scripts)
+* `csstidy` (for CSS minimization)
+* `ugilfy` (for Javascript minimization)
+
+### Initializing submodules
+
+The demos and included HTML for this project use Twitter Bootstrap.
+
+To build the project files using the scripts included in the `build`
+directory, you must init and update the git submodules used by this project.
+
+    $ git submodule init
+    $ git submodule update
+
+This will retrieve the submodules used by the Jcrop build process.
+
+### Setting up the minimization pre-commit hook
+
+If you would like to use this as a pre-commit hook, I have included the
+pre-commit hook that I use named pre-commit.bash
+
+    $ cp build/pre-commit.bash .git/hooks/pre-commit
+    $ chmod +x !$
+
+When you commit either `jquery.Jcrop.js` or `jquery.Jcrop.css`, the pre-commit
+hook will automatically build and commit the minimized file as part of the same
+commit.
+
+##Your milage may vary!

build/VERSION

@@ -0,0 +1 @@
+v0.9.12

build/build-all.bash

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+pushd `dirname $0`
+
+export JCROP_VERSION=${JCROP_VERSION-`cat VERSION`}
+export JCROP_BUILD=${JCROP_BUILD-`date +"%Y%m%d"`}
+
+lessc less/main.less > ../demos/demo_files/main.css;
+lessc less/demos.less > ../demos/demo_files/demos.css;
+
+pushd demos;
+php -q build.php;
+
+#lessc less/docs.less > ../demos/demo_files/docs.css
+
+popd
+popd
+

build/demos/api-demo/content.html

@@ -0,0 +1,37 @@
+  <img src="demo_files/sago.jpg" id="target" alt="Jcrop Image" />
+
+  <div style="margin: .8em 0 .5em;">
+    <span class="requiresjcrop">
+      <button id="setSelect" class="btn btn-mini">setSelect</button>
+      <button id="animateTo" class="btn btn-mini">animateTo</button>
+      <button id="release" class="btn btn-mini">Release</button>
+      <button id="disable" class="btn btn-mini">Disable</button>
+    </span>
+    <button id="enable" class="btn btn-mini" style="display:none;">Re-Enable</button>
+    <button id="unhook" class="btn btn-mini">Destroy!</button>
+    <button id="rehook" class="btn btn-mini" style="display:none;">Attach Jcrop</button>
+  </div>
+
+  <fieldset class="optdual requiresjcrop">
+    <legend>Option Toggles</legend>
+    <div class="optlist offset">
+      <label><input type="checkbox" id="ar_lock" />Aspect ratio</label>
+      <label><input type="checkbox" id="size_lock" />minSize/maxSize setting</label>
+    </div>
+    <div class="optlist">
+      <label><input type="checkbox" id="can_click" />Allow new selections</label>
+      <label><input type="checkbox" id="can_move" />Selection can be moved</label>
+      <label><input type="checkbox" id="can_size" />Resizable selection</label>
+    </div>
+  </fieldset>
+
+  <fieldset class="requiresjcrop" style="margin: .5em 0;">
+    <legend>Change Image</legend>
+    <div class="btn-group">
+      <button class="btn" id="img2">Pool</button>
+      <button class="btn active" id="img1">Sago</button>
+      <button class="btn" id="img3">Sago w/ outerImage</button>
+    </div>
+  </fieldset>
+
+

build/demos/api-demo/inline.css

@@ -0,0 +1,4 @@
+  .optdual { position: relative; }
+  .optdual .offset { position: absolute; left: 18em; }
+  .optlist label { width: 16em; display: block; }
+  #dl_links { margin-top: .5em; }

build/demos/api-demo/inline.js

@@ -0,0 +1,174 @@
+  jQuery(function($){
+
+    // The variable jcrop_api will hold a reference to the
+    // Jcrop API once Jcrop is instantiated.
+    var jcrop_api;
+
+    // In this example, since Jcrop may be attached or detached
+    // at the whim of the user, I've wrapped the call into a function
+    initJcrop();
+
+    // The function is pretty simple
+    function initJcrop()//{{{
+    {
+      // Hide any interface elements that require Jcrop
+      // (This is for the local user interface portion.)
+      $('.requiresjcrop').hide();
+
+      // Invoke Jcrop in typical fashion
+      $('#target').Jcrop({
+        onRelease: releaseCheck
+      },function(){
+
+        jcrop_api = this;
+        jcrop_api.animateTo([100,100,400,300]);
+
+        // Setup and dipslay the interface for "enabled"
+        $('#can_click,#can_move,#can_size').attr('checked','checked');
+        $('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
+        $('.requiresjcrop').show();
+
+      });
+
+    };
+    //}}}
+
+    // Use the API to find cropping dimensions
+    // Then generate a random selection
+    // This function is used by setSelect and animateTo buttons
+    // Mainly for demonstration purposes
+    function getRandom() {
+      var dim = jcrop_api.getBounds();
+      return [
+        Math.round(Math.random() * dim[0]),
+        Math.round(Math.random() * dim[1]),
+        Math.round(Math.random() * dim[0]),
+        Math.round(Math.random() * dim[1])
+      ];
+    };
+
+    // This function is bound to the onRelease handler...
+    // In certain circumstances (such as if you set minSize
+    // and aspectRatio together), you can inadvertently lose
+    // the selection. This callback re-enables creating selections
+    // in such a case. Although the need to do this is based on a
+    // buggy behavior, it's recommended that you in some way trap
+    // the onRelease callback if you use allowSelect: false
+    function releaseCheck()
+    {
+      jcrop_api.setOptions({ allowSelect: true });
+      $('#can_click').attr('checked',false);
+    };
+
+    // Attach interface buttons
+    // This may appear to be a lot of code but it's simple stuff
+    $('#setSelect').click(function(e) {
+      // Sets a random selection
+      jcrop_api.setSelect(getRandom());
+    });
+    $('#animateTo').click(function(e) {
+      // Animates to a random selection
+      jcrop_api.animateTo(getRandom());
+    });
+    $('#release').click(function(e) {
+      // Release method clears the selection
+      jcrop_api.release();
+    });
+    $('#disable').click(function(e) {
+      // Disable Jcrop instance
+      jcrop_api.disable();
+      // Update the interface to reflect disabled state
+      $('#enable').show();
+      $('.requiresjcrop').hide();
+    });
+    $('#enable').click(function(e) {
+      // Re-enable Jcrop instance
+      jcrop_api.enable();
+      // Update the interface to reflect enabled state
+      $('#enable').hide();
+      $('.requiresjcrop').show();
+    });
+    $('#rehook').click(function(e) {
+      // This button is visible when Jcrop has been destroyed
+      // It performs the re-attachment and updates the UI
+      $('#rehook,#enable').hide();
+      initJcrop();
+      $('#unhook,.requiresjcrop').show();
+      return false;
+    });
+    $('#unhook').click(function(e) {
+      // Destroy Jcrop widget, restore original state
+      jcrop_api.destroy();
+      // Update the interface to reflect un-attached state
+      $('#unhook,#enable,.requiresjcrop').hide();
+      $('#rehook').show();
+      return false;
+    });
+
+    // Hook up the three image-swapping buttons
+    $('#img1').click(function(e) {
+      $(this).addClass('active').closest('.btn-group')
+        .find('button.active').not(this).removeClass('active');
+
+      jcrop_api.setImage('demo_files/sago.jpg');
+      jcrop_api.setOptions({ bgOpacity: .6 });
+      return false;
+    });
+    $('#img2').click(function(e) {
+      $(this).addClass('active').closest('.btn-group')
+        .find('button.active').not(this).removeClass('active');
+
+      jcrop_api.setImage('demo_files/pool.jpg');
+      jcrop_api.setOptions({ bgOpacity: .6 });
+      return false;
+    });
+    $('#img3').click(function(e) {
+      $(this).addClass('active').closest('.btn-group')
+        .find('button.active').not(this).removeClass('active');
+
+      jcrop_api.setImage('demo_files/sago.jpg',function(){
+        this.setOptions({
+          bgOpacity: 1,
+          outerImage: 'demo_files/sagomod.jpg'
+        });
+        this.animateTo(getRandom());
+      });
+      return false;
+    });
+
+    // The checkboxes simply set options based on it's checked value
+    // Options are changed by passing a new options object
+
+    // Also, to prevent strange behavior, they are initially checked
+    // This matches the default initial state of Jcrop
+
+    $('#can_click').change(function(e) {
+      jcrop_api.setOptions({ allowSelect: !!this.checked });
+      jcrop_api.focus();
+    });
+    $('#can_move').change(function(e) {
+      jcrop_api.setOptions({ allowMove: !!this.checked });
+      jcrop_api.focus();
+    });
+    $('#can_size').change(function(e) {
+      jcrop_api.setOptions({ allowResize: !!this.checked });
+      jcrop_api.focus();
+    });
+    $('#ar_lock').change(function(e) {
+      jcrop_api.setOptions(this.checked?
+        { aspectRatio: 4/3 }: { aspectRatio: 0 });
+      jcrop_api.focus();
+    });
+    $('#size_lock').change(function(e) {
+      jcrop_api.setOptions(this.checked? {
+        minSize: [ 80, 80 ],
+        maxSize: [ 350, 350 ]
+      }: {
+        minSize: [ 0, 0 ],
+        maxSize: [ 0, 0 ]
+      });
+      jcrop_api.focus();
+    });
+
+  });
+

build/demos/api-demo/page.php

@@ -0,0 +1,6 @@
+<?php
+
+$page = new demoDef(array(
+  'name' => 'API Demo',
+  'desc' => 'advanced API demonstration',
+));

build/demos/basic-handler/content.html

@@ -0,0 +1,32 @@
+  <!-- This is the image we're attaching Jcrop to -->
+  <img src="http://jcrop-cdn1.tapmodo.com/assets/images/sierra5-750.jpg" id="target" alt="Flowers" />
+
+  <!-- This is the form that our event handler fills -->
+  <form id="coords"
+    class="coords"
+    onsubmit="return false;"
+    action="http://example.com/post.php">
+
+    <div class="inline-labels">
+    <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
+    <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
+    <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
+    <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
+    <label>W <input type="text" size="4" id="w" name="w" /></label>
+    <label>H <input type="text" size="4" id="h" name="h" /></label>
+    </div>
+  </form>
+
+  <div class="description">
+  <p>
+    <b>An example with a basic event handler.</b> Here we've tied
+    several form values together with a simple event handler invocation.
+    The result is that the form values are updated in real-time as
+    the selection is changed using Jcrop's <em>onChange</em> handler.
+  </p>
+
+  <p>
+    That's how easily Jcrop can be integrated into a traditional web form!
+  </p>
+  </div>
+

build/demos/basic-handler/inline.js

@@ -0,0 +1,29 @@
+
+  jQuery(function($){
+
+    $('#target').Jcrop({
+      onChange:   showCoords,
+      onSelect:   showCoords,
+      onRelease:  clearCoords
+    });
+
+  });
+
+  // Simple event handler, called from onChange and onSelect
+  // event handlers, as per the Jcrop invocation above
+  function showCoords(c)
+  {
+    $('#x1').val(c.x);
+    $('#y1').val(c.y);
+    $('#x2').val(c.x2);
+    $('#y2').val(c.y2);
+    $('#w').val(c.w);
+    $('#h').val(c.h);
+  };
+
+  function clearCoords()
+  {
+    $('#coords input').val('');
+  };
+
+

build/demos/basic-handler/page.php

@@ -0,0 +1,6 @@
+<?php
+
+$page = new demoDef(array(
+  'name' => 'Basic Handler',
+));
+