1. Mathias Panzenböck
  2. Sticky Notes

Commits

Mathias Panzenböck  committed a18d170

improved overlay layout and live style preview

  • Participants
  • Parent commits 2654db3
  • Branches default

Comments (0)

Files changed (2)

File default_style.css

View file
 }
 
 /* sticky note when displayed / moving / resizing */
-.at-ac-tuwien-student-e0427417-sticky-note-display-mode,
+.at-ac-tuwien-student-e0427417-sticky-note-display-mode {
+  opacity: 0.2;
+}
+
 .at-ac-tuwien-student-e0427417-sticky-note-move-mode,
-.at-ac-tuwien-student-e0427417-sticky-note-resize-mode {
-  opacity: 0.85;
+.at-ac-tuwien-student-e0427417-sticky-note-resize-mode,
+.at-ac-tuwien-student-e0427417-sticky-note-display-mode:hover {
+  opacity: 0.45;
 }
 
 /* sticky note when moving */
   text-align: right;
 }
 
-.at-ac-tuwien-student-e0427417-sticky-note-overlay-buttons input {
-  margin:  2px;
-  padding: 2px;
-  height: 24px;
+.at-ac-tuwien-student-e0427417-sticky-note-overlay-extra-buttons input[type=button],
+.at-ac-tuwien-student-e0427417-sticky-note-overlay-buttons input[type=button] {
+  margin-left:    2px;
+  margin-right:   2px;
+  padding-top:    2px;
+  padding-bottom: 2px;
+  padding-left:   5px;
+  padding-right:  5px;
+  height:        25px;
+}
+
+.at-ac-tuwien-student-e0427417-sticky-note-overlay-extra-buttons,
+.at-ac-tuwien-student-e0427417-sticky-note-overlay-buttons {
+  margin-top: 5px;
+}
+
+#at-ac-tuwien-student-e0427417-sticky-note-overlay > *,
+.at-ac-tuwien-student-e0427417-sticky-note-overlay-extra-buttons *,
+.at-ac-tuwien-student-e0427417-sticky-note-overlay-buttons * {
+  font-size: 12px;
+  color: #000000 !important;
+}
+
+.at-ac-tuwien-student-e0427417-sticky-note-overlay-extra-buttons {
+  float: left;
 }
 
 /* management interface */

File stickyNote.user.js

View file
 // @name           Sticky Notes
 // @namespace      http://twoday.tuwien.ac.at/pub/
 // @description    add sticky notes to websites
-// @resource       style https://web.student.tuwien.ac.at/~e0427417/downloads/sticky-note/default_style.v1.css
+// @resource       style https://web.student.tuwien.ac.at/~e0427417/downloads/sticky-note/default_style.v2.css
 // @include        *
 // ==/UserScript==
 //
 //   Mihai Ghete (Viper)
 
 const BASE_Z_INDEX = 100000;
-const VERSION      = 100;
+const VERSION      = 110;
 
 const STATE_DISPLAY = 0;
 const STATE_EDIT    = 1;
 		GM_setValue('stickynote:version', VERSION);
 	}
 
+	if (version < 110) {
+		var style = getStylesheet();
+		style += '\n\n.at-ac-tuwien-student-e0427417-sticky-note-overlay-extra-buttons {\n  float: left;\n}';
+		setStylesheet(style);
+		saveStylesheet(style);
+	}
+
 	for each ([x,y,width,height,text] in listStickyNotes(siteId)) {
 		stickyNotes.push(new StickyNote(x,y,width,height,text));
 	}
 	}
 }
 
