bignose
/
debian_jquery-caret.js


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
							<!DOCTYPE HTML>

<html>
<head>
  <title>Caret.js</title>
  <meta http-equiv="x-ua-compatible" content="IE=Edge"/>
  <meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no">

  <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="src/jquery.caret.js"></script>
  <!-- // <script type="text/javascript" src="ckeditor/ckeditor.js"></script> -->
  <!-- // <script type="text/javascript" src="http://cdn.staticfile.org/ckeditor/4.2/ckeditor.js"></script> -->

  <script type="text/javascript">
  $(function () {
    var $input = $('#input');
    var $editable = $('#editable');

    function resetOffset($textField) {
      var offset = $textField.caret('offset');
      var position = $textField.caret('position');
      resizeBox(offset, position);
      return offset
    }
    function resizeBox (offset, position) {
      $('.offset-box').css({'width': offset.left, 'height': offset.top})
      $('.indicators')
        .offset({left: offset.left, top: offset.top + offset.height + 2})
        .find('.offset-indicator')
        .html("Offset: left: " + offset.left + ", " + "top: " + offset.top + "&nbsp;" + "height: " + offset.height);

      $('.position-box').css({'width': position.left, 'height': position.top})
      $('.position-indicator')
        .html("Position: left: " + position.left + ", " + "top: " + position.top + "&nbsp;");
    }

    $input.on('focus keyup mouseup', function(){
      resetOffset($input);
    });
    $editable.on('focus keyup mouseup', function(){
      resetOffset($editable)
    });
    $(window).resize(function() {
      if ($input.is(":focus"))
        resetOffset($input);
      else
        resetOffset($editable);
    });
    $input.caret('pos', 53).focus();

    // CKEDITOR.config.toolbar = [[ 'Source', '-', 'Bold', 'Italic' ]];
    // CKEDITOR.replace( 'ckEditor', {
    // });
    // CKEDITOR.instances.ckEditor.on('instanceReady', function() {
    //   ifr = $('.cke_wysiwyg_frame')[0];
    //   $ckBody = $('body', ifr.contentDocument);
    //   $ckBody.on('keyup mouseup', function() {
    //     offset = $ckBody.caret('offset');
    //     resizeBox(offset);
    //   });
    ifr = $('#iframe1')[0];
    ifrBody = ifr.contentDocument.body;
    ifrBody.contentEditable = true;
    ifrBody.id = 'ifrBody';
    ifrBody.innerHTML = 'For <strong>WYSIWYG</strong> such as <strong>ckeditor</strong>'
    $(ifrBody).on('keyup mouseup', function() {
      offset = $(ifrBody).caret('offset', {iframe: ifr});
      offset.left += $(ifr).offset().left;
      offset.top += $(ifr).offset().top;
      position = $(ifrBody).caret('position', {iframe: ifr});
      resizeBox(offset, position);
    });


  });
  </script>

  <style type="text/css">
  html, body {
    background:#F9F9F9;
    padding: 0;
    margin: 0;
    font: 14px/1.6 "Lucida Grande", "Helvetica", sans-serif;
    color: #333;
  }
  h1,h2,h3,h4 {
    font-family: 'PT Sans', sans-serif;
    line-height: 40px;
    color: inherit;
    font-weight: bold;
    margin: 10px 0;
    text-rendering: optimizelegibility;
  }
  h2,h3 {
    color: gray;
  }
  header {
    margin-top:70px;
    margin-bottom: 50px;
  }
  header h1 {
    text-align: center;
    font-size:56px;
  }
  h1 i {
    color: rgb(182, 180, 180);
    font-style: normal;
    font-weight: normal;
  }

  span {
    position: absolute;
    display: inline-block;
  }

  a {
    color: #4183C4;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  strong {
    color: #424242;
  }

  .wrapper {
    width: 55%;
    padding: 20px;
    margin: 0 auto;
  }

  @media only screen and (max-width: 600px) {
    .wrapper {
      width: 95%;
    }
  }

  @media only screen and (max-width: 1120px) {
    .wrapper {
      width: 80%;
    }
  }

  .inputor {
    overflow: auto;
    height: 160px;
    width: 90%;
    border: 1px solid #dadada;
    border-radius: 4px;
    padding: 5px 8px;
    outline: 0 none;
    margin: 10px 0;
    background: white;
  }
  .inputor:focus {
    border: 1px solid rgb(6, 150, 247);
  }

  .github {
    text-align: center;
  }

  footer {
    margin: 30px 0;
  }

  .offset-box {
    border-right: 2px dashed gray;
    border-bottom: 2px dashed gray;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
  }
  .offset-box > .position-box {
    border-right: 2px dashed rgb(6, 150, 247);
    border-bottom: 2px dashed rgb(6, 150, 247);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10000;
  }
  .indicators > .offset-indicator {
    border: 1px solid gray;
    position: absolute;
    z-index: 999;
    padding: 0 3px;
    border-radius: 3px;
  } 
  .indicators > .position-indicator {
    border: 1px solid rgb(6, 150, 247);
    position: absolute;
    bottom: -50px;
    padding: 0 3px;
    border-radius: 3px;
  }

  </style>
</head>

<body>
  <div class="container wrapper">
    <!-- <a id="github" href="https://github.com/ichord/Caret.js" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0; z-index:999" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> -->
    <header>
      <h1>Caret<i>.js</i></h1>
    </header>

    <div id="main">
      <h2>Textarea</h2>
      <textarea id="input" class="inputor">


                          Type something here for fun!!

      </textarea>

      <h2>ContentEditable</h2>
      <div id="editable" class="inputor" contentEditable="true">
Hello, some <b>bold</b> and <i>italic</i> and <b><i>bold</i></b> text
      </div>

      <h2>iframe body</h2>
      <iframe id="iframe1" src="" class="inputor">
      </iframe>

      <div class="offset-box">
        <div class="position-box"></div>
      </div>
      <div class="indicators">
        <div class="offset-indicator"></div>
        <div class="position-indicator"></div>
      </div>
      <footer>
        <h2>
          -> <a class="github" href="https://github.com/ichord/Caret.js">Fork me on GitHub!</a>
        </h2>
      </footer>
    </div>
  </div>
</body>

</html>