[DG: User Experience] Discussions Widget Patch
|
View:
New views
2 Messages
—
Rating Filter:
Alert me
|
 |
[DG: User Experience] Discussions Widget Patch
by Adrian Fish
::
Rate this Message:
Hi all,
For exploration's sake I've merged the minimal view code from yaft into uxwidgets, and it works okay. I've attached the patch if anybody wants to try it out. Just layer it into your ux directory and, if you're using the file resource provider in Sling, you should just be able to refresh and pick up the changes. Cheers, Adrian. -- ================================== Adrian Fish Software Engineer Centre for e-Science Bowland Tower South C Floor Lancaster University Lancaster LA1 4YW email: a.fish@... http://confluence.sakaiproject.org/display/YAFT/Yaft http://confluence.sakaiproject.org/display/BLOG/Home http://confluence.sakaiproject.org/display/AGORA/Home Index: uxwidgets/src/main/webapp/discussion/javascript/discussion.js =================================================================== --- uxwidgets/src/main/webapp/discussion/javascript/discussion.js (revision 67246) +++ uxwidgets/src/main/webapp/discussion/javascript/discussion.js (working copy) @@ -131,6 +131,8 @@ // Template var discussionContainerTemplate = "discussion_container_template"; var discussionSettingsExistingContainerTemplate = "discussion_settings_existing_container_template"; + var discussionCompactContainerTemplate = "discussion_compact_container_template"; + var discussionPostTemplate = "discussion_post_template"; // Toggle var discussionToggle = discussion + "_toggle"; @@ -386,6 +388,21 @@ ////////////////////// // DISPLAYING POSTS // ////////////////////// + + var bindShowCurrentPostHandlers = function(post,loggedIn) { + + $('#post_' + post.post["sakai:id"]).bind('click', post,function(e, ui) { + e.data["loggedIn"] = loggedIn; + e.data["first"] = false; + $('#' + tuid + ' #discussion_current_post').html($.Template.render(discussionPostTemplate, e.data)); + $('.messageCursor').hide(); + $('#post_' + post.post["sakai:id"] + '_cursor').show(); + }); + + for(var i=0;i<post.replies.length;i++) { + bindShowCurrentPostHandlers(post.replies[i],loggedIn); + } + } /** * Render the discussion posts @@ -394,6 +411,26 @@ var renderPosts = function(jsonPosts) { // Render the posts with the template engine $(discussionContainer, rootel).html($.Template.render(discussionContainerTemplate, jsonPosts)); + + // Add binding to the compact link + $('#discussion_compact_link').bind('click', function(e, ui) { + $(discussionContainer, rootel).html($.Template.render(discussionCompactContainerTemplate, jsonPosts)); + // Add binding to the full link + $('#discussion_full_link').bind('click', function(e, ui) { + renderPosts(jsonPosts); + }); + + // Render the first post into the current post area + jsonPosts.posts[0]["loggedIn"] = jsonPosts.loggedIn; + jsonPosts.posts[0]["first"] = true; + $('#' + tuid + ' #discussion_current_post').html($.Template.render(discussionPostTemplate, jsonPosts.posts[0])); + $('.messageCursor').hide(); + $('#post_' + jsonPosts.posts[0].post["sakai:id"] + '_cursor').show(); + + for(var i=0;i<jsonPosts.posts.length;i++) { + bindShowCurrentPostHandlers(jsonPosts.posts[i],jsonPosts.loggedIn); + } + }); }; /** Index: uxwidgets/src/main/webapp/discussion/discussion.html =================================================================== --- uxwidgets/src/main/webapp/discussion/discussion.html (revision 67246) +++ uxwidgets/src/main/webapp/discussion/discussion.html (working copy) @@ -4,12 +4,100 @@ <!-- MAIN VIEW --> <div id="discussion_main_container" style="display:none"> <h3>Discussion</h3> + + <div id="discussion_post_template" style="display:none"><!-- + <div class="discussion_post" id="discussion_post${post["sakai:postid"]}"> + <div class="discussion_header"> + <div class="discussion_left"> + {if loggedIn} + {if post.profile.picture !== ""} + <img alt="avatar" class="discussion_avatar" src="${post.profile.picture}" /> + {else} + <img alt="avatar" class="discussion_avatar" src="/dev/_images2/person_icon.jpg " /> + {/if} + <p class="discussion_content_subject" id="discussion_content_subject_${post["sakai:id"]}" style="margin-bottom: 0px; font-size: 1.2em">${post["sakai:subject"]}</p> + <a href="/dev/profile.html?user=${post["sakai:from"]}"><span class="discussion_username">${post.profile.fullName}</span></a> + <span class="discussion_date">posted this on ${post.date}</span> + {else} + <span class="discussion_posted_container"> + <span class="discussion_date">Posted on ${post.date}</span> + </span> + {/if} + {if post.editters !== undefined} + <br /> + <a href="/dev/profile.html?user=${post.editedByUserid}"><span class="discussion_username_edited">${post.editedByName}</span></a> + <span class="discussion_date">edited this on ${post.editedByDate}</span> + {/if} + </div> + </div> + <div class="discussion_content"> + <div id="discussion_content_container_${post["sakai:id"]}"> + {if post["sakai:deleted"] && post["sakai:deleted"] === true} + <p class="discussion_content_infoDeleted">This post has been deleted. Only site collaborators can see this post. + {if post.canDelete && post.canDelete === true} + <br />You can return it by clicking the undelete link. + {/if} + </p> + {/if} + <div id="discussion_content_message_${post["sakai:id"]}">${post["sakai:body"]}</div> + </div> + {if loggedIn} + <div id="discussion_content_actions_${post["sakai:id"]}" class="discussion_content_actions link"> + <ul> + <li class="discussion_content_no_border"><a id="discussion_content_reply_${post["sakai:id"]}" class="discussion_content_reply" href="javascript:;">Reply</a></li> + {if post.canEdit} + <li><a id="discussion_content_edit_${post["sakai:id"]}" class="discussion_content_edit" href="javascript:;">Edit</a></li> + {/if} + {if post.canDelete && first !== true && post["sakai:initialpost"] !== true} + {if post["sakai:deleted"]} + <li><a id="discussion_content_undelete_${post["sakai:id"]}" class="discussion_content_undelete" href="javascript:;">Undelete</a></li> + {else} + <li><a id="discussion_content_delete_${post["sakai:id"]}" class="discussion_content_delete" href="javascript:;">Delete</a></li> + {/if} + {/if} + </ul> + </div> + {/if} + </div> + </div> + --></div> + + <div id="discussion_compact_container_template" style="display:none"><!-- + <a id="discussion_full_link" href="#" title="Click to view the expanded version of this discussion">Full</a> + <br /> + <br /> + <div id="discussion_current_post"></div> + + <br /> + + {macro displayPost(o,first)} + <div> + <a href="#" id="post_${o.post["sakai:id"]}"><span style="font-weight: bold">${o.post["sakai:subject"]}</span></a> - <span>by ${o.post.profile.fullName}</span> on <span>${o.post.date}</span> + <img style="display:none" class="messageCursor" id="post_${o.post["sakai:id"]}_cursor" src="/dev/_images/arrow_left_sm2_blue.gif" width="5" height="9"/> + </div> + + <div class="discussion_posts"> + {for reply in o.replies} + ${displayPost(reply,false)} + {/for} + </div> + {/macro} + {if posts.length == 0} + No posts yet. + {else} + ${displayPost(posts[0], true)} + {/if} + --></div> + <!-- MAIN CONTAINER FOR DISCUSSIONS --> <div id="discussion_container"> </div> <div id="discussion_container_template" style="display:none"><!-- + <a id="discussion_compact_link" href="#" title="Click to view a compact version of this discussion">Compact</a> + <br /> + <br /> {macro displayPost(o, first)} <div class="discussion_post" id="discussion_post${o.post["sakai:postid"]}"> @@ -177,4 +265,4 @@ </div> <!-- JAVASCRIPT --> -<script type="text/javascript" language="JavaScript" src="/devwidgets/discussion/javascript/discussion.js"></script> \ No newline at end of file +<script type="text/javascript" language="JavaScript" src="/devwidgets/discussion/javascript/discussion.js"></script> [a_fish.vcf] begin:vcard fn:Adrian Fish n:Fish;Adrian org:Lancaster University;Centre for e-Science adr:Lancaster University;;Bowland Tower South C Floor;Lancaster;;LA1 4YT;United Kingdom email;internet:a.fish@... title:Software Engineer url:http://agora.lancs.ac.uk version:2.1 end:vcard _______________________________________________ sakai-ux mailing list sakai-ux@... http://collab.sakaiproject.org/mailman/listinfo/sakai-ux TO UNSUBSCRIBE: send email to sakai-ux-unsubscribe@... with a subject of "unsubscribe" |
|
|
Re: [DG: User Experience] Discussions Widget Patch
by Adrian Fish
::
Rate this Message:
Hi All,
Fixed a few bugs in the previous patch, so if you want to try out a minimal discussion view, use the patch attached here. Cheers, Adrian. Adrian Fish wrote: > Hi all, > > For exploration's sake I've merged the minimal view code from yaft > into uxwidgets, and it works okay. I've attached the patch if anybody > wants to try it out. Just layer it into your ux directory and, if > you're using the file resource provider in Sling, you should just be > able to refresh and pick up the changes. > > Cheers, > > Adrian. > > _______________________________________________ > sakai-ux mailing list > sakai-ux@... > http://collab.sakaiproject.org/mailman/listinfo/sakai-ux > > TO UNSUBSCRIBE: send email to sakai-ux-unsubscribe@... with a subject of "unsubscribe" ================================== Adrian Fish Software Engineer Centre for e-Science Bowland Tower South C Floor Lancaster University Lancaster LA1 4YW email: a.fish@... http://confluence.sakaiproject.org/display/YAFT/Yaft http://confluence.sakaiproject.org/display/BLOG/Home http://confluence.sakaiproject.org/display/AGORA/Home Index: uxwidgets/src/main/webapp/discussion/javascript/discussion.js =================================================================== --- uxwidgets/src/main/webapp/discussion/javascript/discussion.js (revision 67246) +++ uxwidgets/src/main/webapp/discussion/javascript/discussion.js (working copy) @@ -131,6 +131,8 @@ // Template var discussionContainerTemplate = "discussion_container_template"; var discussionSettingsExistingContainerTemplate = "discussion_settings_existing_container_template"; + var discussionCompactContainerTemplate = "discussion_compact_container_template"; + var discussionPostTemplate = "discussion_post_template"; // Toggle var discussionToggle = discussion + "_toggle"; @@ -386,6 +388,21 @@ ////////////////////// // DISPLAYING POSTS // ////////////////////// + + var bindShowCurrentPostHandlers = function(post,loggedIn) { + + $('#post_' + post.post["sakai:id"]).bind('click', post,function(e, ui) { + e.data["loggedIn"] = loggedIn; + e.data["first"] = false; + $('#' + tuid + ' #discussion_current_post').html($.Template.render(discussionPostTemplate, e.data)); + $('#' + tuid + ' .messageCursor').hide(); + $('#post_' + post.post["sakai:id"] + '_cursor').show(); + }); + + for(var i=0;i<post.replies.length;i++) { + bindShowCurrentPostHandlers(post.replies[i],loggedIn); + } + } /** * Render the discussion posts @@ -394,6 +411,26 @@ var renderPosts = function(jsonPosts) { // Render the posts with the template engine $(discussionContainer, rootel).html($.Template.render(discussionContainerTemplate, jsonPosts)); + + // Add binding to the compact link + $('#' + tuid + ' #discussion_compact_link').bind('click', function(e, ui) { + $(discussionContainer, rootel).html($.Template.render(discussionCompactContainerTemplate, jsonPosts)); + // Add binding to the full link + $('#' + tuid + ' #discussion_full_link').bind('click', function(e, ui) { + renderPosts(jsonPosts); + }); + + // Render the first post into the current post area + jsonPosts.posts[0]["loggedIn"] = jsonPosts.loggedIn; + jsonPosts.posts[0]["first"] = true; + $('#' + tuid + ' #discussion_current_post').html($.Template.render(discussionPostTemplate, jsonPosts.posts[0])); + $('#' + tuid + ' .messageCursor').hide(); + $('#post_' + jsonPosts.posts[0].post["sakai:id"] + '_cursor').show(); + + for(var i=0;i<jsonPosts.posts.length;i++) { + bindShowCurrentPostHandlers(jsonPosts.posts[i],jsonPosts.loggedIn); + } + }); }; /** Index: uxwidgets/src/main/webapp/discussion/discussion.html =================================================================== --- uxwidgets/src/main/webapp/discussion/discussion.html (revision 67246) +++ uxwidgets/src/main/webapp/discussion/discussion.html (working copy) @@ -4,12 +4,100 @@ <!-- MAIN VIEW --> <div id="discussion_main_container" style="display:none"> <h3>Discussion</h3> + + <div id="discussion_post_template" style="display:none"><!-- + <div class="discussion_post" id="discussion_post${post["sakai:postid"]}"> + <div class="discussion_header"> + <div class="discussion_left"> + {if loggedIn} + {if post.profile.picture !== ""} + <img alt="avatar" class="discussion_avatar" src="${post.profile.picture}" /> + {else} + <img alt="avatar" class="discussion_avatar" src="/dev/_images2/person_icon.jpg " /> + {/if} + <p class="discussion_content_subject" id="discussion_content_subject_${post["sakai:id"]}" style="margin-bottom: 0px; font-size: 1.2em">${post["sakai:subject"]}</p> + <a href="/dev/profile.html?user=${post["sakai:from"]}"><span class="discussion_username">${post.profile.fullName}</span></a> + <span class="discussion_date">posted this on ${post.date}</span> + {else} + <span class="discussion_posted_container"> + <span class="discussion_date">Posted on ${post.date}</span> + </span> + {/if} + {if post.editters !== undefined} + <br /> + <a href="/dev/profile.html?user=${post.editedByUserid}"><span class="discussion_username_edited">${post.editedByName}</span></a> + <span class="discussion_date">edited this on ${post.editedByDate}</span> + {/if} + </div> + </div> + <div class="discussion_content"> + <div id="discussion_content_container_${post["sakai:id"]}"> + {if post["sakai:deleted"] && post["sakai:deleted"] === true} + <p class="discussion_content_infoDeleted">This post has been deleted. Only site collaborators can see this post. + {if post.canDelete && post.canDelete === true} + <br />You can return it by clicking the undelete link. + {/if} + </p> + {/if} + <div id="discussion_content_message_${post["sakai:id"]}">${post["sakai:body"]}</div> + </div> + {if loggedIn} + <div id="discussion_content_actions_${post["sakai:id"]}" class="discussion_content_actions link"> + <ul> + <li class="discussion_content_no_border"><a id="discussion_content_reply_${post["sakai:id"]}" class="discussion_content_reply" href="javascript:;">Reply</a></li> + {if post.canEdit} + <li><a id="discussion_content_edit_${post["sakai:id"]}" class="discussion_content_edit" href="javascript:;">Edit</a></li> + {/if} + {if post.canDelete && first !== true && post["sakai:initialpost"] !== true} + {if post["sakai:deleted"]} + <li><a id="discussion_content_undelete_${post["sakai:id"]}" class="discussion_content_undelete" href="javascript:;">Undelete</a></li> + {else} + <li><a id="discussion_content_delete_${post["sakai:id"]}" class="discussion_content_delete" href="javascript:;">Delete</a></li> + {/if} + {/if} + </ul> + </div> + {/if} + </div> + </div> + --></div> + + <div id="discussion_compact_container_template" style="display:none"><!-- + <a id="discussion_full_link" title="Click to view the expanded version of this discussion" href="javascript:;">Full</a> + <br /> + <br /> + <div id="discussion_current_post"></div> + + <br /> + + {macro displayPost(o,first)} + <div> + <a href="#" id="post_${o.post["sakai:id"]}"><span style="font-weight: bold">${o.post["sakai:subject"]}</span></a> - <span>by ${o.post.profile.fullName}</span> on <span>${o.post.date}</span> + <img style="display:none" class="messageCursor" id="post_${o.post["sakai:id"]}_cursor" src="/dev/_images/arrow_left_sm2_blue.gif" width="5" height="9"/> + </div> + + <div class="discussion_posts"> + {for reply in o.replies} + ${displayPost(reply,false)} + {/for} + </div> + {/macro} + {if posts.length == 0} + No posts yet. + {else} + ${displayPost(posts[0], true)} + {/if} + --></div> + <!-- MAIN CONTAINER FOR DISCUSSIONS --> <div id="discussion_container"> </div> <div id="discussion_container_template" style="display:none"><!-- + <a id="discussion_compact_link" title="Click to view a compact version of this discussion" href="javascript:;">Compact</a> + <br /> + <br /> {macro displayPost(o, first)} <div class="discussion_post" id="discussion_post${o.post["sakai:postid"]}"> @@ -177,4 +265,4 @@ </div> <!-- JAVASCRIPT --> -<script type="text/javascript" language="JavaScript" src="/devwidgets/discussion/javascript/discussion.js"></script> \ No newline at end of file +<script type="text/javascript" language="JavaScript" src="/devwidgets/discussion/javascript/discussion.js"></script> [a_fish.vcf] begin:vcard fn:Adrian Fish n:Fish;Adrian org:Lancaster University;Centre for e-Science adr:Lancaster University;;Bowland Tower South C Floor;Lancaster;;LA1 4YT;United Kingdom email;internet:a.fish@... title:Software Engineer url:http://agora.lancs.ac.uk version:2.1 end:vcard _______________________________________________ sakai-ux mailing list sakai-ux@... http://collab.sakaiproject.org/mailman/listinfo/sakai-ux TO UNSUBSCRIBE: send email to sakai-ux-unsubscribe@... with a subject of "unsubscribe" |
| Free embeddable forum powered by Nabble | Forum Help |
