mirror of
https://github.com/owncloudarchive/contacts.git
synced 2025-02-11 05:54:27 +01:00
8c3d7ccdba
Remove old combobox user bower for onfontresize Add jcrop + md5 Add files to scrutinizer ignore list Remove misplaced text Selected the right MultiSelect library via bower Move bower dependencies to correct location
269 lines
8.4 KiB
HTML
269 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>API Demo | 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($){
|
|
|
|
// 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();
|
|
});
|
|
|
|
});
|
|
|
|
|
|
</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">
|
|
.optdual { position: relative; }
|
|
.optdual .offset { position: absolute; left: 18em; }
|
|
.optlist label { width: 16em; display: block; }
|
|
#dl_links { margin-top: .5em; }
|
|
|
|
</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">API Demo</li>
|
|
</ul>
|
|
<h1>API Demo</h1>
|
|
</div>
|
|
|
|
<img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
|
|
|
|
<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>
|
|
|
|
|
|
|
|
<div class="tapmodo-footer">
|
|
<a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
|
|
<div class="segment"><b>© 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>
|
|
|