bigbluebutton_shared_notes_plus_plus.js

document.getElementsByClassName("icon-bbb-group_chat")[0].parentElement.click(); // Chat Should be Opened First
document.getElementsByClassName("icon-bbb-copy")[0].parentElement.click(); // Open Notes
//Get IFrame
var getIFrame = function() {
	var interval = setInterval(function() {
		check_iframe(interval)
	}, 500);
};

function check_iframe(interval) {
	if (document.querySelector('[title=etherpad]') != null) {
		old_iframe = document.querySelector('[title=etherpad]');
		document.getElementById('new_notes').src = old_iframe.src;
		document.getElementsByClassName("icon-bbb-group_chat")[0].parentElement.click(); // Go Back to Chat
		clearInterval(interval);
	}
}
getIFrame();

function addcss(css) {
	var head = document.getElementsByTagName('head')[0];
	var s = document.createElement('style');
	s.setAttribute('type', 'text/css');
	if (s.styleSheet) { // IE
		s.styleSheet.cssText = css;
	} else { // the world
		s.appendChild(document.createTextNode(css));
	}
	head.appendChild(s);
}
var css = `
#mydiv {
  resize: both;
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  text-align: center;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

#new_notes {
  height: 500px;
  resize: both;
  overflow: auto;
  border: 2px solid;
  }
`
addcss(css);
var html = `
<div id="mydiv">
  <!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
  <div id="mydivheader">Shared Notes (Moveable)</div>
  <iframe id="new_notes"  src="">Loading ...</iframe>
</div> 
`;
var html_el = document.createElement("div");
html_el.innerHTML = html;
document.body.insertBefore(html_el, document.body.childNodes[0]);
console.log("loaded");
// Make the DIV element draggable:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
	var pos1 = 0,
		pos2 = 0,
		pos3 = 0,
		pos4 = 0;
	if (document.getElementById(elmnt.id + "header")) {
		// if present, the header is where you move the DIV from:
		document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
	} else {
		// otherwise, move the DIV from anywhere inside the DIV:
		elmnt.onmousedown = dragMouseDown;
	}

	function dragMouseDown(e) {
		e = e || window.event;
		e.preventDefault();
		// get the mouse cursor position at startup:
		pos3 = e.clientX;
		pos4 = e.clientY;
		document.onmouseup = closeDragElement;
		// call a function whenever the cursor moves:
		document.onmousemove = elementDrag;
	}

	function elementDrag(e) {
		e = e || window.event;
		e.preventDefault();
		// calculate the new cursor position:
		pos1 = pos3 - e.clientX;
		pos2 = pos4 - e.clientY;
		pos3 = e.clientX;
		pos4 = e.clientY;
		// set the element's new position:
		elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
		elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
	}

	function closeDragElement() {
		// stop moving when mouse button is released:
		document.onmouseup = null;
		document.onmousemove = null;
	}
}