From f40123b741af3fca8efa00dd57740ed6bc8bab15 Mon Sep 17 00:00:00 2001
From: Seth Meranda <smeranda2@unl.edu>
Date: Thu, 21 Oct 2010 13:38:07 +0000
Subject: [PATCH] first stage of adding qTip to the annotate.
---
www/css/annotate.css | 13 ++++----
www/scripts/annotate_functions.js | 49 +++++++++++++++++++++++++++++--
2 files changed, 54 insertions(+), 8 deletions(-)
diff --git a/www/css/annotate.css b/www/css/annotate.css
index 7d9de95..fadd6c8 100644
--- a/www/css/annotate.css
+++ b/www/css/annotate.css
@@ -3,8 +3,6 @@
border-bottom:1px solid #A29330;
padding:5px 10px 8px 5px;
text-align:center;
- z-index:1;
- position:relative;
font:12px "Lucida Grande",Verdana,Arial;
color:#615503;
display:none;
@@ -12,7 +10,12 @@
#wdn_annotate_notice img {
margin:0 10px -5px 0;
}
-.wdn_annotate {
- min-height:20px;
- border:1px solid black;
+.wdn_annotate .annotable {
+ background:url("images/note.png") no-repeat scroll 0 0 transparent;
+ float:right;
+ height:20px;
+ position:relative;
+ right:-3px;
+ width:28px;
+ cursor:pointer;
}
\ No newline at end of file
diff --git a/www/scripts/annotate_functions.js b/www/scripts/annotate_functions.js
index 7075245..123e9af 100644
--- a/www/scripts/annotate_functions.js
+++ b/www/scripts/annotate_functions.js
@@ -7,15 +7,58 @@ var annotate = function() {
},
setupUserNotice : function() { //indicate to user areas are annotatable
- $('#wdn_wrapper').before('<div id="wdn_annotate_notice"><img src="'+annotate.path+'css/images/note.png" />This page has areas in which you can save personal annotations specific to particular content. <a href="#">Show these areas</a></div>');
+ $('#wdn_wrapper').before('<div id="wdn_annotate_notice"><img src="'+annotate.path+'css/images/note.png" />This page has areas in which you can save personal annotations specific to particular content. <a href="#" onclick="annotate.showAnnotableRegions();">Show these areas</a></div>');
$('#wdn_annotate_notice').slideDown('slow');
},
showAnnotableRegions : function() { //add markup/icon to areas which can be annotatable
-
+ $('.wdn_annotate').each(function(){
+ $(this).append('<a href="#" class="annotable"></a>');
+ });
+ },
+
+ buildAnnotables : function(element) { //when a user clicks on one of the icons, bring up a qTip with the textarea/contenteditable for the note
+ try {
+ $(element).qtip({
+ content:{
+ text: 'blah blah'
+ },
+ position : {
+ corner : {
+ target : 'topMiddle',
+ tooltip : 'bottomMiddle'
+ },
+ container: $('body'),
+ adjust : {
+ screen : true,
+ y : 3,
+ x : 5
+ }
+ },
+ show: {
+ delay : 150
+ },
+ hide: {
+ fixed : true,
+ delay : 150
+ },
+ style: {
+ tip: {
+ corner: 'bottomMiddle' ,
+ size: { x: 25, y: 15 },
+ color: '#c8c8c8'
+ },
+ "padding" : "9px",
+ "width":"98px",
+ classes : {
+ tooltip : 'courseInfo'
+ }
+ }
+ });
+ } catch(e) {}
},
- buildAnnotables : function() { //when a user clicks on one of the icons, bring up a qTip with the textarea/contenteditable for the note
+ createNote : function() { //either get the note from DB or just setup a new one
}
};
--
GitLab