RubyGems - peoplefinder - Versions diffs - 0.0.2 - Mend

peoplefinder 0.0.2

Files changed (1009) hide show

data/vendor/assets/components/Jcrop/demos/demo_files/pool.jpg ADDED

Binary file

data/vendor/assets/components/Jcrop/demos/demo_files/sago.jpg ADDED

Binary file

data/vendor/assets/components/Jcrop/demos/demo_files/sagomod.jpg ADDED

Binary file

data/vendor/assets/components/Jcrop/demos/demo_files/sagomod.png ADDED

Binary file

data/vendor/assets/components/Jcrop/demos/non-image.html ADDED

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Non-image Cropping | Jcrop Demo</title>
+  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
+<script src="../js/jquery.min.js"></script>
+<script src="../js/jquery.Jcrop.js"></script>
+<script type="text/javascript">
+  jQuery(function($){
+    // I did JSON.stringify(jcrop_api.tellSelect()) on a crop I liked:
+    var c = {"x":13,"y":7,"x2":487,"y2":107,"w":474,"h":100};
+    $('#target').Jcrop({
+      bgFade: true,
+      setSelect: [c.x,c.y,c.x2,c.y2]
+    });
+  });
+</script>
+<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
+<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
+<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
+<style type="text/css">
+  #target {
+    background-color: #ccc;
+    width: 500px;
+    height: 330px;
+    font-size: 24px;
+    display: block;
+  }
+</style>
+</head>
+<body>
+<div class="container">
+<div class="row">
+<div class="span12">
+<div class="jc-demo-box">
+<div class="page-header">
+<ul class="breadcrumb first">
+  <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
+  <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
+  <li class="active">Non-image Cropping</li>
+</ul>
+<h1>Non-image Cropping</h1>
+</div>
+  <p id="target">
+    <b style="display:block; padding: .5em 1em;">
+      This is an example of attaching Jcrop to a target that is not an image. You are now cropping a paragraph tag.
+    </b>
+  </p>
+  <div class="description">
+  <p>
+    <b>Attaching Jcrop to a non-image element.</b><br />
+    This is mostly useful to implement other interfaces, such as <tt>canvas</tt> or over an arbitrary <tt>div</tt>.
+  </p>
+  </div>
+<div class="tapmodo-footer">
+  <a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
+  <div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b><br />
+    Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
+  </div>
+</div>
+<div class="clearfix"></div>
+</div>
+</div>
+</div>
+</div>
+</body>
+</html>

