vue实现全局搜索关键字+组件拖拽
全局搜索关键字功能1.js代码var enable_site_search = 0; // 0 = Don't enable; 1 = Enable site search along with page searchvar find_window_background = 'white' // the color of the pop-up windowvar find_window_borde
·
全局搜索关键字功能
1.js代码
var enable_site_search = 0; // 0 = Don't enable; 1 = Enable site search along with page search
var find_window_background = 'white' // the color of the pop-up window
var find_window_border = "gray"; // the border color of pop-up window
var find_text_color = "black"; // the color of the text in window
var find_title_color = "white"; // color of window title text
var find_window_width = 365; // width of window
var find_window_padding_top_height = 70 // 与窗口顶部的最高 相隔高度
// var find_window_height = 85; // height of window - Version 5.3f - No Longer Using
var find_root_node = null; // Leave as null to search entire doc or put id of div to search (ex: 'content'). Ver 5.0a - 7/18/2014
var find_text_inter_span = '/' // 找出文字个数的中间连接符
// Simple drag object to hold all the variables for dragging
var drag = { mousex: 0, mousey: 0, tempx: '', tempy: '', isdrag: false, drag_obj: null, drag_obj_x: 0, drag_obj_y: 0 };
var find_timer = 0; // used for timer to move window in IE when scrolling
// Create highlights array to hold each new span element
var highlights = [];
// Which find are we currently highlighting
var find_pointer = -1;
var find_text = ''; // Global variable of searched for text
var found_highlight_rule = 0; // whether there is a highlight css rule
var found_selected_rule = 0; // whether there is a selected css rule
document.onmousedown = MouseDown;
document.onmousemove = MouseMove;
document.onmouseup = MouseUp;
document.ontouchstart = MouseDown;
document.ontouchmove = MouseMove;
document.ontouchend = MouseUp;
function highlight(word, node) {
if (!node)
node = document.body;
// var re = new RegExp(word, "i"); // regular expression of the search term // Ver 5.3c - Not using regular expressions search now
for (node = node.firstChild; node; node = node.nextSibling) {
// console.log(node.nodeName);
if (node.nodeType == 3) { // text node
var n = node;
// console.log(n.nodeValue);
var match_pos = 0;
// for (match_pos; match_pos > -1; n=after)
{
// match_pos = n.nodeValue.search(re); // Ver 5.3b - Now NOT using regular expression because couldn't search for $ or ^
match_pos = n.nodeValue.toLowerCase().indexOf(word.toLowerCase()); // Ver 5.3b - Using toLowerCase().indexOf instead
if (match_pos > -1) // if we found a match
{
var before = n.nodeValue.substr(0, match_pos); // split into a part before the match
var middle = n.nodeValue.substr(match_pos, word.length); // the matched word to preserve case
//var after = n.splitText(match_pos+word.length);
var after = document.createTextNode(n.nodeValue.substr(match_pos + word.length)); // and the part after the match
var highlight_span = document.createElement("span"); // create a span in the middle
if (found_highlight_rule == 1)
highlight_span.className = "highlight";
else
highlight_span.style.backgroundColor = "yellow";
highlight_span.style.padding = '0px !import'
highlight_span.style.margin = '0 !import'
highlight_span.appendChild(document.createTextNode(middle)); // insert word as textNode in new span
n.nodeValue = before; // Turn node data into before
n.parentNode.insertBefore(after, n.nextSibling); // insert after
n.parentNode.insertBefore(highlight_span, n.nextSibling); // insert new span
highlights.push(highlight_span); // add new span to highlights array
highlight_span.id = "highlight_span" + highlights.length;
node = node.nextSibling; // Advance to next node or we get stuck in a loop because we created a span (child)
}
}
}
else // if not text node then it must be another element
{
// nodeType 1 = element 原 matcher = /textarea|input/i 让input不支持搜索,现在把input从正则中去除,这个是定制化需求,看个人需要来改
if (node.nodeType == 1 && node.nodeName.match(/textarea/i) && node.type.match(/textarea|text|number|search|email|url|tel/i) && !getStyle(node, "display").match(/none/i))
textarea2pre(node);
else {
if (node.nodeType == 1 && !getStyle(node, "visibility").match(/hidden/i)) // Dont search in hidden elements
if (node.nodeType == 1 && !getStyle(node, "display").match(/none/i)) // Dont search in display:none elements
highlight(word, node);
}
}
}
} // end function highlight(word, node)
function unhighlight() {
for (var i = 0; i < highlights.length; i++) {
var the_text_node = highlights[i].firstChild; // firstChild is the textnode in the highlighted span
var parent_node = highlights[i].parentNode; // the parent element of the highlighted span
// First replace each span with its text node nodeValue
if (highlights[i].parentNode) {
highlights[i].parentNode.replaceChild(the_text_node, highlights[i]);
if (i == find_pointer) selectElementContents(the_text_node); // ver 5.1 - 10/17/2014 - select current find
parent_node.normalize(); // The normalize() method removes empty Text nodes, and joins adjacent Text nodes in an element
normalize(parent_node); // Ver 5.2 - 3/10/2015 - normalize() is incorrect in IE. It will combine text nodes but may leave empty text nodes. So added normalize(node) function below
}
}
// Now reset highlights array
highlights = [];
find_pointer = -1; // ver 5.1 - 10/17/2014
} // end function unhighlight()
function normalize (node) {
// http://stackoverflow.com/questions/22337498/why-does-ie11-handle-node-normalize-incorrectly-for-the-minus-symbol
if (!node) { return }
if (node.nodeType == 3) {
while (node.nextSibling && node.nextSibling.nodeType == 3) {
node.nodeValue += node.nextSibling.nodeValue
node.parentNode.removeChild(node.nextSibling)
}
} else {
normalize(node.firstChild)
}
normalize(node.nextSibling)
}
function findit () {
// put the value of the textbox in string
var string = document.getElementById('fwtext').value
// Version 5.4 - Site search
if (enable_site_search && document.getElementById('find_site_search').checked) {
var website = window.location.hostname; // Or replace with your website. Ex: example.com
var url = "https://www.google.com/search?q=site%3A" + website + "+" + string;
window.open(url, "coolfind");
return;
}
// 8-9-2010 Turn DIV to hidden just while searching so doesn't find the text in the window
findwindow.style.visibility = 'hidden';
//findwindow.style.display = 'none';
// if the text has not been changed and we have previous finds
if (find_text.toLowerCase() == document.getElementById('fwtext').value.toLowerCase() &&
find_pointer >= 0) {
findnext(); // Find the next occurrence
}
else {
unhighlight(); // Remove highlights of any previous finds
if (string == '') // if empty string
{
find_msg.innerHTML = "";
findwindow.style.visibility = 'visible';
return;
}
find_text = string;
// Ver 5.0a - 7/18/2014. Next four lines because find_root_node won't exist until doc loads
if (find_root_node != null)
var node = document.getElementById(find_root_node);
else
var node = null;
highlight(string, node); // highlight all occurrences of search string
if (highlights.length > 0) // if we found occurences
{
find_pointer = -1;
findnext(); // Find first occurrence
}
else {
find_msg.innerHTML = " <b>0 " + find_text_inter_span + " 0</b>"; // ver 5.1 - 10/17/2014 - changed from "Not Found"
find_pointer = -1;
}
}
findwindow.style.visibility = 'visible';
//findwindow.style.display = 'block';
} // end function findit()
function findnext() {
console.log('--------findnext', find_pointer);
var current_find;
if (find_pointer != -1) // if not first find
{
current_find = highlights[find_pointer];
// Turn current find back to yellow
if (found_highlight_rule == 1)
current_find.className = "highlight";
else
current_find.style.backgroundColor = "yellow";
}
find_pointer++;
if (find_pointer >= highlights.length) // if we reached the end
find_pointer = 0; // go back to first find
var display_find = find_pointer + 1;
find_msg.innerHTML = display_find + " " + find_text_inter_span + " " + highlights.length;
current_find = highlights[find_pointer];
// Turn selected find orange or add .find_selected css class to it
if (found_selected_rule == 1)
current_find.className = "find_selected";
else
current_find.style.backgroundColor = "#e76452";
//highlights[find_pointer].scrollIntoView(); // Scroll to selected element
scrollToPosition(highlights[find_pointer]);
} // end findnext()
// This function is to find backwards by pressing the Prev button
function findprev() {
console.log('--------findprev', find_pointer);
var current_find;
if (highlights.length < 1) {
return;
}
if (find_pointer != -1) // if not first find
{
current_find = highlights[find_pointer];
// Turn current find back to yellow
if (found_highlight_rule == 1)
current_find.className = "highlight";
else
current_find.style.backgroundColor = "yellow";
}
find_pointer--;
if (find_pointer < 0) // if we reached the beginning
find_pointer = highlights.length - 1; // go back to last find
var display_find = find_pointer + 1;
find_msg.innerHTML = display_find + " " + find_text_inter_span + " " + highlights.length;
current_find = highlights[find_pointer];
// Turn selected find orange or add .find_selected css class to it
if (found_selected_rule == 1)
current_find.className = "find_selected";
else
current_find.style.backgroundColor = "#e76452";
//highlights[find_pointer].scrollIntoView(); // Scroll to selected element
scrollToPosition(highlights[find_pointer]);
} // end findprev()
// This function looks for the ENTER key (13)
// while the find window is open, so that if the user
// presses ENTER it will do the find next
function checkkey(e) {
var keycode;
if (window.event) // if ie
keycode = window.event.keyCode;
else // if Firefox or Netscape
keycode = e.which;
//find_msg.innerHTML = keycode;
if (keycode == 13) // if ENTER key
{
// ver 5.1 - 10/17/2014 - Blur on search so keyboard closes on iphone and android
if (window.event && event.srcElement.id.match(/fwtext/i)) event.srcElement.blur();
else if (e && e.target.id.match(/fwtext/i)) e.target.blur();
findit(); // call findit() function (like pressing NEXT)
}
else if (keycode == 27) // ESC key // Ver 5.1 - 10/17/2014
{
hide(); // Close find window on escape key pressed
}
} // end function checkkey()
// This function makes the findwindow DIV visible
// so they can type in what they want to search for
function show() {
// Object to hold textbox so we can focus on it
// so user can just start typing after "find" button
// is clicked
var textbox = document.getElementById('fwtext');
// Make the find window visible
findwindow.style.visibility = 'visible';
//fwtext.style.visibility = 'visible';
// Put cursor focus in the text box
textbox.focus();
textbox.select(); // ver 5.1 - 10/17/2014 - Select the text to search for
textbox.setSelectionRange(0, 9999); // ver. 5.3 - 5/15/2015 - iOS woould not select without this
// Call timer to move textbox in case they scroll the window
// 关闭移动窗口
// find_timer = setInterval('move_window();', 500);
// Setup to look for keypresses while window is open
document.onkeydown = checkkey;
} // end function show()
// This function makes the findwindow DIV hidden
// for when they click on close
function hide() {
console.log('****hide');
unhighlight(); // Remove highlights of any previous finds - ver 5.1 - 10/17/2014
findwindow.style.display = 'none';
// turn off timer to move window on scrolling
clearTimeout(find_timer);
// Make document no longer look for enter key
document.onkeydown = null;
} // end function hide()
// This function resets the txt selection pointer to the
// beginning of the body so that we can search from the
// beginning for the new search string when somebody
// enters new text in the find box
function resettext() {
console.log('changevalue++')
if (find_text.toLowerCase() != document.getElementById('fwtext').value.toLowerCase())
unhighlight(); // Remove highlights of any previous finds
} // end function resettext()
// This function makes the find window jump back into view
// if they scroll while it is open or if the page automatically
// scrolls when it is hightlighting the next found text
function move_window() {
//var findwindow = document.getElementById('findwindow');
// get current left, top and height of find_window
var fwtop = parseFloat(findwindow.style.top);
var fwleft = parseFloat(findwindow.style.left);
// var fwheight = parseFloat(findwindow.style.height); // Version 5.3f - Was returning NaN in Chrome - changed to below
var fwheight = parseFloat(findwindow.offsetHeight); // Version 5.3f
// get current top and bottom position of browser screen
if (document.documentElement.scrollTop) // Needed if you use doctype loose.htm
var current_top = document.documentElement.scrollTop;
else
var current_top = document.body.scrollTop;
// ver 2.3c 9/14/2013
var current_bottom = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) + current_top;
// get current left and right position of browser
if (document.documentElement.scrollLeft) // Needed if you use doctype loose.htm
var current_left = document.documentElement.scrollLeft;
else
var current_left = document.body.scrollLeft;
// ver 2.3c 9/14/2013
var current_right = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) + current_left;
//find_msg.innerHTML = current_right + ',' + current_left;
// Only move window if it is out of the view
if (fwtop < current_top) {
// 如果高度小于 固定高度,重新定位
// move window to current_top
findwindow.style.top = current_top + find_window_padding_top_height + 'px';
}
else if (fwtop > current_top + find_window_padding_top_height) {
// 如果高度大于 固定高度,重新定位
findwindow.style.top = current_top + find_window_padding_top_height + 'px';
}
else if (fwtop > current_bottom - fwheight) {
// move to current_bottom
findwindow.style.top = current_top + find_window_padding_top_height + 'px';
// findwindow.style.top = current_bottom - fwheight + 'px';
}
// Only move left position if out of view
if (fwleft < current_left ||
fwleft > current_right) {
findwindow.style.left = current_left + 'px';
}
}
function MouseDown(event) {
drag.tempx = drag.tempy = ''; // For single click on object
if (!event) event = window.event; // 10/5/2014 - ver 5.0d - for older IE <= 9
var fobj = event.target || event.srcElement; // The element being clicked on (FF || IE)
// get current screen scrollTop and ScrollLeft
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// ver 5.1 - 10/17/2014 - Let users highlight textareas and inputs by not dragging them
if (typeof fobj.nodeName != "undefined")
if (fobj.nodeName.toLowerCase() == "input" ||
fobj.nodeName.toLowerCase() == "textarea")
return true;
// If parent or grandparents of obj is a dragme item then make the parent the fobj
for (fobj; fobj; fobj = fobj.parentNode) {
// 7/30/2014 ver 5.0b
if (fobj.className)
if (String(fobj.className).match(/dragme/i))
break;
}
// If parent of obj is a dragme item then make the parent the fobj
/*if (fobj.parentNode.className)
if (fobj.parentNode.className.match(/dragme/i))
fobj = fobj.parentNode;*/
if (fobj) // 7/30/2014 ver 5.0b
if (fobj.className.match(/dragme/i)) // Only drag objects that have class="dragme"
{
//fobj.style.zIndex = parseInt(getStyle(fobj, "z-index"))+1; // Make sure dragged object is in front
// ^ ver 5.1 - 10/17/2014 - May have caused IE 8 Invalid Argument
// If there was a previous object dragged then push it back on the screen
//if (drag.drag_obj)
// drag.drag_obj.style.zIndex = parseInt(getStyle(fobj, "z-index"))-1;
// ^ ver 5.1 - 10/17/2014 - May have caused IE 8 Invalid Argument
//if (document.getElementById('find_msg'))
// document.getElementById('find_msg').innerHTML = getStyle(fobj, "z-index");
drag.isdrag = true; // Tell mouseMove we are dragging
drag.drag_obj = fobj; // Put dragged element into global variable
drag.drag_obj_x = parseInt(drag.drag_obj.offsetLeft); // get current x of element
drag.drag_obj_y = parseInt(drag.drag_obj.offsetTop); // get current y of element
// Add scrollTop and scrollLeft to recorded mouse position
drag.mousex = event.clientX + scrollLeft;
drag.mousey = event.clientY + scrollTop;
/* if touchevents from iphone */
if (event.type == "touchstart")
if (event.touches.length == 1) { // Only deal with one finger
var touch = event.touches[0]; // Get the information for finger #1
var node = touch.target; // Find the node the drag started from (redundant)
// node.style.position = "absolute";
drag.mousex = touch.pageX; // includes scroll offset
drag.mousey = touch.pageY; // includes scroll offset
}
return true; // 8/25/2014 version 5.0c (Now all buttons and onclick work on iphone and android)
}
} // end function MouseDown(event)
function MouseMove(event) {
if (drag.isdrag) {
// Use 'event' above because IE only uses event and FF can use anything
if (!event) event = window.event; // 10/5/2014 - ver 5.0d - for older IE <= 9
drag.tempx = event.clientX; // record new mouse position x
drag.tempy = event.clientY; // record new mouse position y
// get current screen scrollTop and ScrollLeft
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// Add scrollTop and scrollLeft to drag.tempx and drag.tempy
drag.tempx += scrollLeft;
drag.tempy += scrollTop;
drag.drag_obj.style.position = 'absolute';
/* if touchevents from iphone */
if (event.type == "touchmove")
if (event.touches.length == 1) { // Only deal with one finger
var touch = event.touches[0]; // Get the information for finger #1
var node = touch.target; // Find the node the drag started from
// node.style.position = "absolute";
drag.tempx = touch.pageX; // includes scroll offset
drag.tempy = touch.pageY; // includes scroll offset
}
//if (document.getElementById('find_msg'))
// document.getElementById('find_msg').innerHTML = drag.tempx+", "+drag.tempy;
// Dragged element position = old position + new mouse position - old mouse position
drag.drag_obj.style.left = drag.drag_obj_x + drag.tempx - drag.mousex + "px"; // 7/30/2014 ver 5.0b
drag.drag_obj.style.top = drag.drag_obj_y + drag.tempy - drag.mousey + "px"; // 7/30/2014 ver 5.0b
return false;
}
} // end function MouseMove(event)
function MouseUp() {
if (drag.isdrag == true) {
if (drag.tempx == '' && drag.tempy == '') {
//if (document.getElementById('find_msg'))
// document.getElementById('find_msg').innerHTML += " You clicked!";
}
}
drag.isdrag = false;
}
function isOnScreen(el) // Version 5.4d
{
/* This checks to see if an element is within the current user viewport or not */
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // Version 1.2.0
var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // Version 1.2.0
var scrollBottom = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) + scrollTop;
var scrollRight = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) + scrollLeft;
var onScreen = false;
/* New way: el.getBoundingClientRect always returns
left, top, right, bottom of
an element relative to the current screen viewport */
var rect = el.getBoundingClientRect();
if (rect.bottom >= 0 && rect.right >= 0 &&
rect.top <= screenHeight && rect.left <= screenWidth) // Version 1.2.0 - Changed from scrollBottom and scrollRight
return true;
else {
// Verison 1.0.2 - Calculate how many pixels it is offscreen
var distance = Math.min(Math.abs(rect.bottom), Math.abs(rect.right), Math.abs(rect.top - screenHeight), Math.abs(rect.left - screenWidth));
return -Math.abs(distance); // Version 1.0.2 - Return distance as a negative. Used to return false if off screen
}
}
function scrollToPosition(field) {
console.log('scrollToPosition-----------', field)
// This function scrolls to the DIV called 'edited'
// It is called with onload. 'edited' only exists if
// they just edited a comment or the last comment
// if they just sent a comment
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollBottom = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) + scrollTop;
var scrollRight = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) + scrollLeft;
if (field) {
if (isOnScreen(field) != true) // Version 5.4d
{
//window.scrollTo(elemPosX ,elemPosY);
var isSmoothScrollSupported = 'scrollBehavior' in document.documentElement.style;
if (isSmoothScrollSupported) {
field.scrollIntoView();
} else {
//fallback to prevent browser crashing
field.scrollIntoView(false);
}
}
//window.scrollTo((field.getBoundingClientRect().left + scrollLeft) - ((scrollRight-scrollLeft)/2), (field.getBoundingClientRect().top + scrollTop) - ((scrollBottom-scrollTop)/2));
}
} // end function scrollToPosition()
/* It is not possible to get certain styles set in css such as display using
the normal javascript. So we have to use this function taken from:
http://www.quirksmode.org/dom/getstyles.html */
function getStyle(el, styleProp) {
// if el is a string of the id or the actual object of the element
var x = (document.getElementById(el)) ? document.getElementById(el) : el;
if (x.currentStyle) // IE
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle) // FF
var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
return y;
}
function create_div2(dleft, dtop, dwidth, dheight) {
if (document.documentElement.scrollTop) // Needed if you use doctype loose.htm
var current_top = document.documentElement.scrollTop;
else
var current_top = document.body.scrollTop;
if (document.getElementById('findwindow')) {
findwindow = document.getElementById('findwindow');
//win_iframe = document.getElementById('win_iframe');
}
else {
findwindow.id = "findwindow";
findwindow.style.position = 'absolute';
document.body.appendChild(findwindow);
document.body.insertBefore(findwindow, document.body.firstChild);
findwindow.className = 'findwindow dragme';
findwindow.style.visibility = 'hidden';
}
var winLeft = document.body.offsetWidth
findwindow.style.backgroundColor = find_window_background;
findwindow.style.border = '2px solid ' + find_window_border;
findwindow.style.borderRadius = '4px'
findwindow.style.color = find_text_color;
findwindow.style.width = find_window_width + 'px';
//findwindow.style.height = + find_window_height + 'px'; // Version 5.3f - No longer using
findwindow.style.top = '63px';
findwindow.style.left = (winLeft - find_window_width - 280) + 'px';
findwindow.style.padding = '0px';
findwindow.style.zIndex = 2000;
findwindow.style.fontSize = '14px';
findwindow.style.overflowX = 'hidden';
//findwindow.style.display = "block";
// This part creates the title bar
var string = '<div style="text-align: center'
+ ';width: ' + (find_window_width - 20) + 'px'
+ ';cursor: move' // turn mouse arrow to move icon
+ ';color: ' + find_title_color
+ ';border: 1px solid ' + find_text_color
+ ';font-weight:bold;font-style:italic'
+ ';float: left'
+ ';" οnmοuseοver="over=1;" οnmοuseοut="over=0;">'
+ '搜索窗口</div>';
// This part creates the closing X
string += '<div οnclick="hide();" class="close" style="text-align: center'
+ ';width: ' + (16) + 'px'
+ ';cursor: default' // make mouse arrow stay an arrow instead of turning to text arrow
+ ';font-weight: bold'
+ ';font-weight:bold'
+ '; border: 1px solid ' + find_text_color
+ ';float: right'
+ ';">'
+ 'X' // write the letter X
+ '</div><br />\n';
// This part creates the instructions and the "find" button
string += '<div id="window_body" style="padding: 5px;">'
+ '<form><input type="search" size="25" maxlength="25"' +
' class="el-input__inner el-input el-input--small" id="fwtext"'
+ ' οnchange="resettext(); findit();" placeholder="搜索文本">'
+ '<input type="button" class="el-button filter-item el-button--primary el-button--small" value="下一个" οnclick="this.blur(); findit();">' // ver 5.3 - 5/15/2015 - added this.blur();
+ '<input type="button" class="el-button filter-item el-button--primary el-button--small" value="上一个" οnclick="findprev();">'
+ ' <span id="find_msg"><br /></span>';
if (enable_site_search) { // Version 5.4
string += '<br /><label><input type="radio" name="search_type" value="page" checked>Page</label>' +
'<label><input type="radio" name="search_type" value="site" id="find_site_search">Site</label>';
}
string += '</form></div>\n';
// ^ ver 5.1 - 10/17/2014
findwindow.innerHTML = string;
// Check to see if css rules exist for hightlight and find_selected.
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
// IE <= 8 uses rules; FF & Chrome and IE 9+ users cssRules
try { // Version 5.4c - Fix Firefox "InvalidAccessError: A parameter or an operation is not supported by the underlying object" bug
var rules = (sheets[i].rules) ? sheets[i].rules : sheets[i].cssRules;
if (rules != null)
for (var j = 0; j < rules.length; j++) {
if (rules[j].selectorText == '.highlight')
found_highlight_rule = 1;
else if (rules[j].selectorText == '.find_selected')
found_selected_rule = 1;
}
}
catch (error) {
console.error("Caught Firefox CSS loading error: " + error);
}
}
} // end function create_div()
function create_div_html(dleft, dtop, dwidth, dheight) {
// debugger
console.log('enter this method create_div_html')
if (document.documentElement.scrollTop) // Needed if you use doctype loose.htm
var current_top = document.documentElement.scrollTop;
else
var current_top = document.body.scrollTop;
if (document.getElementById('findwindow')) {
console.log('have find findwindow')
findwindow = document.getElementById('findwindow');
//win_iframe = document.getElementById('win_iframe');
}
else {
findwindow.id = "findwindow";
findwindow.style.position = 'absolute';
document.body.appendChild(findwindow);
document.body.insertBefore(findwindow, document.body.firstChild);
findwindow.className = 'findwindow dragme';
findwindow.style.display = 'block';
}
var winLeft = document.body.offsetWidth
// findwindow.style.backgroundColor = find_window_background;
// findwindow.style.border = '2px solid ' + find_window_border;
// findwindow.style.borderRadius = '4px'
findwindow.style.color = find_text_color;
findwindow.style.width = find_window_width + 'px';
// findwindow.style.height = + find_window_height + 'px'; // Version 5.3f - No longer using
// findwindow.style.top = '63px';
// findwindow.style.left = (winLeft - find_window_width - 280) + 'px' ;
findwindow.style.padding = '0px';
findwindow.style.zIndex = 2000;
findwindow.style.fontSize = '14px';
findwindow.className = 'el-input__inner el-input el-input--small'
findwindow.style.marginTop = '8px'
// findwindow.style.overflowX = 'hidden';
//findwindow.style.display = "block";
// This part creates the title bar
var string = '';
// This part creates the instructions and the "find" button
string += '<div id="window_body" style="padding-left: 15px;">'
+ '<form><div style="float:left;padding: 3px;"><input type="search" size="20" maxlength="20"' +
' class="el-input__inner el-input el-input--small paperview-input-text" ' +
' style="float:left;width: 200px;margin-left: -15px;margin-right: 10px;border: 0px;background-image: none;" id="fwtext"'
+ ' placeholder="请输入关键字"/>'
+ '<button type="button" class="el-button el-button--text el-button--small" style="float:left;border-right: 1px solid #DCDFE6;border-radius: 0px;width: 73px;height: 30px;word-break:break-all;" id="find_msg"/>'
+ '<button type="button" class="el-button el-button--text el-button--small el-icon-arrow-down" style="float:left;" οnclick="this.blur(); findit();"/>' // ver 5.3 - 5/15/2015 - added this.blur();
+ '<button type="button" class="el-button el-button--text el-button--small el-icon-arrow-up" style="float:left;" οnclick="findprev();"/>'
+ '<button type="button" class="el-button el-button--text el-button--small el-icon-close" style="float:left;" οnclick="hide();" id="close-search"/>'
+ '</div>';
if (enable_site_search) { // Version 5.4
string += '<br /><label><input type="radio" name="search_type" value="page" checked>Page</label>' +
'<label><input type="radio" name="search_type" value="site" id="find_site_search">Site</label>';
}
string += '</form></div>\n';
// ^ ver 5.1 - 10/17/2014
findwindow.innerHTML = string;
// search input 实时监听文本内容变化 , 一直输入一直搜索,比onchange失去焦点搜索好一点
var fwtextDom = document.getElementById("fwtext");
if (document.all) {
// ie浏览器的监听事件
console.log('onpropertychange method only for IE')
fwtextDom.onpropertychange = function (ev) {
findit();
// findit方法会如果网页中找不到search txt会失去 鼠标输入焦点,变得不可以再输入,需要设置find_pointer为一直到不到元素,才不会失去焦点
find_pointer = -1;
}
} else {
// 其他浏览器的监听事件
console.log('oninput method for Chrome and other except IE')
fwtextDom.oninput = function (ev) {
findit();
// findit方法会如果网页中找不到search txt会失去 鼠标输入焦点,变得不可以再输入,需要设置find_pointer为一直到不到元素,才不会失去焦点
find_pointer = -1;
}
}
// Check to see if css rules exist for hightlight and find_selected.
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
// IE <= 8 uses rules; FF & Chrome and IE 9+ users cssRules
try { // Version 5.4c - Fix Firefox "InvalidAccessError: A parameter or an operation is not supported by the underlying object" bug
var rules = (sheets[i].rules) ? sheets[i].rules : sheets[i].cssRules;
if (rules != null)
for (var j = 0; j < rules.length; j++) {
if (rules[j].selectorText == '.highlight')
found_highlight_rule = 1;
else if (rules[j].selectorText == '.find_selected')
found_selected_rule = 1;
}
}
catch (error) {
console.error("Caught Firefox CSS loading error: " + error);
}
}
return string
}
function textarea2pre(el) {
// el is the textarea element
// If a pre has already been created for this textarea element then use it
if (el.nextSibling && el.nextSibling.id && el.nextSibling.id.match(/pre_/i))
var pre = el.nextsibling;
else
var pre = document.createElement("pre");
var the_text = el.value; // All the text in the textarea
// replace <>" with entities
the_text = the_text.replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '"');
//var text_node = document.createTextNode(the_text); // create text node for pre with text in it
//pre.appendChild(text_node); // add text_node to pre
pre.innerHTML = the_text;
// Copy the complete HTML style from the textarea to the pre
var completeStyle = "";
if (typeof getComputedStyle !== 'undefined') // webkit
{
completeStyle = window.getComputedStyle(el, null).cssText;
if (completeStyle != "") // Verison 5.3f - Is empty in IE 10 and Firefox
pre.style.cssText = completeStyle; // Everything copies fine in Chrome
else { // Version 5.3f - Because cssText is empty in IE 10 and Firefox
var style = window.getComputedStyle(el, null);
for (var i = 0; i < style.length; i++) {
completeStyle += style[i] + ": " + style.getPropertyValue(style[i]) + "; ";
}
pre.style.cssText = completeStyle;
}
}
else if (el.currentStyle) // IE
{
var elStyle = el.currentStyle;
for (var k in elStyle) { completeStyle += k + ":" + elStyle[k] + ";"; }
//pre.style.cssText = completeStyle;
pre.style.border = "1px solid black"; // border not copying correctly in IE
}
el.parentNode.insertBefore(pre, el.nextSibling); // insert pre after textarea
// If textarea blur then turn pre back on and textarea off
el.onblur = function () { this.style.display = "none"; pre.style.display = "block"; };
// If textarea changes then put new value back in pre
el.onchange = function () { pre.innerHTML = el.value.replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '"'); };
el.style.display = "none"; // hide textarea
pre.id = "pre_" + highlights.length; // Add id to pre
// Set onclick to turn pre off and turn textarea back on and perform a click on the textarea
// for a possible οnclick="this.select()" for the textarea
pre.onclick = function () { this.style.display = "none"; el.style.display = "block"; el.focus(); el.click() };
// this.parentNode.removeChild(this); // old remove pre in onclick function above
} // end function textarea2pre(el)
// ver 5.1 - 10/17/2014
function selectElementContents(el) {
/* http://stackoverflow.com/questions/8019534/how-can-i-use-javascript-to-select-text-in-a-pre-node-block */
if (window.getSelection && document.createRange) {
// IE 9 and non-IE
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.body.createTextRange) {
// IE < 9
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.select();
//textRange.execCommand("Copy");
}
} // end function selectElementContents(el)
// This part creates a visible button on the HTML page to
// where the script is pasted in the HTML code
// document.write('<input type="button" value="Find on this page..."'
// + ' οnclick="show();">');
// Create the DIV
var findwindow = document.createElement("div");
// setTimeout("initFindWin()", 5000)
// 启动初始化函数,必须要在插件渲染完成之后再初始化,不然就会创建新的div函数,所以vue使用 mounted 初始化
function initFindWin() {
// 创建窗口方法1 默认样式
// create_div2();
// 创建窗口方法2 定制化样式
create_div_html();
/* 10/5/2015 - To not have a find window that opens but rather to
have the find box displayed in the page:
1. Comment out lines 314, 315, 774, 775 and 779
2. Uncomment all the lines below:
*/
/*var find_content = '<div id="window_body" style="padding: 5px;">'
+ 'Type in text to find: '
+ '<form οnsubmit="return false;"><input type="search" size="25" maxlength="25" id="fwtext"'
+ ' οnchange="resettext();">'
+ '<input type="button" value="Find Prev" οnclick="findprev();">'
+ '<input id="btn" type="button" value="Find Next" οnclick="findit();">'
+ '</form></div>'
+ '<div id="find_msg"><br /></div>';
document.write(find_content);
document.getElementById('fwtext').onkeydown = checkkey;
*/
var find_msg = document.getElementById('find_msg');
}
- 在index.html引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon">
<script src="./static/utils/windowFind.js"></script>
<title>vue实现全局关键字查找</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
3.在你的vue页面使用
html部分
// 搜索框
<div id="boxFindWindow">
<div
v-show="show"
id="findwindow"
/>
</div>
// 点击显示搜索框
<div class="controllers-item" @click="openWindowFind">
<el-button type="primary" icon="el-icon-search" circle></el-button>
</div>
js部分
<script>
import { dragBox } from '@/utils/common'
data () {
return {
show: false
}
},
methods: {
openWindowFind () {
// eslint-disable-next-line no-undef
initFindWin()
var that = this
that.show = true
// eslint-disable-next-line no-undef
show()
// 此处添加拖拽功能
this.$nextTick(() => {
dragBox(document.querySelector('#findwindow'), document.querySelector('#boxFindWindow'))
})
that.$nextTick(() => {
var close = document.getElementById('close-search')
close.addEventListener('click', that.closeSearch)
})
},
closeSearch () {
this.show = false
}
}
</script>
4.拖拽js代码
export function dragBox (drag, wrap) {
function getCss (ele, prop) {
return parseInt(window.getComputedStyle(ele)[prop])
}
let initX
let initY
let dragable = false
let wrapLeft = getCss(wrap, 'left')
let wrapRight = getCss(wrap, 'top')
drag.addEventListener('mousedown', function (e) {
dragable = true
initX = e.clientX
initY = e.clientY
}, false)
document.addEventListener('mousemove', function (e) {
if (dragable === true) {
let nowX = e.clientX
let nowY = e.clientY
let disX = nowX - initX
let disY = nowY - initY
wrap.style.left = wrapLeft + disX + 'px'
wrap.style.top = wrapRight + disY + 'px'
}
})
drag.addEventListener('mouseup', function (e) {
dragable = false
wrapLeft = getCss(wrap, 'left')
wrapRight = getCss(wrap, 'top')
}, false)
}
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)