262 lines
8.8 KiB
JavaScript
262 lines
8.8 KiB
JavaScript
/**
|
|
* Copyright (C) 2015 Wasabeef
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
var RDisplay = {};
|
|
|
|
RDisplay.editor = document.getElementById('editor');
|
|
RDisplay.dataSeparator = "r_e_ds";
|
|
|
|
// Initializations
|
|
RDisplay.onBookToucheStart = function(ele){
|
|
ele.classList.add('re_bookItem_Touched');
|
|
}
|
|
RDisplay.onBookToucheEnd = function(ele){
|
|
ele.classList.remove('re_bookItem_Touched');
|
|
}
|
|
RDisplay.clickedBookId = null
|
|
|
|
RDisplay.onBookClick = function(ele){
|
|
var id = ele.getAttribute('data-id');
|
|
wereadBridge.handleWithRichEditor("onGotoBookDetail", {"data-id" : id}, "", "");
|
|
}
|
|
|
|
RDisplay.getClickedBookPosition = function() {
|
|
if(RDisplay.clickedBookId) {
|
|
var ele = document.getElementById(RDisplay.clickedBookId);
|
|
var position = RDisplay.getCoords(ele)
|
|
var position = {"top":position.top,"height":position.height,"width":position.width,"left":position.left}
|
|
var result = JSON.stringify(position)
|
|
return result
|
|
}
|
|
}
|
|
RDisplay.onImageClick = function(ele){
|
|
var src = ele.getAttribute('src');
|
|
var index = ele.getAttribute('index')
|
|
RDisplay.clickedBookId = ele.getAttribute('id');
|
|
var position = RDisplay.getCoords(ele)
|
|
wereadBridge.handleWithRichEditor("onGotoImageDetail", {"src" : src,"index":index,"top":position.top,"height":position.height,"width":position.width,"left":position.left}, "", "");
|
|
}
|
|
var reBookItems = document.querySelectorAll('.re_bookItem');
|
|
var reImgs = document.querySelectorAll('.re_img');
|
|
if(reBookItems.length > 0){
|
|
for(var i = 0; i<reBookItems.length; i++){
|
|
var bookItem = reBookItems[i];
|
|
bookItem.setAttribute('ontouchstart', 'RDisplay.onBookToucheStart(this)');
|
|
bookItem.setAttribute('ontouchend', 'RDisplay.onBookToucheEnd(this)');
|
|
bookItem.setAttribute('ontouchcancel', 'RDisplay.onBookToucheEnd(this)');
|
|
bookItem.setAttribute('onclick', 'RDisplay.onBookClick(this)');
|
|
}
|
|
}
|
|
if(reImgs.length > 0){
|
|
for(var i = 0; i<reImgs.length; i++){
|
|
var img = reImgs[i];
|
|
img.setAttribute('onclick', 'RDisplay.onImageClick(this)');
|
|
img.setAttribute('index', i.toString());
|
|
var idStr = "re_img_" + i
|
|
img.setAttribute('id',idStr);
|
|
}
|
|
}
|
|
|
|
RDisplay.getAllImgSrcs = function() {
|
|
|
|
srcArray = [];
|
|
var imgs = document.querySelectorAll('.re_img');
|
|
for (var i = 0; i < imgs.length; i++) {
|
|
srcArray.push(imgs[i].getAttribute('src'))
|
|
}
|
|
var srcs = "";
|
|
if (srcArray.length > 0) {
|
|
srcs = srcArray.join(RDisplay.dataSeparator);
|
|
}
|
|
|
|
return srcs;
|
|
}
|
|
|
|
// 获取当前光标的node
|
|
RDisplay.getSelectedNode = function() {
|
|
var node = RDisplay.getSelectedBaseNode();
|
|
if (node) { return (node.nodeName == "#text" ? node.parentNode : node); }
|
|
};
|
|
|
|
// 获取当前光标的node
|
|
RDisplay.getSelectedBaseNode = function() {
|
|
var node, selection;
|
|
if (window.getSelection) {
|
|
selection = getSelection();
|
|
node = selection.anchorNode; // 返回该选区起点所在的节点（Node）
|
|
}
|
|
if (!node && document.selection) {
|
|
selection = document.selection
|
|
var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
|
|
node = range.commonAncestorContainer ? range.commonAncestorContainer :
|
|
range.parentElement ? range.parentElement() : range.item(0);
|
|
}
|
|
return node;
|
|
};
|
|
|
|
RDisplay.setHtml = function(str){
|
|
document.getElementById('editor').innerHTML = str;
|
|
}
|
|
|
|
RDisplay.selected = function() {
|
|
RDisplay.editor.style.backgroundColor = 'rgba(238, 239, 241, 1)';
|
|
}
|
|
|
|
RDisplay.unselected = function() {
|
|
RDisplay.editor.style.backgroundColor = 'rgba(255, 255, 255, 1)';
|
|
}
|
|
|
|
RDisplay.logDom = null;
|
|
RDisplay.log = function(str){
|
|
if(RDisplay.logDom == null){
|
|
RDisplay.logDom = document.createElement('div');
|
|
RDisplay.logDom.setAttribute('style','position:absolute;top:0;right:0;font-size:12px;border:1px solid #000;color:#000;padding:3px');
|
|
document.getElementsByTagName('body')[0].appendChild(RDisplay.logDom);
|
|
}
|
|
RDisplay.logDom.innerHTML = RDisplay.logDom.innerHTML + "<br/>" + str;
|
|
}
|
|
|
|
document.addEventListener("selectionchange", function(e) {
|
|
RDisplay.contentChanged(e);
|
|
});
|
|
RDisplay.contentChanged = function(e) {
|
|
|
|
var param = {};
|
|
if (typeof(e) != "undefined") {
|
|
var node = RDisplay.getSelectedNode();
|
|
if (node) {
|
|
var nodeName = node.nodeName.toLowerCase();
|
|
|
|
// Link
|
|
if (nodeName == 'a') {
|
|
var title = node.getAttribute('title');
|
|
var href = node.getAttribute('href');
|
|
if (href != undefined) { param['link:'] = href; }
|
|
if (title !== undefined) { param['link-title'] = title; }
|
|
param['link-text'] = node.innerText;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
wereadBridge.handleWithRichEditor("onSelectionChange",param, "", "");
|
|
|
|
}
|
|
|
|
RDisplay.getCoords = function(elem) {
|
|
var box = elem.getBoundingClientRect();
|
|
|
|
var body = document.body;
|
|
var docEl = document.documentElement;
|
|
|
|
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
|
|
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
|
|
|
|
var clientTop = docEl.clientTop || body.clientTop || 0;
|
|
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
|
|
|
|
var top = box.top + scrollTop - clientTop;
|
|
var left = box.left + scrollLeft - clientLeft;
|
|
|
|
return {
|
|
top: Math.round(top),
|
|
left: Math.round(left),
|
|
height: box.height,
|
|
width: box.width
|
|
};
|
|
}
|
|
|
|
|
|
RDisplay.getLastImgSrc = function(){
|
|
var imgs = document.getElementsByTagName('img');
|
|
for(var i = imgs.length - 1;i >= 0;i--){
|
|
var img = imgs[i];
|
|
var src = img.getAttribute('src');
|
|
if(src && (src.indexOf('http:') == 0 || src.indexOf('https:') == 0 || src.indexOf('wrcachedwebviewurlkey-http:') == 0 || src.indexOf('wrcachedwebviewurlkey-https:') == 0)){
|
|
return src;
|
|
}
|
|
var data_src = img.getAttribute('data-src');
|
|
if(data_src && (data_src.indexOf('http:') == 0 || data_src.indexOf('https:') == 0 || data_src.indexOf('wrcachedwebviewurlkey-http:') == 0 || data_src.indexOf('wrcachedwebviewurlkey-https:') == 0)){
|
|
return data_src;
|
|
}
|
|
}
|
|
return '';
|
|
}
|
|
|
|
RDisplay.removeImgWithSrc = function(url) {
|
|
var imgs = document.getElementsByTagName('img');
|
|
for (var i = imgs.length - 1; i >= 0; i--) {
|
|
var img = imgs[i]
|
|
var data_src = img.getAttribute('data-src');
|
|
var src = img.getAttribute('src');
|
|
if(data_src === url || src === url) {
|
|
img.parentNode.removeChild(img);
|
|
}
|
|
}
|
|
}
|
|
|
|
RDisplay.getText = function() {
|
|
|
|
var tempDom = document.createElement('div');
|
|
// 过滤掉插入的书dom里的文字，这里需要过滤掉零宽连字符，不然牛逼的ios里面会出现乱码
|
|
tempDom.innerHTML = RDisplay.editor.innerHTML.replace(new RegExp('\u200D', 'g'), '')
|
|
.replace('<br>', '')
|
|
.replace('<br />', '');
|
|
// getText时将插入的书籍和图片转化成 [书籍] [图片]
|
|
var books = tempDom.querySelectorAll('.re_bookItem'),
|
|
imgs = tempDom.querySelectorAll('.re_img');
|
|
if(books.length > 0){
|
|
for(var i=0; i<books.length; i++){
|
|
var bookDom = books[i],
|
|
bookTextNode = document.createTextNode('[书籍]');
|
|
bookDom.parentNode.insertBefore(bookTextNode, bookDom);
|
|
bookDom.parentNode.removeChild(bookDom);
|
|
}
|
|
}
|
|
if(imgs.length > 0){
|
|
for(var i=0; i<imgs.length; i++){
|
|
var imgDom = imgs[i],
|
|
imgTextNode = document.createTextNode('[图片]');
|
|
imgDom.parentNode.insertBefore(imgTextNode, imgDom);
|
|
imgDom.parentNode.removeChild(imgDom);
|
|
}
|
|
}
|
|
return tempDom.innerText;
|
|
}
|
|
|
|
|
|
RDisplay.getHtmlForEpub = function() {
|
|
return RDisplay.editor.innerHTML;
|
|
}
|
|
|
|
RDisplay.getAllBookIds = function() {
|
|
var books = RE.editor.querySelectorAll('.re_bookItem'),
|
|
idArray = [];
|
|
for (var i = 0; i < books.length; i++) {
|
|
idArray.push(books[i].getAttribute('data-id'))
|
|
}
|
|
var bookIds = "";
|
|
if (idArray.length > 0) {
|
|
bookIds = idArray.join(RE.dataSeparator);
|
|
}
|
|
|
|
return bookIds;
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function(event) {
|
|
wereadBridge.handleWithRichEditor("onDOMContentLoaded", "", "", "");
|
|
});
|