data/vendor/assets/components/Jcrop/demos/styling.html ADDED

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>CSS Styling Example | Jcrop Demo</title>
+  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
+<script src="../js/jquery.min.js"></script>
+<script src="../js/jquery.Jcrop.js"></script>
+<script src="../js/jquery.color.js"></script>
+<script type="text/javascript">
+  jQuery(function($){
+    var api;
+    $('#target').Jcrop({
+      // start off with jcrop-light class
+      bgOpacity: 0.5,
+      bgColor: 'white',
+      addClass: 'jcrop-light'
+    },function(){
+      api = this;
+      api.setSelect([130,65,130+350,65+285]);
+      api.setOptions({ bgFade: true });
+      api.ui.selection.addClass('jcrop-selection');
+    });
+    $('#buttonbar').on('click','button',function(e){
+      var $t = $(this), $g = $t.closest('.btn-group');
+      $g.find('button.active').removeClass('active');
+      $t.addClass('active');
+      $g.find('[data-setclass]').each(function(){
+        var $th = $(this), c = $th.data('setclass'),
+          a = $th.hasClass('active');
+        if (a) {
+          api.ui.holder.addClass(c);
+          switch(c){
+            case 'jcrop-light':
+              api.setOptions({ bgColor: 'white', bgOpacity: 0.5 });
+              break;
+            case 'jcrop-dark':
+              api.setOptions({ bgColor: 'black', bgOpacity: 0.4 });
+              break;
+            case 'jcrop-normal':
+              api.setOptions({
+                bgColor: $.Jcrop.defaults.bgColor,
+                bgOpacity: $.Jcrop.defaults.bgOpacity
+              });
+              break;
+          }
+        }
+        else api.ui.holder.removeClass(c);
+      });
+    });
+  });
+</script>
+<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
+<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
+<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
+</head>
+<body>
+<div class="container">
+<div class="row">
+<div class="span12">
+<div class="jc-demo-box">
+<div class="page-header">
+<ul class="breadcrumb first">
+  <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
+  <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
+  <li class="active">CSS Styling Example</li>
+</ul>
+<h1>CSS Styling Example</h1>
+</div>
+  <img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
+  <div style="margin-top:1em; width:500px;">
+  <fieldset>
+  <legend>Manipulate classes</legend>
+    <div class="btn-group" id="buttonbar">
+      <button id="radio1" data-setclass="jcrop-light" class="btn active" />jcrop-light</button>
+      <button id="radio2" data-setclass="jcrop-dark" class="btn" />jcrop-dark</button>
+      <button id="radio3" data-setclass="jcrop-normal" class="btn" />normal</button>
+    </div>
+  </fieldset>
+  </div>
+  <p>
+    <b>Example styling tricks.</b> Click the buttons above to change the appearance of Jcrop in real-time.
+  </p>
+<div class="tapmodo-footer">
+  <a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
+  <div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b><br />
+    Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
+  </div>
+</div>
+<div class="clearfix"></div>
+</div>
+</div>
+</div>
+</div>
+</body>
+</html>

data/vendor/assets/components/Jcrop/demos/tutorial1.html ADDED

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Hello World | Jcrop Demo</title>
+  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
+<script src="../js/jquery.min.js"></script>
+<script src="../js/jquery.Jcrop.js"></script>
+<script type="text/javascript">
+  jQuery(function($){
+    // How easy is this??
+    $('#target').Jcrop();
+  });
+</script>
+<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
+<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
+<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
+</head>
+<body>
+<div class="container">
+<div class="row">
+<div class="span12">
+<div class="jc-demo-box">
+<div class="page-header">
+<ul class="breadcrumb first">
+  <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
+  <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
+  <li class="active">Hello World</li>
+</ul>
+<h1>Hello World</h1>
+</div>
+  <img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
+  <div class="description">
+  <p>
+    <b>This example demonstrates the default behavior of Jcrop.</b><br />
+    Since no event handlers have been attached it only performs
+    the cropping behavior.
+  </p>
+  </div>
+<div class="tapmodo-footer">
+  <a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
+  <div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b><br />
+    Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
+  </div>
+</div>
+<div class="clearfix"></div>
+</div>
+</div>
+</div>
+</div>
+</body>
+</html>

data/vendor/assets/components/Jcrop/demos/tutorial2.html ADDED

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Basic Handler | Jcrop Demo</title>
+  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
+<script src="../js/jquery.min.js"></script>
+<script src="../js/jquery.Jcrop.js"></script>
+<script type="text/javascript">
+  jQuery(function($){
+    var jcrop_api;
+    $('#target').Jcrop({
+      onChange:   showCoords,
+      onSelect:   showCoords,
+      onRelease:  clearCoords
+    },function(){
+      jcrop_api = this;
+    });
+    $('#coords').on('change','input',function(e){
+      var x1 = $('#x1').val(),
+          x2 = $('#x2').val(),
+          y1 = $('#y1').val(),
+          y2 = $('#y2').val();
+      jcrop_api.setSelect([x1,y1,x2,y2]);
+    });
+  });
+  // 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('');
+  };
+</script>
+<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
+<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
+<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
+</head>
+<body>
+<div class="container">
+<div class="row">
+<div class="span12">
+<div class="jc-demo-box">
+<div class="page-header">
+<ul class="breadcrumb first">
+  <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
+  <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
+  <li class="active">Basic Handler</li>
+</ul>
+<h1>Basic Handler</h1>
+</div>
+  <!-- This is the image we're attaching Jcrop to -->
+  <img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
+  <!-- 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>
+<div class="tapmodo-footer">
+  <a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
+  <div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b><br />
+    Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
+  </div>
+</div>
+<div class="clearfix"></div>
+</div>
+</div>
+</div>
+</div>
+</body>
+</html>

