/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
INFOTECH FLOATING MOVABLE TOOLPANE
This file consists of JavaScript functions that break
SharePoint's ToolPane out into a floating div, which can
be moved about the page by click-dragging its title bar.
To use, follow these simple steps:
1) Upload the .js, .css, and .png to an accessible location
2) Add the following lines to the tag of your master page:
3) Change your master page's onload method from onload="javascript:_spBodyOnLoadWrapper();" to onload="javascript:wrapToolPane();_spBodyOnLoadWrapper();"
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
// Declare an object to represent the div we will be dragging
var dragObj = new Object();
dragObj.zIndex = 0;
function ieHomeIconFix() {
if(document.getElementById('navbg')){
var IE = document.all?true:false;
var WK = RegExp(' AppleWebKit/').test(navigator.userAgent);
if(IE || WK) {
var myTD = document.getElementById('navbg');
myTD.style.marginTop="1px";
}
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TOOLPANE WRAPPER FUNCTION
Sharepoint adds a huge table to add the right-side toolpane when
editing a web part. This script will allow the toolpane to be
positioned right next to the web part, in an unobtrusively-sized
floating div.
Note the long IDs for everything; this will make sure the
SharePoint CSS classes doesn't override anything.
Tested in IE8 and FF3.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
function wrapToolPane() {
//window.onresize = repositionDiv;
if(document.getElementById('MSOTlPn_Tbl')){
// find some elements.
var toolPane = document.getElementById('MSOTlPn_Tbl');
var tablePageBody = document.getElementById('MSO_tblPageBody');
var actions = document.getElementById('actions');
var parent = toolPane.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
// ** outer wrapper ** //
var outerWrapperDiv = document.createElement('div');
outerWrapperDiv.setAttribute('id','IFT-outer-wrapper');
// ** inner borders ** //
var innerBordersDiv = document.createElement('div');
innerBordersDiv.setAttribute('id','IFT-innerBorders');
// ** inner wrapper ** //
var innerWrapperDiv = document.createElement('div');
innerWrapperDiv.setAttribute('id', 'IFT-inner-wrapper');
// ** reassemble/rearrange elements ** //
parent.insertBefore(outerWrapperDiv, actions);
toolPane.parentNode.removeChild(toolPane);
outerWrapperDiv.appendChild(innerBordersDiv);
innerBordersDiv.appendChild(innerWrapperDiv);
innerWrapperDiv.appendChild(toolPane);
// position the outerWrapperDiv
if(document.getElementById('MSOTlPn_TlPnCaptionSpan'))
{
toolPane.style.width="216px";//"243px";
toolPane.style.height="406px";
var oTlPn_TPC = document.getElementById('MSOTlPn_ToolPaneCaption');
if(oTlPn_TPC != null)
{
oTlPn_TPC.style.height="10px";
oTlPn_TPC.parentNode.style.height="10px";
/// Tuesday May 19
oTlPn_TPC.onmousedown=dragStart;//dragStart(event, 'IFT-outer-wrapper');
///
}
var IE = document.all?true:false;
if(document.getElementById('MSOTlPn_Parts'))
{
var oTlPnParts = document.getElementById('MSOTlPn_Parts');
oTlPnParts.style.width="235px";
oTlPnParts.style.height="361px";
oTlPnParts.style.borderWidth="0px";
oTlPnParts.parentNode.style.width="235px";
oTlPnParts.firstChild.style.borderWidth="0px";
oTlPnParts.firstChild.style.width="235px";
oTlPnParts.firstChild.childNodes[0].style.width="216px";
oTlPnParts.firstChild.childNodes[2].style.width="216px";
if(IE)
{oTlPnParts.style.height="354px";}
}
var oTlPnBtns = document.getElementById('MSOTlPn_ToolPaneButtons');
if(oTlPnBtns != null)
{
oTlPnBtns.style.textAlign="center";
}
var imgBCB = document.getElementById('MsoImageToolpartbackgroundColorBuilderButton');
if(imgBCB != null)
{
imgBCB.style.position="static";
}
// Section 1 -- Web Parts and the Modify Web Part Tool Pane
//var currWPName = document.getElementById('MSOTlPn_TlPnCaptionSpan').innerHTML;
//var WPTitles = document.getElementsByTagName('h3');
//for(i=0;i -1)
// {
// var span = WPTitles[i].firstChild.firstChild;
// if(currWPName == span.innerHTML || currWPName.indexOf(span.innerHTML) > -1) //indexOf accomodates FF
// {
// var WPIntName = title.id;
// var i = WPIntName.indexOf("Title");
// var WPCloseName = WPIntName.substring(0, i) + WPIntName.substring(i+5) + "_Close";
// if(document.getElementById(WPCloseName))
// {
// var closeBtn = document.getElementById(WPCloseName);
// var posX = findPosX(closeBtn) + 20;
// var posY = findPosY(closeBtn) - 4;
// outerWrapperDiv.style.top = posY + "px";
// outerWrapperDiv.style.left = posX + "px";
// outerWrapperDiv.style.zIndex = "70";
// if(posX + 243 > document.body.clientWidth) // 243 taken from float-fixed-toggled-tool-pane.css
// {
// outerWrapperDiv.style.left = (document.body.clientWidth - 250) + "px" // 250 = 243 + 7 for right padding
// }
// }
// }
// }
//}
outerWrapperDiv.style.top = "200px";
outerWrapperDiv.style.left = "200px";
outerWrapperDiv.style.zIndex = "70";
// Section 2 -- The Advanced Web Part dialog
if(document.getElementById('MSOTlPn_ToolBarTable'))
{
oTlPnParts.style.height="325px";
oTlPnParts.firstChild.style.height="325px";
oTlPnParts.parentNode.style.height="325px";
if(oTlPnBtns != null)
{
oTlPnBtns.style.fontFamily="verdana";
oTlPnBtns.style.fontSize="smaller";
}
// Uncomment this section to make the dialog box appear next to the mouse cursor
//if (IE) {
// x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
// y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
//}
//else {
// x = e.pageX;
// y = e.pageY;
//}
//outerWrapperDiv.style.top = y + "px";
//outerWrapperDiv.style.left = x + "px";
outerWrapperDiv.style.top = "200px";
outerWrapperDiv.style.left = "200px";
outerWrapperDiv.style.zIndex = "70";
}
}
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DIV REPOSITIONING AND DRAGGING FUNCTIONS
These are the functions that will reposition the
div when the window is resized, and let you click
and drag the ToolPane div around the page.
Functions:
repositionDiv
dragStart
dragGo
dragStop
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
function repositionDiv() {
if(document.getElementById('MSOTlPn_Tbl'))
{
// ** outer wrapper ** //
var outerWrapperDiv = document.getElementById('IFT-outer-wrapper');
// position the outerWrapperDiv
if(document.getElementById('MSOTlPn_TlPnCaptionSpan'))
{
var currWPName = document.getElementById('MSOTlPn_TlPnCaptionSpan').innerHTML;
var WPTitles = document.getElementsByTagName('h3');
for(i=0;i -1)
{
var span = WPTitles[i].firstChild.firstChild;
if(currWPName == span.innerHTML || currWPName.indexOf(span.innerHTML) > -1) //indexOf accomodates FF
{
var WPIntName = title.id;
var i = WPIntName.indexOf("Title");
var WPCloseName = WPIntName.substring(0, i) + WPIntName.substring(i+5) + "_Close";
if(document.getElementById(WPCloseName))
{
var closeBtn = document.getElementById(WPCloseName);
var posX = findPosX(closeBtn) + 20;
var posY = findPosY(closeBtn) - 4;
outerWrapperDiv.style.top = posY + "px";
outerWrapperDiv.style.left = posX + "px";
}
}
}
}
}
}
}
function dragStart(e) {
var el;
var x, y;
var IE = document.all?true:false;
dragObj.elNode = document.getElementById('IFT-outer-wrapper');
if (dragObj.elNode.nodeType == 3)
dragObj.elNode = dragObj.elNode.parentNode;
// Get cursor position with respect to the page.
if (IE) {
x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
else {
x = e.pageX;
y = e.pageY;
}
// Save starting positions of cursor and element.
dragObj.cursorStartX = x;
dragObj.cursorStartY = y;
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);
if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0;
// Update element's z-index.
dragObj.elNode.style.zIndex = ++dragObj.zIndex;
// Capture mousemove and mouseup events on the page.
if (IE) {
document.attachEvent("onmousemove", dragGo);
document.attachEvent("onmouseup", dragStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
else {
document.addEventListener("mousemove", dragGo, true);
document.addEventListener("mouseup", dragStop, true);
e.preventDefault();
}
}
function dragGo(e) {
var x, y;
var IE = document.all?true:false;
// Get cursor position with respect to the page.
if (IE) {
x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
else {
x = e.pageX;
y = e.pageY;
}
// Move drag element by the same amount the cursor has moved.
dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px";
if (IE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
else
event.preventDefault();
}
function dragStop(event) {
var IE = document.all?true:false;
// Stop capturing mousemove and mouseup events.
if (IE) {
document.detachEvent("onmousemove", dragGo);
document.detachEvent("onmouseup", dragStop);
}
else {
document.removeEventListener("mousemove", dragGo, true);
document.removeEventListener("mouseup", dragStop, true);
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
WEB PART LOCATOR FUNCTIONS
These are the functions that will get the
current position of the web part to edit.
Functions:
findPosX
findPosY
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
function findPosX(obj)
{
var curleft = 0;
if(obj.offsetParent)
while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;
return curtop;
}