Permalink
Browse files

Update build process and templates

  • Loading branch information...
1 parent 1a4ecdb commit 6eca50b91eed1ef45db694a312b9a8695024cd42 @tapmodo committed Dec 31, 2012
Showing with 7,850 additions and 889 deletions.
  1. +3 −0 .gitmodules
  2. +1 −1 build/LICENSE
  3. +0 −11 build/README
  4. +39 −0 build/README.md
  5. +1 −0 build/VERSION
  6. +18 −0 build/build-all.bash
  7. +37 −0 build/demos/api-demo/content.html
  8. +4 −0 build/demos/api-demo/inline.css
  9. +174 −0 build/demos/api-demo/inline.js
  10. +6 −0 build/demos/api-demo/page.php
  11. +32 −0 build/demos/basic-handler/content.html
  12. +29 −0 build/demos/basic-handler/inline.js
  13. +6 −0 build/demos/basic-handler/page.php
  14. +52 −0 build/demos/build.php
  15. +9 −0 build/demos/hello-world/content.html
  16. +6 −0 build/demos/hello-world/inline.js
  17. +6 −0 build/demos/hello-world/page.php
  18. +13 −0 build/demos/non-image/content.html
  19. +8 −0 build/demos/non-image/inline.css
  20. +12 −0 build/demos/non-image/inline.js
  21. +5 −0 build/demos/non-image/page.php
  22. +18 −0 build/demos/preview-pane/content.html
  23. +30 −0 build/demos/preview-pane/inline.css
  24. +50 −0 build/demos/preview-pane/inline.js
  25. +5 −0 build/demos/preview-pane/page.php
  26. +17 −0 build/demos/styling/content.html
  27. +50 −0 build/demos/styling/inline.js
  28. +6 −0 build/demos/styling/page.php
  29. +65 −0 build/demos/template.php
  30. +33 −0 build/demos/transitions/content.html
  31. +132 −0 build/demos/transitions/inline.js
  32. +8 −0 build/demos/transitions/page.php
  33. +64 −0 build/less/_bootstrap.less
  34. +118 −0 build/less/_reset.less
  35. +29 −0 build/less/_tapmodo.less
  36. +302 −0 build/less/_variables.less
  37. +1 −0 build/less/bs
  38. +109 −0 build/less/demos.less
  39. +43 −0 build/less/main.less
  40. +82 −0 build/lib/tmpl.php
  41. +18 −6 build/minimize-css.bash
  42. +17 −6 build/minimize-js.bash
  43. +35 −0 build/static/build.php
  44. +68 −53 demos/crop.php
  45. +106 −46 demos/demo_files/demos.css
  46. +4,996 −0 demos/demo_files/main.css
  47. +81 −59 demos/non-image.html
  48. +109 −83 demos/styling.html
  49. +63 −45 demos/tutorial1.html
  50. +103 −82 demos/tutorial2.html
  51. +143 −86 demos/tutorial3.html
  52. +209 −170 demos/tutorial4.html
  53. +254 −226 demos/tutorial5.html
  54. +25 −15 index.html
View
@@ -0,0 +1,3 @@
+[submodule "build/less/bs"]
+ path = build/less/bs
+ url = http://github.com/twitter/bootstrap.git
View
@@ -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
View
@@ -1,11 +0,0 @@
-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.
-
-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
-
-If you can use bash, copy this file to .git/hooks/pre-commit and make it
-executable. Your milage may vary!
View
@@ -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!
View
@@ -0,0 +1 @@
+v0.9.12
View
@@ -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
+
@@ -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>
+
+
@@ -0,0 +1,4 @@
+ .optdual { position: relative; }
+ .optdual .offset { position: absolute; left: 18em; }
+ .optlist label { width: 16em; display: block; }
+ #dl_links { margin-top: .5em; }
@@ -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();
+ });
+
+ });
+
@@ -0,0 +1,6 @@
+<?php
+
+$page = new demoDef(array(
+ 'name' => 'API Demo',
+ 'desc' => 'advanced API demonstration',
+));
@@ -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>
+
@@ -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('');
+ };
+
+
@@ -0,0 +1,6 @@
+<?php
+
+$page = new demoDef(array(
+ 'name' => 'Basic Handler',
+));
+
Oops, something went wrong.

0 comments on commit 6eca50b

Please sign in to comment.