data/vendor/assets/components/Jcrop/demos/tutorial3.html ADDED

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
+  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
+<script src="../js/jquery.min.js"></script>
+<script src="../js/jquery.Jcrop.js"></script>
+<script type="text/javascript">
+  jQuery(function($){
+    // Create variables (in this scope) to hold the API and image size
+    var jcrop_api,
+        boundx,
+        boundy,
+        // Grab some information about the preview pane
+        $preview = $('#preview-pane'),
+        $pcnt = $('#preview-pane .preview-container'),
+        $pimg = $('#preview-pane .preview-container img'),
+        xsize = $pcnt.width(),
+        ysize = $pcnt.height();
+    console.log('init',[xsize,ysize]);
+    $('#target').Jcrop({
+      onChange: updatePreview,
+      onSelect: updatePreview,
+      aspectRatio: xsize / ysize
+    },function(){
+      // Use the API to get the real image size
+      var bounds = this.getBounds();
+      boundx = bounds[0];
+      boundy = bounds[1];
+      // Store the API in the jcrop_api variable
+      jcrop_api = this;
+      // Move the preview into the jcrop container for css positioning
+      $preview.appendTo(jcrop_api.ui.holder);
+    });
+    function updatePreview(c)
+    {
+      if (parseInt(c.w) > 0)
+      {
+        var rx = xsize / c.w;
+        var ry = ysize / c.h;
+        $pimg.css({
+          width: Math.round(rx * boundx) + 'px',
+          height: Math.round(ry * boundy) + 'px',
+          marginLeft: '-' + Math.round(rx * c.x) + 'px',
+          marginTop: '-' + Math.round(ry * c.y) + 'px'
+        });
+      }
+    };
+  });
+</script>
+<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
+<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
+<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
+<style type="text/css">
+/* Apply these styles only when #preview-pane has
+   been placed within the Jcrop widget */
+.jcrop-holder #preview-pane {
+  display: block;
+  position: absolute;
+  z-index: 2000;
+  top: 10px;
+  right: -280px;
+  padding: 6px;
+  border: 1px rgba(0,0,0,.4) solid;
+  background-color: white;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
+}
+/* The Javascript code will set the aspect ratio of the crop
+   area based on the size of the thumbnail preview,
+   specified here */
+#preview-pane .preview-container {
+  width: 250px;
+  height: 170px;
+  overflow: hidden;
+}
+</style>
+</head>
+<body>
+<div class="container">
+<div class="row">
+<div class="span12">
+<div class="jc-demo-box">
+<div class="page-header">
+<ul class="breadcrumb first">
+  <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
+  <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
+  <li class="active">Aspect Ratio with Preview Pane</li>
+</ul>
+<h1>Aspect Ratio with Preview Pane</h1>
+</div>
+  <img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
+  <div id="preview-pane">
+    <div class="preview-container">
+      <img src="demo_files/sago.jpg" class="jcrop-preview" alt="Preview" />
+    </div>
+  </div>
+  <div class="description">
+  <p>
+    <b>An example implementing a preview pane.</b>
+      Obviously the most visual demo, the preview pane is accomplished
+      entirely outside of Jcrop with a simple jQuery-flavored callback.
+      This type of interface could be useful for creating a thumbnail
+      or avatar. The onChange event handler is used to update the
+      view in the preview pane.
+  </p>
+  </div>
+<div class="tapmodo-footer">
+  <a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
+  <div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b><br />
+    Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
+  </div>
+</div>
+<div class="clearfix"></div>
+</div>
+</div>
+</div>
+</div>
+</body>
+</html>