<!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>