-function showOverlay(element, buttons) {
-	if (buttons === undefined) {
+var onOverlayClosed = null;
+
+function showOverlay(element, opts) {
+	if (!opts || !opts.buttons) {
 		buttons = [];
 	}
+	else {
+		buttons = opts.buttons;
+	}
 
-	buttons.push(createButton('Close', hideOverlay));
+	buttons.push(createButton('Close', function () {
+		hideOverlay('close');
+	}));
 
 	var buttonDiv = document.createElement('div');
 	buttonDiv.className = 'at-ac-tuwien-student-e0427417-sticky-note-overlay-buttons';
 	var overlay = document.getElementById("at-ac-tuwien-student-e0427417-sticky-note-overlay");
 	var blanket = document.getElementById("at-ac-tuwien-student-e0427417-sticky-note-blanket");
 
-	if (blanket == null) {
+	if (!blanket) {
 		blanket = document.createElement("div");
 		blanket.id = "at-ac-tuwien-student-e0427417-sticky-note-blanket";
-		blanket.style.position = 'absolute';
-		blanket.style.left = '0px';
-		blanket.style.top = '0px';
-		var height = document.body.parentNode.scrollHeight;
-		if (window.innerHeight > height) {
-			height = window.innerHeight;
-		}
-		blanket.style.width = '100%';
-		blanket.style.height = height + 'px';
+		blanket.style.position = 'fixed';
+		blanket.style.left   = '0px';
+		blanket.style.top    = '0px';
+		blanket.style.width  = '100%';
+		blanket.style.height = '100%';
 		blanket.style.zIndex = '100101';
 		document.body.appendChild(blanket);
 	}
 		blanket.style.display = 'block';
 	}
 
-	if (overlay == null) {
+	if (!overlay) {
 		var overlay = document.createElement("div");
 		overlay.id = "at-ac-tuwien-student-e0427417-sticky-note-overlay";
 		overlay.style.position = 'fixed';
 		overlay.style.margin = 'auto';
 		overlay.style.zIndex = '100102';
 		document.body.appendChild(overlay);
+
+		window.addEventListener('resize', function () {
+			if (overlay.style.display != 'none') {
+				overlay.style.left = ((window.innerWidth - overlay.offsetWidth) / 2) + 'px';
+				overlay.style.top  = ((window.innerHeight - overlay.offsetHeight) / 2) + 'px';
+			}
+		}, true);
 	}
 	else {
 		overlay.innerHTML = '';
 		overlay.style.display = 'block';
 	}
-	
+
+	onOverlayClosed = opts && opts.onClose ? opts.onClose : null;
 	overlay.appendChild(element);
+
+	if (opts && opts.extraButtons) {
+		var extraButtonDiv = document.createElement('div');
+		extraButtonDiv.className = 'at-ac-tuwien-student-e0427417-sticky-note-overlay-extra-buttons';
+
+		for each (button in opts.extraButtons) {
+			extraButtonDiv.appendChild(button);
+		}
+		overlay.appendChild(extraButtonDiv);
+	}
+
 	overlay.appendChild(buttonDiv);
 
 	var compStyle = getComputedStyle(overlay,'');
-	var overlayWidth = px(compStyle.width) || overlay.offsetWidth;
+	var overlayWidth  = px(compStyle.width) || overlay.offsetWidth;
 	var overlayHeight = px(compStyle.height) || overlay.offsetHeight;
 
 	overlay.style.left = ((window.innerWidth - overlayWidth) / 2) + 'px';
 
 	compStyle = getComputedStyle(element,'');
 	var elementWidth = (contentWidth -
+		px(compStyle.paddingLeft) -
+		px(compStyle.paddingRight) -
 		px(compStyle.marginLeft) -
 		px(compStyle.marginRight) -
 		px(compStyle.borderLeftWidth) -
 	var elementHeight = (contentHeight -
 		px(compStyle.marginTop) -
 		px(compStyle.marginBottom) -
+		px(compStyle.paddingTop) -
+		px(compStyle.paddingBottom) -
 		px(compStyle.borderTopWidth) -
 		px(compStyle.borderBottomWidth));
 
 	return parseFloat(x.split('px')[0]);
 }
 
-function hideOverlay() {
+function hideOverlay(reason) {
 	var overlay = document.getElementById("at-ac-tuwien-student-e0427417-sticky-note-overlay");
 	var blanket = document.getElementById("at-ac-tuwien-student-e0427417-sticky-note-blanket");
 
-	if (overlay != null) {
+	if (overlay) {
+		if (onOverlayClosed) {
+			onOverlayClosed(reason);
+			onOverlayClosed = null;
+		}
+
 		overlay.style.display = 'none';
+		overlay.innerHTML = '';
 	}
 
-	if (blanket != null) {
+	if (blanket) {
 		blanket.style.display = 'none';
 	}
 }
 	var btn = document.createElement('input');
 	btn.type = 'button';
 	btn.value = label;
-	btn.addEventListener('click', callback, true);
+	if (callback) {
+		btn.addEventListener('click', callback, true);
+	}
 	return btn;
 }
 
+function createCheckbox(id,label,callback) {
+	id = 'at-ac-tuwien-student-e0427417-sticky-note-overlay-'+id;
+	var chk  = document.createElement('input');
+	var lbl  = document.createElement('label');
+	var span = document.createElement('span');
+	chk.type = 'checkbox';
+	chk.id = id;
+	lbl.htmlFor = id;
+	lbl.appendChild(document.createTextNode(label));
+	if (callback) {
+		chk.addEventListener('change', callback, true);
+	}
+	span.appendChild(chk);
+	span.appendChild(lbl);
+	return span;
+}
+
 function createTextarea(text) {
 	var textarea = document.createElement("textarea");
 	if (text != undefined) {
 		}
 		hideOverlay();
 	});
-	showOverlay(textarea, [importButton]);
+	showOverlay(textarea, { buttons: [importButton] });
 }
 
 function saveStylesheet(style) {
 }
 
 function editStylesheet() {
-	var textarea = createTextarea(getStylesheet());
-	var resetButton = createButton("Reset", function() {
+	var unchangedStyle = getStylesheet();
+	var textarea = createTextarea(unchangedStyle);
+	var resetButton = createButton("Reset", function () {
 		textarea.value = GM_getResourceText('style');
 	});
-	var saveButton = createButton("Save", function() {
+	var saveButton = createButton("Save", function () {
 		saveStylesheet(textarea.value);
 		setStylesheet(textarea.value);
-		hideOverlay();
+		hideOverlay('save');
+	});
+	var onStyleEdited = function () {
+		setStylesheet(textarea.value);
+	};
+	var previewCheckbox = createCheckbox('live-preview', 'Live Preview', function (event) {
+		if (event.originalTarget.checked) {
+			setStylesheet(textarea.value);
+			textarea.addEventListener('keyup', onStyleEdited, true);
+		}
+		else {
+			textarea.removeEventListener('keyup', onStyleEdited, true);
+			setStylesheet(unchangedStyle);
+		}
 	});
 	
 	textarea.style.fontFamily = 'monospace';
 		if (e.ctrlKey && e.which == 13) {
 			saveStylesheet(textarea.value);
 			setStylesheet(textarea.value);
-			hideOverlay();
+			hideOverlay('save');
 		}
 	}, true);
 
-	showOverlay(textarea, [resetButton, saveButton]);
+	showOverlay(textarea, {
+		buttons: [resetButton, saveButton],
+		extraButtons: [previewCheckbox],
+		onClose: function (reason) {
+			if (reason == 'close') {
+				setStylesheet(unchangedStyle);
+			}
+		}
+	});
 }
 
 function addStickyNote() {