<!DOCTYPE html>
<html>

<head>
  <!-- Required meta tags-->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000">
  <!-- Your app title -->
  <title>批注系统</title>
  <!-- Path to Framework7 Library CSS -->
  <link rel="stylesheet" href="css/framework7.css">
  <link rel="stylesheet" href="css/framework7-icons.css">
  <link rel="stylesheet" href="css/style.css">
  <style>
    .ios .searchbar:after {
      background-color: white;
    }

    .ios .card {
      margin: 0.5rem 0 0 0;
    }

    .ios .navbar .left {
      margin-right: 0px;
    }

    .ios .navbar b,
    .ios .navbar .title {
      font-weight: 500;
    }

    p {
      font-size: 16px;
      line-height: 1.5rem;
    }

    .ios .navbar .title {
      font-size: 16px;
    }

    .cardcss {
      padding-bottom: 3px;
    }

    .ios .list .item-media+.item-inner {
      margin-left: 0;
    }

    .mark {
      font-size: 16px;
      margin-top: 16px;
    }
  </style>
</head>

<body>
  <!-- App root element -->
  <div id="app">
    <!-- 左侧边栏 -->
    <div class="panel panel-left panel-cover anpanel annotator">
      <div class="block" id="Mynote">
        <div id="ancontent">
          <div class="texbg">暂无批注</div>
        </div>
      </div>
    </div>

    <!-- Statusbar overlay -->
    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main">
      <!-- Initial Page, "data-name" contains page name -->
      <!-- 头部标题栏 -->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="left">
            <a href="#" class="item-link icon" id="back">
              <i class="icon f7-icons" style="font-size: 25px">chevron_left</i>
            </a>
          </div>
          <div class="title">
            <span id="title">可以失去一切,不能失去理想</span>
            <div class="stitle">
            </div>
          </div>

          <div class="right">
            <a href="#" class="icon link panel-open" data-panel="right">
            </a>
          </div>
        </div>
      </div>

      <!-- 工具栏 -->
      <div class="toolbar tabbar-labels">
        <div class="toolbar-inner">
          <!-- 工具栏标签 -->
          <a href="#" class="tab-link an-button popup-open" id="button0">
            <!-- Different icons for iOS and MD themes -->
            <i class="icon f7-icons ios-only">chat_fill</i>
            <span class="tabbar-label">背景高亮</span>
          </a>
          <a href="#" class="tab-link an-button popup-open" id="button1">
            <i class="icon f7-icons ios-only">help_fill</i>
            <span class="tabbar-label">文字高亮</span>
          </a>
          <a href="#" class="tab-link an-button popup-open" id="button2">
            <i class="icon f7-icons ios-only">heart_fill</i>
            <span class="tabbar-label">加粗</span>
          </a>
          <a href="#" class="tab-link an-button popup-open" id="button3">
            <i class="icon f7-icons ios-only">mic_fill</i>
            <span class="tabbar-label">下划线</span>
          </a>

        </div>
      </div>
      <!-- 内容区域 -->
      <div class="page-content">
        <div class="list media-list annotator">
          <ul>
            <li>
              <a href="#" class="item-link item-content class">
                <div class="item-media">
                  <img src="images/teacher.jpg" width="44" />
                </div>
                <div class="item-inner">
                  <div class="item-title">
                    <div class="item-title size-14" id="person">发布人:张晓飞老师</div>
                  </div>
                  <div class="item-subtitle size-14">教育工作者</div>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div id="txblock">
          <div class="block" id="box" style="color:black"></div>
        </div>
      </div>
      <!-- 弹出页面 -->
      <div class="popup popup5 annotator">
        <div class="block annotator">
          <p>
            <i class="icon f7-icons ios-only">help_fill</i> 修改批注</p>
          <blockquote class="blockquote bqcolor1" id="bqcolor">
            <p id="old"></p>
            <p id="sendID" style="display: none"></p>
          </blockquote>
          <p class="content">
            <i class="icon f7-icons ios-only">bookmark_fill</i> 批注内容</p>
          <!-- Close Popup -->
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <textarea placeholder="请输入批注" id="mod" cols="45" rows="6" class="textarea"></textarea>
          <p class="row">
            <button class="col-30 button button-fill panel-open popup-close" id="modadd">修改批注</button>
            <button class="button col-30  popup-close">取消</button>
          </p>
        </div>
      </div>


      <div class="popup popup0 annotator">
        <div class="block annotator">
          <p>
            <i class="icon f7-icons ios-only">chat_fill</i> 添加批注</p>
          <blockquote class="blockquote bqcolor0">
            <p id="selectedtxt0" class="text_overflow3"></p>
          </blockquote>
          <p class="content">
            <i class="icon f7-icons ios-only">bookmark_fill</i> 批注内容</p>
          <!-- Close Popup -->
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <textarea placeholder="请输入批注" id="note0" cols="45" rows="6" class="textarea"></textarea>
          <p class="row">
            <button class="col-30 button button-fill panel-open popup-close" id="add0">添加批注</button>
            <button class="button col-30  popup-close" onclick="getPassage('ture')">取消</button>
          </p>
        </div>
      </div>

      <div class="popup popup1 annotator">
        <div class="block annotator">
          <p>
            <i class="icon f7-icons ios-only">help_fill</i> 添加批注</p>
          <blockquote class="blockquote bqcolor1">
            <p id="selectedtxt1" class="text_overflow3"></p>
          </blockquote>
          <p class="content">
            <i class="icon f7-icons ios-only">bookmark_fill</i> 批注内容</p>
          <!-- Close Popup -->
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <textarea placeholder="请输入批注" id="note1" cols="45" rows="6" class="textarea"></textarea>
          <p class="row">
            <button class="col-30 button button-fill panel-open popup-close" id="add1">添加批注</button>
            <button class="button col-30  popup-close" onclick="getPassage('ture')">取消</button>
          </p>
        </div>
      </div>

      <div class="popup popup2 annotator">
        <div class="block annotator">
          <p>
            <i class="icon f7-icons ios-only">heart_fill</i> 添加批注</p>
          <blockquote class="blockquote bqcolor2">
            <p id="selectedtxt2" class="text_overflow3"></p>
          </blockquote>
          <p class="content">
            <i class="icon f7-icons ios-only">bookmark_fill</i> 批注内容</p>
          <!-- Close Popup -->
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <textarea placeholder="请输入批注" id="note2" cols="45" rows="6" class="textarea"></textarea>
          <p class="row">
            <button class="col-30 button button-fill panel-open popup-close" id="add2">添加批注</button>
            <button class="button col-30  popup-close" onclick="getPassage('ture')">取消</button>
          </p>
        </div>
      </div>

      <div class="popup popup3 annotator">
        <div class="block annotator">
          <p>
            <i class="icon f7-icons ios-only">mic_fill</i> 添加批注</p>
          <blockquote class="blockquote bqcolor3">
            <p id="selectedtxt3" class="text_overflow3"></p>
          </blockquote>
          <p class="content">
            <i class="icon f7-icons ios-only">bookmark_fill</i> 批注内容</p>
          <!-- Close Popup -->
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <textarea placeholder="请输入批注" id="note3" cols="45" rows="6" class="textarea"></textarea>
          <p class="row">
            <button class="col-30 button button-fill panel-open popup-close" id="add3">添加批注</button>
            <button class="button col-30  popup-close" onclick="getPassage('ture')">取消</button>
          </p>
        </div>
      </div>

      <div class="popup popup4 annotator">
        <div class="block annotator">
          <p>
            <i class="icon f7-icons ios-only">compose_fill</i> 添加批注</p>
          <blockquote class="blockquote bqcolor4">
            <p id="selectedtxt4" class="text_overflow3"></p>
          </blockquote>
          <p class="content">
            <i class="icon f7-icons ios-only">bookmark_fill</i> 批注内容</p>
          <!-- Close Popup -->
          <div class="item-media">
            <i class="icon demo-list-icon"></i>
          </div>
          <textarea placeholder="请输入批注" id="note4" cols="45" rows="6" class="textarea"></textarea>
          <p class="row">
            <button class="col-30 button button-fill panel-open popup-close" id="add4">添加批注</button>
            <button class="button col-30  popup-close" onclick="getPassage()">取消</button>
          </p>
        </div>
      </div>
    </div>
  </div>
  <script src="js/framework7.min.js"></script>
  <script src="js/app.js"></script>
  <script src="js/rangy-core.js"></script>
  <script src="js/rangy-classapplier.js"></script>
  <script src="js/jquery.min.js"></script>
  <script>
    // 返回按钮
    var back = document.getElementById("back");
    if (back) {
      back.addEventListener('touchstart', function () {
        window.history.back(-1);
      })
    };

    var reg = new RegExp("(^|&)id=([^&]*)(&|$)");
    var reg2 = new RegExp("(^|&)teacherId=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    var passageId = unescape(r[2]);
    var g = window.location.search.substr(1).match(reg2);
    var userId = unescape(g[2]);
  </script>
  <script>
   // 选中并传递到popup
var text;

function getString(n) {
  text = rangy.getSelection().toString();
  console.log(text);
  var string = 'selectedtxt' + n;
  var selectedtxt = document.getElementById(string);
  selectedtxt.innerText = text;
}

//将popu中的文字传递到侧边栏
function panel(m) {
  var leftID;
  var string = 'note' + m;
  var textarea = document.getElementById(string).value;  
  //ajax传递数据到后台并获得批注id
  app.request.post('http://212.64.11.56:8080/EAnnotation/addAnnotation', {
    content: textarea,
    paragraph: paragraph,
    start: start,
    end: end,
    type: type,
    userId: userId,
    passageId: passageId,
    selected: text
  }, function (data) {
    leftID = jQuery.parseJSON(data);
    $$('#ancontent').append(
      '<div class="card cardcss" id="' + leftID + '">' +
      '<blockquote class="blockquote bqcolor' + m + '" id="bq' + leftID + '">' +
      '<p>' + text + '</p>' +
      '</blockquote>' +
      '<div class="card-content cardct ">' +
      '<p  id="an' + leftID + '">' + textarea + '</p>' +
      '</div >' +
      '<div class="card-footer cgdel">' +
      '<a class="link popup-open" id="change" data-popup=".popup5" onclick="modify(' + leftID + ')">修改</a><a  class="link" id="delete" onclick="del(' + leftID + ')">删除</a>' +
      '</div>' +
      '</div>');
    document.getElementById(string).value = '';
  });
}


//获取选中文字的位置
var paragraph = 0;
var start;
var end;
var type;

function getLocation(n) {
  var userSelection;
  var par = 0;
  if (window.getSelection) { //现代浏览器
    userSelection = window.getSelection();
  }
  var getRangeObject = function (selectionObject) {
    if (selectionObject.getRangeAt)
      return selectionObject.getRangeAt(0);
    else { // 较老版本Safari!
      var range = document.createRange();
      range.setStart(selectionObject.anchorNode, selectionObject.anchorOffset);
      range.setEnd(selectionObject.focusNode, selectionObject.focusOffset);
      return range;
    }
  }
  var rangeObject = getRangeObject(userSelection);
  var p = rangeObject.startContainer.parentNode;
  while (p = p.previousSibling) {
    par++;
  }
  par = par + 1;
  paragraph = par;
  start = rangeObject.startOffset;
  console.log(start);
  end = rangeObject.endOffset;
  type = n;
}

//添加批注样式
function anPaint(bton) {
  rangy.init();
  var classApplierModule = rangy.modules.ClassApplier;
  if (true) {
    switch (bton) {
      case 0:
        cssApplier = rangy.createClassApplier("Bton0Backgrond",false);
        cssApplier.toggleSelection();
        break;
      case 1:
        cssApplier = rangy.createClassApplier("Bton1Backgrond", false);
        cssApplier.toggleSelection();
        break;
      case 2:
        cssApplier = rangy.createClassApplier("Bton2Backgrond", false);
        cssApplier.toggleSelection();
        break;
      case 3:
        cssApplier = rangy.createClassApplier("Bton3Backgrond", false);
        cssApplier.toggleSelection();
        break;
      case 4:
        cssApplier = rangy.createClassApplier("Bton4Backgrond", false);
        cssApplier.toggleSelection();
        break;
    }
  }
};
var ancount;  //统计批注数量,用于数量随时变化
//获取文章id
function getPassage(dele) { //dele用来标记是否需要重新渲染侧边栏
  $.ajax({
    url: 'http://212.64.11.56:8080/EAnnotation/getPassage?id=' + passageId,
    type: "post",
    success: function (data) {
      console.log(data.count);
      $("#title").html(data.title);
      $("#allantate").text(data.count);
      ancount = data.count;
      $("#box").html(data.content);
      $("#person").html('发布人:' + data.auth + '老师');
      getAnnotator(passageId, userId, dele);
    },
    error: function (e) {}
  })
};
window.onload = function () {
  getPassage()
}

var par, st, ed, type, anID, content, selected; //用于传递数据的参数

//从数据库获得json类型数据并解析
function getAnnotator(passageId, userId, dele) {
  app.request.get('http://212.64.11.56:8080/EAnnotation/getAnnotations?passageId=' + passageId + '&userId=' +
    userId,
    function (data) {
      var result = jQuery.parseJSON(data);
      each(result, dele);
    }, JSON);
}


// 从数据库取回数据后重新渲染批注
function each(result, dele) {
  $.each(result, function (i, item) {
    par = item.paragraph;
    st = item.start;
    ed = item.end;
    type = item.type;
    anID = item.id;
    content = item.content;
    selected = item.selected;
    annotate();
    if (dele != "ture") {
      rePanel();
    }
  })
}

function annotate() {
  var px = $$("#box p")[par - 1].firstChild;
  console.log(px);
  var range = rangy.createRange();
  range.setStart(px, st);
  range.setEnd(px, ed);
  range.select();
  switch (type) {
    case 0:
      cssApplier = rangy.createClassApplier("Bton0Backgrond", false);
      break;
    case 1:
      cssApplier = rangy.createClassApplier("Bton1Backgrond", false);
      break;
    case 2:
      cssApplier = rangy.createClassApplier("Bton2Backgrond", false);
      break;
    case 3:
      cssApplier = rangy.createClassApplier("Bton3Backgrond", false);
      break;
    case 4:
      cssApplier = rangy.createClassApplier("Bton4Backgrond", false);
      break;
  }
  cssApplier.toggleSelection();
  window.getSelection().removeAllRanges();
}

//渲染侧边栏批注
function rePanel() {
  var string = 'note' + type;
  var textarea = content;
  // $$('#ancontent').html('<div id="ancontent"><div class="texbg">暂无批注</div></div>');
  $$('#ancontent').append(
    '<div class="card cardcss" id="' + anID + '">' +
    '<blockquote class="blockquote bqcolor' + type + '" id="bq' + anID + '">' +
    '<p>' + selected + '</p>' +
    '</blockquote>' +
    '<div class="card-content cardct ">' +
    '<p  id="an' + anID + '">' + textarea + '</p>' +
    '</div >' +
    '<div class="card-footer">' +
    '<a class="link popup-open" id="change" data-popup=".popup5" onclick="modify(' + anID +
    ')">修改</a><a  class="link" id="delete" onclick="del(' + anID + ')">删除</a>' +
    '</div>' +
    '</div>');
  document.getElementById(string).value = '';
}

//删除批注
function del(delID) {
  $$('#' + delID).remove();
  //ajax传输给后台
  app.request.post('http://212.64.11.56:8080/EAnnotation/deleteAnnotation', {
    id: delID
  }, function (data) {
    var dele = "ture";
    getPassage(dele);
  })
};

//修改批注
function modify(modId) {
  var x = $$('#an' + modId).text(); //获取批注的文章内容
  var t = $$('#bq' + modId + '>p').text(); //获得原批注
  var bqcolor = $$('#bq' + modId).attr('class'); //获得颜色样式
  $$('#sendID').text(modId); //传递id
  $$('#old').text(t); //传递原批注
  $$('#mod').val(x); //传递文章内容到popup
  $$('#bqcolor').attr('class', bqcolor);
}

var ad = document.getElementById("modadd");
ad.addEventListener('touchstart', function () {
  add();
});

function add() {
  var nw = $$('#mod').val();
  var getID = $$('#sendID').text();
  $$('#an' + getID).text(nw);
  //ajax传输给后台
  app.request.post('http://212.64.11.56:8080/EAnnotation/updateAnnotation', {
    content: nw,
    id: getID
  }, function (data) {
    if (data.msg == "ture") {
      console.log("成功")
    }
  });
}

  var user;
    //获取登录者id
    $.ajax({
      url: 'http://212.64.11.56:8080/EAnnotation/getCurrentUser',
      type: 'post',
      dataType: 'jsonp',
      xhrFields: {
        withCredentials: true
      },
      crossDomain: true,
      success: function (data) {
        user = data;
      },
      error: function () {}
    })

// 底部工具栏按钮事件
var button0 = document.getElementById("button0");
button0.addEventListener('touchstart', function () {
  if (user == 0) {
    goload();
  } else {
    getString(0);
    anPaint(0);
    getLocation(0);
  }
  if(text && text != null){
    app.popup.open(".popup0")
  }
});

var botton1 = document.getElementById("button1");
button1.addEventListener('touchstart', function () {
  if (user == 0) {
    goload();
  } else {
    getString(1);
    anPaint(1);
    getLocation(1);
  }
  if(text && text != null){
    app.popup.open(".popup1")
  }
});

var botton2 = document.getElementById("button2");
button2.addEventListener('touchstart', function () {
  if (user == 0) {
    goload();
  } else {
    getString(2);
    anPaint(2);
    getLocation(2);
  }
  if(text && text != null){
    app.popup.open(".popup2")
  }
});

var botton3 = document.getElementById("button3");
button3.addEventListener('touchstart', function () {
  if (user == 0) {
    goload();
  } else {
    getString(3);
    anPaint(3);
    getLocation(3);
  }
  if(text && text != null){
    app.popup.open(".popup3")
  }
});

//添加批注按钮点击事件
var add0 = document.getElementById("add0");
add0.addEventListener('touchstart', function () {
  panel(0);
});

var add1 = document.getElementById("add1");
add1.addEventListener('touchstart', function () {
  panel(1);
});

var add2 = document.getElementById("add2");
add2.addEventListener('touchstart', function () {
  panel(2);
});

var add3 = document.getElementById("add3");
add3.addEventListener('touchstart', function () {
  panel(3);
});

// var add4 = document.getElementById("add4");
// add4.addEventListener('touchstart', function () {
//   panel(4);
//   ();
// });

//修改按钮
var change = document.getElementById("change");
change.addEventListener('touchstart', function () {
  anChange();
});

//删除按钮
var delbutn = document.getElementById("delete");
delbutn.addEventListener('touchstart', function () {
  del();
  refresh();
  rdNum();
});
  </script>
</body>

</html>