zp
/
switch


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
							<!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>&copy; 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>