373 lines
16 KiB
HTML
373 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Feature Panel | Jcrop Demos</title>
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
<script src="../js/Jcrop.js"></script>
|
|
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
|
|
<script src="http://jcrop-dev.tapmodo.com/Jcrop/js/jquery.color.js"></script>
|
|
<script type="text/javascript">
|
|
var cb, filter;
|
|
|
|
jQuery(function($){
|
|
|
|
var $targ = $('#target');
|
|
var $easing = $('#easing');
|
|
|
|
$('#target').Jcrop({
|
|
animEasing: 'easeOutQuart',
|
|
bgOpacity: .35,
|
|
linked: false,
|
|
multi: true
|
|
},function(){
|
|
this.container.addClass('jcrop-dark jcrop-hl-active');
|
|
interface_load(this);
|
|
});
|
|
|
|
function interface_load(obj){
|
|
cb = obj;
|
|
|
|
cb.newSelection();
|
|
cb.setSelect([ 147, 55, 456, 390 ]);
|
|
cb.refresh();
|
|
// Hack a "special" selection...
|
|
var logosel = cb.newSelection().update($.Jcrop.wrapFromXywh([73,268,400,100]));
|
|
|
|
$.extend(logosel,{
|
|
special: true, // custom value used in our local script here
|
|
bgColor: '#999',
|
|
bgOpacity: 0.8,
|
|
canResize: false,
|
|
canDelete: false
|
|
});
|
|
|
|
logosel.element.prepend('<img src="http://tapmodo.com/img/tapmodo-official.png" style="position:absolute;background-color:white;width:100%;height:100%;" />');
|
|
logosel.aspectRatio = 400/100;
|
|
logosel.refresh();
|
|
cb.ui.multi[1].focus();
|
|
|
|
// Select an interesting easing function
|
|
$easing[0].selectedIndex = 24;
|
|
|
|
// Set up the easing function select element event
|
|
cb.opt.animEasing = $easing.change(function(e){
|
|
var $targ = $(e.target);
|
|
cb.opt.animEasing = $targ.val();
|
|
e.preventDefault();
|
|
cb.ui.selection.animateTo([Math.random()*300,Math.random()*200,(Math.random()*540)+50,(Math.random()*340)+60]);
|
|
}).val();
|
|
|
|
$('#filter-selections input').attr('checked',false);
|
|
$('#page-interface').on('startselect',function(e){
|
|
e.preventDefault();
|
|
});
|
|
|
|
/**
|
|
*
|
|
*/
|
|
cb.container.on('cropfocus cropblur cropstart cropend',function(e){
|
|
var sel = $(e.target).data('selection');
|
|
switch(e.type){
|
|
case 'cropfocus':
|
|
$('#can_size')[0].checked = sel.canResize?true:false;
|
|
$('#can_delete')[0].checked = sel.canDelete?true:false;
|
|
$('#can_drag')[0].checked = sel.canDrag?true:false;
|
|
$('#set_minsize')[0].checked = (sel.minSize[0]>8)?true:false;
|
|
$('#set_maxsize')[0].checked = (sel.maxSize[0])?true:false;
|
|
$('#set_bounds')[0].checked = (sel.edge.n)?true:false;
|
|
$('#is_linked')[0].disabled = sel.special?true:false;
|
|
$('#is_linked')[0].checked = sel.linked?true:false;
|
|
$('#shading-tools a')[0].disabled = sel.special?true:false;
|
|
$('#shading-tools a')[sel.special?'addClass':'removeClass']('disabled');
|
|
|
|
$('#ar-links').find('.active').removeClass('active');
|
|
if (sel.aspectRatio) {
|
|
if (!$('#ar-links').find('[data-value="'+sel.aspectRatio+'"]').addClass('active').length)
|
|
$('#ar-lock').addClass('active');
|
|
} else $('#ar-free').addClass('active');
|
|
}
|
|
});
|
|
|
|
$('#aspect_ratio').on('change',function(e){
|
|
var s = cb.ui.selection;
|
|
var b = s.get();
|
|
s.aspectRatio = e.target.checked? b.w/b.h : 0;
|
|
s.refresh();
|
|
});
|
|
$('#is_linked').on('change',function(e){
|
|
cb.ui.selection.linked = e.target.checked;
|
|
});
|
|
|
|
$('#selection-options').on('change','[data-filter-toggle]',function(e){
|
|
var tog = $(e.target).data('filter-toggle');
|
|
var o = { };
|
|
o[tog] = e.target.checked? true: false;
|
|
cb.setOptions(o);
|
|
});
|
|
|
|
var cycle_colors = [
|
|
'red',
|
|
'blue',
|
|
'gray',
|
|
'yellow',
|
|
'orange',
|
|
'green',
|
|
'white'
|
|
];
|
|
|
|
function random_coords() {
|
|
return [
|
|
Math.random()*300,
|
|
Math.random()*200,
|
|
(Math.random()*540)+50,
|
|
(Math.random()*340)+60
|
|
];
|
|
}
|
|
|
|
$('#can_drag,#can_size,#can_delete,#enablesel,#multisel,#anim_mode').attr('checked','checked');
|
|
$('#is_linked,#aspect_ratio').attr('checked',false);
|
|
|
|
function anim_mode(){
|
|
return document.getElementById('anim_mode').checked;
|
|
}
|
|
|
|
// A simple function to cleanup multiple spawned selections
|
|
function run_cleanup(){
|
|
var m = cb.ui.multi, s = cb.ui.selection;
|
|
|
|
for(var i=0;i<m.length;i++)
|
|
if (s !== m[i]) m[i].remove();
|
|
|
|
cb.ui.multi = [ s ];
|
|
s.center();
|
|
s.focus();
|
|
}
|
|
|
|
// Animate button event
|
|
$(document.body).on('click','[data-action]',function(e){
|
|
var $targ = $(e.target);
|
|
var action = $targ.data('action');
|
|
|
|
switch(action){
|
|
case 'set-maxsize':
|
|
cb.setOptions({ maxSize: e.target.checked? [400,350]: [0,0] });
|
|
break;
|
|
case 'set-minsize':
|
|
cb.setOptions({ minSize: e.target.checked? [60,60]: [8,8] });
|
|
break;
|
|
case 'set-bounds':
|
|
if (e.target.checked){
|
|
cb.setOptions({ edge: {
|
|
n: 15,
|
|
e: -20,
|
|
s: -40,
|
|
w: 28
|
|
}});
|
|
}
|
|
else {
|
|
cb.setOptions({ edge: {
|
|
n: 0,
|
|
e: 0,
|
|
s: 0,
|
|
w: 0
|
|
}});
|
|
}
|
|
break;
|
|
case 'set-image':
|
|
$targ.parent().find('.active').removeClass('active');
|
|
$targ.addClass('active');
|
|
$('#target').attr('src','//jcrop-cdn.tapmodo.com/assets/images/'+$targ.data('image')+'-750.jpg');
|
|
break;
|
|
case 'set-ar':
|
|
var value = $targ.data('value');
|
|
$targ.parent().find('.active').removeClass('active');
|
|
if (value == 'lock'){
|
|
var b = cb.ui.selection.get();
|
|
value = b.w / b.h;
|
|
}
|
|
$targ.addClass('active');
|
|
cb.setOptions({ aspectRatio: value });
|
|
break;
|
|
case 'set-selmode':
|
|
$targ.parent().find('.active').removeClass('active');
|
|
$targ.addClass('active');
|
|
switch($targ.data('mode')){
|
|
case 'none':
|
|
cb.container.addClass('jcrop-nodrag');
|
|
cb.setOptions({ allowSelect: false });
|
|
break;
|
|
case 'single':
|
|
cb.container.removeClass('jcrop-nodrag');
|
|
cb.setOptions({ allowSelect: true, multi: false });
|
|
break;
|
|
case 'multi':
|
|
cb.container.removeClass('jcrop-nodrag');
|
|
cb.setOptions({ allowSelect: true, multi: true });
|
|
break;
|
|
}
|
|
break;
|
|
case 'enable-selections':
|
|
cb.ui.stage.dragger.active = e.target.checked;
|
|
break;
|
|
case 'enable-multi':
|
|
cb.ui.stage.dragger.multi = e.target.checked;
|
|
break;
|
|
case 'color-cycle':
|
|
var cc = cycle_colors.shift();
|
|
cb.setOptions({ bgColor: cc });
|
|
cycle_colors.push(cc);
|
|
break;
|
|
case 'set-opacity':
|
|
$targ.parent().find('.active').removeClass('active');
|
|
$targ.addClass('active');
|
|
cb.setOptions({ bgOpacity: $targ.data('opacity'), bgColor: 'black' });
|
|
break;
|
|
case 'cleanup-all':
|
|
run_cleanup();
|
|
break;
|
|
case 'random-move':
|
|
cb[anim_mode()?'animateTo':'setSelect'](random_coords());
|
|
break;
|
|
}
|
|
|
|
}).on('keydown',function(e){
|
|
if (e.keyCode == 8) e.preventDefault();
|
|
}).on('selectstart',function(e){
|
|
e.preventDefault();
|
|
}).on('click','a[data-action]',function(e){
|
|
e.preventDefault();
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
<link rel="stylesheet" href="demo_files/main.css">
|
|
<link rel="stylesheet" href="demo_files/demos.css">
|
|
<link rel="stylesheet" href="../css/Jcrop.css">
|
|
</head>
|
|
<body>
|
|
<div class="navbar navbar-fixed-top">
|
|
<div class="navbar-inner">
|
|
<div class="container">
|
|
<button type="button" data-toggle="collapse" data-target="nav-collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="brand">Jcrop</a>
|
|
<div class="nav-collapse collapse">
|
|
<ul class="nav">
|
|
<li class="active"><a href="./basic.html">Demos</a>
|
|
</li>
|
|
<li><a href="http://beta.jcrop.org/doc/">Docs</a>
|
|
</li>
|
|
<li><a href="http://beta.jcrop.org/contact/">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="span12">
|
|
<div class="jc-demo-box">
|
|
<div class="page-header">
|
|
<h1>Feature Panel</h1>
|
|
</div>
|
|
<div class="demo-nav menu-box">
|
|
<h3>Jcrop Demos</h3>
|
|
<ul class="links">
|
|
<li><a href="basic.html">Hello World</a></li>
|
|
<li><a href="thumbnail.html">Thumbnail Preview</a></li>
|
|
<li><b>Feature Panel</b></li>
|
|
<li><a href="coords.html">Dimensions</a></li>
|
|
<li><a href="circle.html">Circles</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="page-interface"><img src="http://jcrop-cdn.tapmodo.com/assets/images/sierra2-750.jpg" id="target">
|
|
<div class="row-fluid">
|
|
<div class="span4">
|
|
<h5>Selection Properties</h5>
|
|
<div id="selection-options">
|
|
<label class="checkbox">
|
|
<input type="checkbox" data-filter-toggle="canDrag" id="can_drag">Draggable
|
|
</label>
|
|
<label class="checkbox">
|
|
<input type="checkbox" data-filter-toggle="canResize" id="can_size">Resizable
|
|
</label>
|
|
<label class="checkbox">
|
|
<input type="checkbox" data-filter-toggle="canDelete" id="can_delete">Deletable
|
|
</label>
|
|
</div>
|
|
<label class="checkbox">
|
|
<input type="checkbox" data-action="set-bounds" id="set_bounds">Enable boundary
|
|
</label>
|
|
<label class="checkbox">
|
|
<input type="checkbox" data-action="set-minsize" id="set_minsize">Minimum Size
|
|
</label>
|
|
<label class="checkbox">
|
|
<input type="checkbox" data-action="set-maxsize" id="set_maxsize">Maximum Size
|
|
</label>
|
|
</div>
|
|
<div class="span4">
|
|
<h5>Aspect Ratio</h5>
|
|
<div class="btn-toolbar"><span id="ar-links" class="btn-group"><a href="#" data-action="set-ar" data-value="0" id="ar-free" class="btn active btn-small">Free</a><a href="#" data-action="set-ar" data-value="lock" id="ar-lock" class="btn btn-small">Lock</a><a href="#" data-action="set-ar" data-value="1.4" class="btn btn-small">Wide</a><a href="#" data-action="set-ar" data-value=".8" class="btn btn-small">Tall</a></span></div>
|
|
<h5>Shading</h5>
|
|
<div id="shading-tools" class="btn-toolbar"><a href="#" data-action="color-cycle" class="btn btn-small">Color</a><span class="btn-group"><a href="#" data-action="set-opacity" data-opacity=".35" class="btn active btn-small">Light</a><a href="#" data-action="set-opacity" data-opacity=".55" class="btn btn-small">Medium</a><a href="#" data-action="set-opacity" data-opacity=".75" class="btn btn-small">Dark</a></span></div>
|
|
<h5>Animation</h5>
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="anim_mode">Enable Animation
|
|
</label>
|
|
<select data-action="update-easing" id="easing" class="select">
|
|
<option>linear</option>
|
|
<option>swing</option>
|
|
<option>easeInOutQuad</option>
|
|
<option>easeInQuad</option>
|
|
<option>easeOutQuad</option>
|
|
<option>easeInOutExpo</option>
|
|
<option>easeInExpo</option>
|
|
<option>easeOutExpo</option>
|
|
<option>easeInOutSine</option>
|
|
<option>easeInSine</option>
|
|
<option>easeOutSine</option>
|
|
<option>easeOutBounce</option>
|
|
<option>easeInOutCirc</option>
|
|
<option>easeInCirc</option>
|
|
<option>easeOutCirc</option>
|
|
<option>easeInOutCubic</option>
|
|
<option>easeInCubic</option>
|
|
<option>easeOutCubic</option>
|
|
<option>easeOutElastic</option>
|
|
<option>easeInOutBack</option>
|
|
<option>easeInBack</option>
|
|
<option>easeOutBack</option>
|
|
<option>easeInOutQuart</option>
|
|
<option>easeInQuart</option>
|
|
<option>easeOutQuart</option>
|
|
<option>easeInOutQuint</option>
|
|
<option>easeInQuint</option>
|
|
<option>easeOutQuint</option>
|
|
</select>
|
|
</div>
|
|
<div class="span4">
|
|
<h5>Current Selection</h5>
|
|
<label class="checkbox">
|
|
<input type="checkbox" data-filter-toggle="ratio" id="is_linked">Linked Selection
|
|
</label>
|
|
<div class="btn-toolbar"><a href="#" data-action="random-move" id="moveselection" class="btn btn-small">Move</a><a href="#" data-action="cleanup-all" class="btn btn-small">Cleanup</a></div>
|
|
<h5>New Selections</h5>
|
|
<div class="btn-toolbar"><span class="btn-group"><a href="#" data-action="set-selmode" data-mode="none" class="btn btn-small">None</a><a href="#" data-action="set-selmode" data-mode="single" class="btn btn-small">Single</a><a href="#" data-action="set-selmode" data-mode="multi" class="btn active btn-small">Multi</a></span></div>
|
|
<h5>Test Image</h5>
|
|
<div class="btn-toolbar"><span class="btn-group"><a href="#" data-action="set-image" data-image="sierra" class="btn btn-small">Sierra1</a><a href="#" data-action="set-image" data-image="sierra2" class="btn active btn-small">Sierra2</a><a href="#" data-action="set-image" data-image="market" class="btn btn-small">Market</a></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div>Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |