added filter drop; tweaked sidebar coordinate settings to accommodate new post

581f7f92 · Tom Giannattasio · Matthew Mongeau · ee6616ef · 581f7f92 · 581f7f92
Commit 581f7f92 authored Aug 31, 2012 by Tom Giannattasio Committed by Matthew Mongeau Sep 10, 2012
5 changed files
--- a/lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
+++ b/lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
@@ -38,7 +38,7 @@ class @DiscussionThreadListView extends Backbone.View
    @$(".browse").removeClass('is-open')
    setTimeout (-> @$(".post-search-field").focus()), 200

-  toggleTopicDrop: =>
+  toggleTopicDrop: =>    
    @$(".browse").toggleClass('is-dropped')
    if @$(".browse").hasClass('is-dropped')
      @$(".board-drop-menu").show()

--- a/lms/static/js/discussions-temp.js
+++ b/lms/static/js/discussions-temp.js
@@ -12,6 +12,8 @@ var $sidebarWidthStyles;
 var $formTopicDropBtn;
 var $formTopicDropMenu;
 var $postListWrapper;
+var $dropFilter;
+var $topicFilter;
 var sidebarWidth;
 var sidebarHeight;
 var sidebarHeaderHeight;
@@ -27,14 +29,16 @@ $(document).ready(function() {
 	$browse = $('.browse-search .browse');
 	$search = $('.browse-search .search');
 	$searchField = $('.post-search-field');
-	$topicDrop = $('.board-drop-menu');
+	$topicDrop = $('.browse-topic-drop-menu-wrapper');
 	$currentBoard = $('.current-board');
 	$tooltip = $('<div class="tooltip"></div>');
 	$newPost = $('.new-post-article');
 	$sidebar = $('.sidebar');
 	$postListWrapper = $('.post-list-wrapper');
-	$formTopicDropBtn = $('.new-post-article .topic-drop-btn');
-	$formTopicDropMenu = $('.new-post-article .topic-drop-menu');
+	$formTopicDropBtn = $('.new-post-article .form-topic-drop-btn');
+	$formTopicDropMenu = $('.new-post-article .form-topic-drop-menu-wrapper');
+	// $dropFilter = $('.browse-topic-drop-search-input');
+	// $topicFilter = $('.topic-drop-search-input');
 	$sidebarWidthStyles = $('<style></style>');
 	$body.append($sidebarWidthStyles);

@@ -44,7 +48,7 @@ $(document).ready(function() {

 	$browse.bind('click', showTopicDrop);
 	$search.bind('click', showSearch);
-	$topicDrop.bind('click', setTopic);
+	// $topicDrop.bind('click', setTopic);
 	$formTopicDropBtn.bind('click', showFormTopicDrop);
 	$formTopicDropMenu.bind('click', setFormTopic);
 	$('.new-post-btn').bind('click', newPost);
@@ -57,12 +61,55 @@ $(document).ready(function() {
 		'click': hideTooltip
 	});

+	$body.delegate('.browse-topic-drop-btn', 'click', showTopicDrop);
+	$body.delegate('.browse-topic-drop-search-input', 'keyup', filterDrop);
+	$body.delegate('.form-topic-drop-search-input', 'keyup', filterDrop);
+	$body.delegate('.browse-topic-drop-menu-wrapper', 'click', setTopic);
+
 	$(window).bind('resize', updateSidebarDimensions);
 	$(window).bind('scroll', updateSidebarCoordinates);
 	updateSidebarCoordinates();
 	updateSidebarDimensions();
 });

+function filterDrop(e) {
+	var $drop = $(e.target).parents('.form-topic-drop-menu-wrapper, .browse-topic-drop-menu-wrapper');
+	var queries = $(this).val().split(' ');
+	var $items = $drop.find('a');
+
+	if(queries.length == 0) {
+		$items.show();
+		return;
+	}
+
+	$items.hide();
+	$items.each(function(i) {
+		var thisText = $(this).not('.urnread').text();
+		$(this).parents('ul').siblings('a').not('.unread').each(function(i) {
+			thisText = thisText  + ' ' + $(this).text();
+		});
+
+		var test = true;
+		var terms = thisText.split(' ');
+
+		for(var i = 0; i < queries.length; i++) {
+			if(thisText.toLowerCase().search(queries[i].toLowerCase()) == -1) {
+				test = false;
+			}
+		}
+
+		if(test) {
+			$(this).show();
+
+			// show children
+			$(this).parent().find('a').show();
+
+			// show parents
+			$(this).parents('ul').siblings('a').show();
+		}
+	});
+}
+
 function showTooltip(e) {
 	var tooltipText = $(this).attr('data-tooltip');
 	$tooltip.html(tooltipText);
@@ -123,6 +170,11 @@ function showTopicDrop(e) {
 	e.preventDefault();

 	$browse.addClass('is-dropped');
+
+	if(!$topicDrop[0]) {
+		$topicDrop = $('.browse-topic-drop-menu-wrapper');
+	}
+
 	$topicDrop.show();
 	$browse.unbind('click', showTopicDrop);
 	$browse.bind('click', hideTopicDrop);
@@ -132,6 +184,10 @@ function showTopicDrop(e) {
 }

 function hideTopicDrop(e) {
+	if(e.target == $('.browse-topic-drop-search-input')[0]) {
+		return;
+	}
+
 	$browse.removeClass('is-dropped');
 	$topicDrop.hide();
 	$body.unbind('click', hideTopicDrop);
@@ -139,11 +195,20 @@ function hideTopicDrop(e) {
 }

 function setTopic(e) {
+	if(e.target == $('.browse-topic-drop-search-input')[0]) {
+		return;
+	}
+
 	var $item = $(e.target).closest('a');
 	var boardName = $item.find('.board-name').html();
-	$item.parents('ul').not('.board-drop-menu').each(function(i) {
+
+	$item.parents('ul').not('.browse-topic-drop-menu').each(function(i) {
 		boardName = $(this).siblings('a').find('.board-name').html() + ' / ' + boardName;
 	});
+
+	if(!$currentBoard[0]) {
+		$currentBoard = $('.current-board');
+	}
 	$currentBoard.html(boardName);

 	var fontSize = 16;
@@ -181,6 +246,10 @@ function showFormTopicDrop(e) {
 }

 function hideFormTopicDrop(e) {
+	if(e.target == $('.topic-drop-search-input')[0]) {
+		return;
+	}
+
 	$formTopicDropBtn.removeClass('is-dropped');
 	$formTopicDropMenu.hide();
 	$body.unbind('click', hideFormTopicDrop);
@@ -189,13 +258,48 @@ function hideFormTopicDrop(e) {
 }

 function setFormTopic(e) {
+	if(e.target == $('.topic-drop-search-input')[0]) {
+		return;
+	}
 	$formTopicDropBtn.removeClass('is-dropped');
-	hideFormTopicDrop();
+	hideFormTopicDrop(e);

 	var $item = $(e.target);
 	var boardName = $item.html();
-	$item.parents('ul').not('.topic-drop-menu').each(function(i) {
+	$item.parents('ul').not('.form-topic-drop-menu').each(function(i) {
 		boardName = $(this).siblings('a').html() + ' / ' + boardName;
 	});
 	$formTopicDropBtn.html(boardName + ' <span class="drop-arrow">▾</span>');
 }
+
+function updateSidebarCoordinates(e) {
+	scrollTop = $(window).scrollTop();
+	sidebarXOffset = $('.discussion-column').offset().top;
+
+	var marginTop = scrollTop + SIDEBAR_PADDING > sidebarXOffset ? scrollTop + SIDEBAR_PADDING - sidebarXOffset : 0;
+
+	var discussionColumnHeight = $('.discussion-column').height();
+	marginTop = marginTop + sidebarHeight > discussionColumnHeight ? discussionColumnHeight - sidebarHeight + 2 : marginTop;
+
+	$sidebar.css('margin-top', marginTop);
+	updateSidebarDimensions();
+}
+
+function updateSidebarDimensions(e) {
+	sidebarWidth = $sidebar.width();
+
+	var visibleHeader = sidebarXOffset - scrollTop > 0 ? sidebarXOffset - scrollTop : 0;
+	sidebarHeight = $(window).height() - (visibleHeader + SIDEBAR_PADDING * 2);
+	sidebarHeight = sidebarHeight > 500 ? sidebarHeight : 500;
+
+	var titleWidth = sidebarWidth - 115;
+
+	$sidebar.css('height', sidebarHeight + 'px');
+
+	if(!$postListWrapper[0]) {
+		$postListWrapper = $('.post-list-wrapper');
+	}
+
+	$postListWrapper.css('height', (sidebarHeight - SIDEBAR_HEADER_HEIGHT - 4) + 'px');
+	$sidebarWidthStyles.html('.discussion-body .post-list a .title { width: ' + titleWidth + 'px !important; }');
+}
--- a/lms/static/sass/_discussion.scss
+++ b/lms/static/sass/_discussion.scss
@@ -92,7 +92,7 @@ body.discussion {
        text-shadow: none;
      }

-      .topic-drop {
+      .form-topic-drop {
        position: relative;

        ul {
@@ -102,7 +102,7 @@ body.discussion {
        }
      }

-      .topic-drop-btn {
+      .form-topic-drop-btn {
        position: relative;
        z-index: 10000;
        @include white-button;
@@ -117,7 +117,7 @@ body.discussion {
        }
      }

-      .topic-drop-menu {
+      .form-topic-drop-menu-wrapper {
        display: none;
        position: absolute;
        top: 40px;
@@ -128,6 +128,11 @@ body.discussion {
        background: #737373;
        border: 1px solid #333;
        box-shadow: 0 2px 50px rgba(0, 0, 0, .4);
+      }
+
+      .form-topic-drop-menu {
+        max-height: 400px;
+        overflow-y: scroll;

        a {
          display: block;
@@ -156,6 +161,25 @@ body.discussion {
          }
        }
      }
+
+      .form-topic-drop-search {
+        padding: 10px;
+      }
+
+      .form-topic-drop-search-input {
+        width: 100%;
+        height: 30px;
+        padding: 0 15px;
+        box-sizing: border-box;   
+        border-radius: 30px;
+        border: 1px solid #333;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset;
+        background: -webkit-linear-gradient(top, #eee, #fff);
+        font-size: 11px;
+        line-height: 16px;
+        color: #333;
+        outline: 0;
+      }
    }

    .right-column {
@@ -330,16 +354,16 @@ body.discussion {
      box-shadow: -1px 0 0 #aaa inset;

      &.is-open {
-        .board-drop-btn span {
+        .browse-topic-drop-btn span {
          opacity: 1;
        }

-        .board-drop-icon {
+        .browse-topic-drop-icon {
          opacity: 0;
        }

        &.is-dropped {
-          .board-drop-btn {
+          .browse-topic-drop-btn {

            span {
              color: #fff;
@@ -352,13 +376,13 @@ body.discussion {
      }

      &.is-dropped {
-        .board-drop-btn {
+        .browse-topic-drop-btn {
          background-color: #616161;
        }
      }

      &.is-dropped {
-        .board-drop-icon {
+        .browse-topic-drop-icon {
          background-position: 0 -16px;
        }
      }
@@ -388,7 +412,7 @@ body.discussion {
      }
    }

-    .board-drop-btn {
+    .browse-topic-drop-btn {
      display: block;
      position: absolute;
      top: -1px;
@@ -417,7 +441,7 @@ body.discussion {
      }
    }

-    .board-drop-icon {
+    .browse-topic-drop-icon {
      display: block;
      position: absolute;
      top: 21px;
@@ -428,10 +452,10 @@ body.discussion {
      margin-left: -12px;
      background: url(../images/browse-icon.png) no-repeat;
      opacity: 1;
-      @include transition(opacity .2s);
+      @include transition(none);
    }

-    .board-drop-menu {
+    .browse-topic-drop-menu-wrapper {
      display: none;
      position: absolute;
      top: 60px;
@@ -442,6 +466,11 @@ body.discussion {
      border: 1px solid #4b4b4b;
      border-radius: 0 0 3px 3px;

+      .browse-topic-drop-menu {
+        max-height: 400px;
+        overflow-y: scroll;
+      }
+
      > li:first-child a {
        border-top: none;
      }
@@ -486,6 +515,25 @@ body.discussion {
      }
    }

+    .browse-topic-drop-search {
+      padding: 10px;
+    }
+
+    .browse-topic-drop-search-input {
+      width: 100%;
+      height: 30px;
+      padding: 0 15px;
+      box-sizing: border-box;   
+      border-radius: 30px;
+      border: 1px solid #333;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset;
+      background: -webkit-linear-gradient(top, #eee, #fff);
+      font-size: 11px;
+      line-height: 16px;
+      color: #333;
+      outline: 0;
+    }
+
    .post-search {
      width: 100%;
      max-width: 30px;

--- a/lms/templates/discussion/_filter_dropdown.html
+++ b/lms/templates/discussion/_filter_dropdown.html
@@ -21,6 +21,11 @@
    </li>
 </%def>

-<ul class="board-drop-menu">
-    ${render_dropdown(category_map)}
-</ul>
+<div class="browse-topic-drop-menu-wrapper">
+    <div class="browse-topic-drop-search">
+        <input type="text" class="browse-topic-drop-search-input" placeholder="filter topics">
+    </div>
+    <ul class="browse-topic-drop-menu">        
+        ${render_dropdown(category_map)}
+    </ul>
+</div>
\ No newline at end of file
--- a/lms/templates/discussion/single_thread.html
+++ b/lms/templates/discussion/single_thread.html
@@ -74,26 +74,31 @@
    <form class="new-post-form">
      <div class="left-column">
        <label>Create new post in:</label>
-        <div class="topic-drop">
-          <a href="#" class="topic-drop-btn">Homework / Week 1 <span class="drop-arrow">▾</span></a>
-          <ul class="topic-drop-menu">
-            <li><a href="#">All</a></li>
-            <li><a href="#">Following</a></li>
-            <li><a href="#">General</a></li>
-            <li>
-              <a href="#">Homework</a>
-              <ul>
-                <li><a href="#">Week 1</a></li>
-                <li>
-                  <a href="#">Week 2</a>
-                  <ul>
-                    <li><a href="#">Problem 1</a></li>
-                    <li><a href="#">Problem 2</a></li>
-                  </ul>
-                </li>
-              </ul>
-            </li>
-          </ul>
+        <div class="form-topic-drop">
+          <a href="#" class="form-topic-drop-btn">Homework / Week 1 <span class="drop-arrow">▾</span></a>
+          <div class="form-topic-drop-menu-wrapper">
+            <div class="form-topic-drop-search">
+              <input type="text" class="form-topic-drop-search-input" placeholder="filter topics">
+            </div>
+            <ul class="form-topic-drop-menu">
+              <li><a href="#">All</a></li>
+              <li><a href="#">Following</a></li>
+              <li><a href="#">General</a></li>
+              <li>
+                <a href="#">Homework</a>
+                <ul>
+                  <li><a href="#">Week 1</a></li>
+                  <li>
+                    <a href="#">Week 2</a>
+                    <ul>
+                      <li><a href="#">Problem 1</a></li>
+                      <li><a href="#">Problem 2</a></li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
        </div>
        <div class="options">
          <input type="checkbox" name="follow" id="new-post-follow" checked><label for="new-post-follow">follow this post</label>
@@ -129,8 +134,8 @@
 <script type="text/template" id="thread-list-template">
  <div class="browse-search">
    <div class="browse is-open">
-      <a href="#" class="board-drop-icon"></a>
-      <a href="#" class="board-drop-btn"><span class="current-board">Homework / Week 1</span> <span class="drop-arrow">▾</span></a>
+      <a href="#" class="browse-topic-drop-icon"></a>
+      <a href="#" class="browse-topic-drop-btn"><span class="current-board">Homework / Week 1</span> <span class="drop-arrow">▾</span></a>
    </div>
    <%include file="_filter_dropdown.html" />
    <div class="search">