thredded-workgroup 0.2.0 → 0.2.1

data/app/assets/javascripts/thredded/workgroup/components/overflow.es6

@@ -0,0 +1,60 @@
+(($) => {
+
+  const MAX_HEIGHT = 100; // $thredded-condensed-height
+  const MAX_SCROLL_HEIGHT = MAX_HEIGHT + 8; // why ?
+  const ThreddedWorkgroup = window.ThreddedWorkgroup;
+
+  function findOverflows() {
+    $('.thredded--condensable').each((i, elem) => {
+      let $elem = $(elem);
+      let sH = $elem.prop('scrollHeight');
+      if (sH > MAX_SCROLL_HEIGHT) {
+        // let h = $elem.height();
+        // let oH = $elem.prop('offsetHeight');;
+        // let overflow = sH - h;
+        // let id = $elem.closest(".thredded--topics--topic").attr("id");
+        // console.log({i, id, sH, h, oH, overflow});
+        $elem.addClass("thredded--condensable--overflowing");
+        $elem.find(".thredded--condensable--overflow-only").fadeIn()
+      }
+    });
+  }
+
+  function hoverOverflow() {
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    let $elem = $(this);
+    if ($elem.hasClass('thredded--condensable--condensed')) {
+      $elem.addClass('thredded--condensable--hover');
+    }
+  }
+
+  function unhoverOverflow() {
+    let $elem = $(this);
+    $elem.removeClass('thredded--condensable--hover');
+  }
+
+  function clickOverflow(e) {
+    e.preventDefault();
+    // e.stopPropagation(); actually it needs to propagate to topics.es6
+    let $elem = $(this);
+    if ($elem.hasClass('thredded--condensable--hover')) {
+      $elem.removeClass('thredded--condensable--hover');
+      $elem.removeClass('thredded--condensable--condensed').addClass('thredded--condensable--expanded');
+    } else {
+      // touch only or already condensed, so clicking again
+      $elem.toggleClass('thredded--condensable--condensed').toggleClass('thredded--condensable--expanded');
+    }
+  }
+
+  const Thredded = window.Thredded;
+
+  Thredded.onPageLoad(() => {
+    findOverflows();
+    $('.thredded--condensable.thredded--condensable--overflowing')
+      .hover(hoverOverflow, unhoverOverflow)
+      .click(clickOverflow);
+  })
+
+})(jQuery);

data/app/assets/javascripts/thredded/workgroup/components/topics.es6

@@ -0,0 +1,151 @@
+(($) => {
+  const ThreddedWorkgroup = window.ThreddedWorkgroup;
+
+  function updateFollowStatus($topic, followStatus) {
+    if (followStatus) {
+      $topic.removeClass('thredded--topic-notfollowing').addClass('thredded--topic-following')
+    } else {
+      $topic.removeClass('thredded--topic-following').addClass('thredded--topic-notfollowing')
+    }
+  };
+
+  function clickFollowToggle(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var $this = $(this);
+    var $topic = $this.parents('.thredded--topics--topic');
+    var following = $topic.hasClass('thredded--topic-following');
+    var topicId = $topic.data("topic");
+    var messageboardId = $topic.data("messageboard");
+    var rootPath = $('#thredded--container').data('thredded-root-url');
+
+    var path = "" + rootPath + messageboardId + "/" + topicId + "/" + (following ? 'unfollow.json' : 'follow.json');
+    // console.log("about to ajax: " + path);
+    $.ajax({
+      url: path, type: "POST", success: function (data) {
+        updateFollowStatus($topic, data["follow"])
+      }
+    });
+  }
+
+  function hoverTopicFollowToggle(){
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    console.log("i am trying to hover");
+    $(this).closest('.thredded--topics--topic').find('.js-thredded-follow-toggle').addClass("thredded--topic-hovering");
+  }
+  function unhoverTopicFollowToggle(){
+    $(this).closest('.thredded--topics--topic').find('.js-thredded-follow-toggle').removeClass("thredded--topic-hovering");
+  }
+  function hoverTopicTitle() {
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    $(this).closest('.thredded--topics--topic').addClass("thredded--topic-hovering");
+  }
+
+  function unhoverTopicTitle() {
+    $(this).closest('.thredded--topics--topic').removeClass("thredded--topic-hovering");
+  }
+
+  function hoverTopic() {
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    $(this).find('.thredded--topic-last-post-with-controls').addClass("thredded--topic-hovering");;
+  }
+
+  function revealControls($topic){
+    $topic
+  }
+
+  function toggleControlsOnTouch() {
+    if (ThreddedWorkgroup.touching) {
+      $(this).closest('.thredded--topics--topic').find('.thredded--topic-last-post-with-controls').toggleClass("thredded--topic-hovering");;
+    }
+  }
+
+  function unhoverTopic() {
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    $(this).find('.thredded--topic-last-post-with-controls').removeClass("thredded--topic-hovering");
+  }
+
+  function viewTopic(e) {
+    var $a = $(this).closest('.thredded--topics--topic').find("a.thredded--topic--view-button");
+    window.location.href = $a.attr('href');
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  function hoverTopicReadToggle() {
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    $(this).closest('.thredded--topics--topic').find('.thredded--topic--read-state-toggle').addClass("thredded--topic-hovering");
+  }
+
+  function unhoverTopicReadToggle() {
+    $(this).closest('.thredded--topics--topic').find('.thredded--topic--read-state-toggle').removeClass("thredded--topic-hovering");
+  }
+
+  function updateReadStatus($topic, isRead) {
+    if (isRead) {
+      $topic.addClass("thredded--topic-read").removeClass("thredded--topic-unread");
+    } else {
+      $topic.addClass("thredded--topic-unread").removeClass("thredded--topic-read");
+    }
+  }
+
+  function readToggle() {
+    let $topic = $(this).closest('.thredded--topics--topic');
+    let path;
+    if ($topic.hasClass("thredded--topic-read")) {
+      path = $topic.find('a.thredded--topic--read-state-toggle.thredded--topic--mark-as-unread').data("postPath");
+    } else {
+      path = $topic.find('a.thredded--topic--read-state-toggle.thredded--topic--mark-as-read').data("postPath");
+    }
+    $.ajax({
+      url: path, type: "POST", success: function (data) {
+        updateReadStatus($topic, data["read"]);
+      }
+    });
+  }
+
+  function hoverHighlight() {
+    if (ThreddedWorkgroup.touching) {
+      return;
+    }
+    $(this).addClass('thredded--topic-hovering');
+  }
+
+  function unhoverHighlight() {
+    $(this).removeClass('thredded--topic-hovering');
+  }
+
+  const Thredded = window.Thredded;
+
+  Thredded.onPageLoad(() => {
+    console.log("I am load");
+    $('.js-thredded-follow-toggle')
+      .hover(hoverTopicFollowToggle, unhoverTopicFollowToggle)
+      .click(clickFollowToggle);
+    $('.thredded--topics--topic .thredded--topic-title')
+      .hover(hoverTopicTitle, unhoverTopicTitle)
+      .click(viewTopic);
+    $('.thredded--topic--read-state-toggle')
+      .hover(hoverTopicReadToggle, unhoverTopicReadToggle)
+      .click(readToggle);
+    $('.thredded--topics--topic')
+      .hover(hoverTopic, unhoverTopic)
+    $('.thredded--topics--topic thredded--topic--view-button')
+      .click(viewTopic);
+    $('.thredded--topic-last-post-with-controls')
+      .hover(hoverHighlight, unhoverHighlight)
+      .click(toggleControlsOnTouch);
+  });
+
+})(jQuery);
+

data/app/assets/javascripts/thredded/workgroup/core/thredded_workgroup.js

@@ -0,0 +1 @@
+window.ThreddedWorkgroup = window.ThreddedWorkgroup || {}

data/app/assets/javascripts/thredded/workgroup/core/touch.es6

@@ -0,0 +1,16 @@
+(($) => {
+  const Thredded = window.Thredded;
+  const ThreddedWorkgroup = window.ThreddedWorkgroup;
+
+  Thredded.onPageLoad(() => {
+    ThreddedWorkgroup.touching = undefined;
+    $(document)
+      .on("touchstart", () => {
+        ThreddedWorkgroup.touching = true;
+      })
+      .on("touchend", () => {
+        // timeout to make sure it happens after any spurious hovers have happened
+        window.setTimeout(()=>{ ThreddedWorkgroup.touching = undefined; }, 200);
+      });
+  });
+})(jQuery);

data/app/assets/javascripts/thredded/workgroup/index.js

@@ -0,0 +1,3 @@
+//= require_tree ./core
+//= require_tree ./components
+

data/app/assets/stylesheets/thredded-workgroup.scss

@@ -1,3 +1,5 @@
 @import 'thredded';
+@import 'thredded/workgroup/followers';
+@import 'thredded/workgroup/overflow';
 @import 'thredded/workgroup/navs';
 @import 'thredded/workgroup/topics';

data/app/assets/stylesheets/thredded/workgroup/_followers.scss

@@ -0,0 +1,51 @@
+.thredded--topic-header {
+  .thredded--topic-header--follow-info form {
+    position: static;
+  }
+}
+
+.thredded--topic-followers {
+  line-height: 1.75rem;
+  @include thredded--clearfix;
+}
+
+.thredded--follower {
+  background-color: #eeeeee;
+  border: 1px solid #eeeeee;
+  border-radius: 5px;
+  padding: 2px;
+  margin: 2px;
+  white-space: nowrap;
+  display: inline-block;
+  line-height: 1rem;
+
+  button {
+    color: rgba(0, 0, 0, 0.54);
+    background: inherit;
+    padding: 0;
+    border-style: none;
+    .thredded--topics--follow-icon,
+    .thredded--topics--unfollow-icon {
+      position: static;
+      opacity: 0.5;
+      height: 0.75rem;
+      width: 0.75rem;
+    }
+
+    & .thredded--topics--follow-icon,
+    &:hover .thredded--topics--unfollow-icon {
+      display: inline-block;
+    }
+
+    & .thredded--topics--unfollow-icon,
+    &:hover .thredded--topics--follow-icon {
+      display: none;
+    }
+
+    &:hover .thredded--topics--unfollow-icon {
+      opacity: 0.75;
+    }
+  }
+
+}
+

data/app/assets/stylesheets/thredded/workgroup/_navs.scss

@@ -8,17 +8,33 @@ ul.thredded--workgroup {
   padding-left: 0;
   li {
     display: inline-block;
-    margin-right: 1rem;
-    &.active {
-      font-weight: bold;
-    }
     a {
       display: inline-block;
-      color: #a5aab6;
-      padding: 0.75rem 0;
+      color: $thredded-secondary-nav-color;
+      padding: 0.75rem 0.5rem;
+      @include thredded-media-tablet-and-up {
+        padding: 0.75rem 1rem;
+      }
+      @include thredded-media-desktop-and-up {
+        padding: 0.75rem 1.5rem;
+      }
       text-decoration: none;
       &:hover {
-        text-decoration: underline;
+        text-decoration: none;
+        background-color: #eeeeee;
+      }
+    }
+    &.active {
+      font-weight: bold;
+      position: relative;
+      top: 1px;
+      border: 1px solid #eee;
+      border-bottom: 1px solid white;
+      a {
+        color: $thredded-brand;
+        &:hover{
+          background-color: white;
+        }
       }
     }
     .expanded {
@@ -31,5 +47,11 @@ ul.thredded--workgroup {
         display: none;
       }
     }
+    .thredded--user-navigation--unread-topics--followed-count{
+      display: none;
+      @include thredded-media-desktop-and-up{
+        display: inline-block;
+      }
+    }
   }
 }

data/app/assets/stylesheets/thredded/workgroup/_overflow.scss

@@ -0,0 +1,71 @@
+$thredded-condensed-height: 100px;
+.thredded--condensable {
+  box-sizing: border-box;
+  position: relative;
+  top: 0;
+  z-index: 1;
+
+  &.thredded--condensable--condensed {
+    max-height: $thredded-condensed-height;
+    overflow: hidden;
+    opacity: 0.7;
+
+    &.thredded--topic-hovering, &.thredded--condensable--hover, .thredded--topic-hovering & {
+      opacity: 1;
+    }
+  }
+
+  &.thredded--condensable--expanded,
+  [data-thredded-condensable-hover=reveal] &.thredded--condensable--condensed.thredded--condensable--hover {
+    max-height: unset;
+    overflow: unset;
+  }
+
+  cursor: pointer;
+}
+
+.thredded--condensable--expand, .thredded--condensable--condense {
+  color: #cccccc;
+  float: right;
+  font-size: 0.75rem;
+
+  .thredded--condensable.thredded--condensable--hover & {
+    color: $thredded-brand;
+  }
+}
+
+.thredded--condensable--overflow-only {
+  display: none;
+}
+
+.thredded--condensable--overflowing {
+  $overflow-only-height: 20px;
+
+  .thredded--condensable--overflow-only {
+    display: block;
+    width: 100%;
+    display: none;
+    height: $overflow-only-height;
+    background-color: white;
+    z-index: 3;
+    border-top: 1px dashed #cccccc;
+  }
+
+  &.thredded--condensable--condensed .thredded--condensable--overflow-only {
+    position: absolute;
+    top: $thredded-condensed-height - $overflow-only-height;
+    .thredded--condensable--condense {
+      display: none;
+    }
+  }
+
+  &.thredded--condensable--expanded .thredded--condensable--overflow-only,
+  [data-thredded-condensable-hover=reveal] &.thredded--condensable--condensed.thredded--condensable--hover .thredded--condensable--overflow-only{
+    position: static;
+    border-top: none;
+    .thredded--condensable--expand {
+      display: none;
+    }
+  }
+
+}

data/app/assets/stylesheets/thredded/workgroup/_topics.scss

@@ -1,6 +1,7 @@
 .thredded--topic-source cite a {
   color: #a5aab6;
   text-decoration: none;
+
   &:hover {
     color: #4a90e2;
 
@@ -17,36 +18,205 @@ cite.thredded--messageboard-name {
 .thredded--topic-post-and-last-user {
   max-width: 35rem;
   margin: auto;
-  margin-top: 1rem;
+  padding-top: 1rem;
+}
+
+.thredded--topics--topic {
+  a.thredded-follow-toggle {
+    position: absolute;
+    right: -1.6rem;
+    top: 0;
+
+    svg, svg.thredded--topics--follow-icon {
+      position: static;
+      fill: currentColor;
+      display: inline-block;
+      font-size: 1em;
+      width: 1.4rem;
+      height: 1.4rem;
+      opacity: 0.4;
+    }
 
-  &.thredded--condensed {
-    max-height: 100px;
-    overflow: hidden;
-    opacity: 0.8;
-    &.thredded--hovering {
-      opacity: 1;
+    &:hover svg {
+      cursor: pointer;
+      opacity: 0.7;
+      color: #4a90e2;
     }
   }
-  &.thredded--hovering {
-    cursor: pointer;
+
+  &.thredded--topic-following a.thredded-follow-toggle {
+    svg.thredded--topics--unfollow-icon {
+      display: none;
+    }
+
+    &:hover, &.thredded--topic-hovering {
+      svg.thredded--topics--follow-icon {
+        color: darken($thredded-brand, 20%);
+      }
+    }
   }
-}
 
-.thredded--topics--topic .thredded--topics--follow-icon {
-  &:hover {
-    cursor: pointer;
-    opacity: 0.7;
-    color: #4a90e2;
+  &.thredded--topic-notfollowing a.thredded-follow-toggle {
+    svg.thredded--topics--unfollow-icon {
+      opacity: 0.2;
+    }
+
+    svg.thredded--topics--follow-icon {
+      display: none;
+    }
+
+    &:hover, &.thredded--topic-hovering {
+      svg.thredded--topics--unfollow-icon {
+        opacity: 0.5;
+      }
+    }
   }
 }
 
-.thredded--topics--topic.thredded--rollover{
+
+.thredded--topics--topic.thredded--topic-hovering {
   cursor: pointer;
 
   .thredded--topic-title a {
     color: #4a90e2;
+
     &:hover {
       cursor: pointer;
     }
   }
+
+  .thredded--topic-controls {
+    .thredded--topic--view-button {
+      background-color: $thredded-button-hover-background;
+      color: $thredded-button-hover-color;
+    }
+  }
+}
+
+.thredded--topic-controls {
+  .thredded--topic--read-state-toggle.thredded--topic-hovering {
+    background-color: $thredded-button-hover-background;
+    color: $thredded-button-hover-color;
+  }
+}
+
+.thredded--topic-last-post-with-controls {
+  position: relative;
+  top: 0;
+}
+
+.thredded--topic-controls {
+  display: none;
+  position: absolute;
+  top: 5px;
+  right: 0;
+  z-index: 4;
+
+  .thredded--topic-hovering & {
+    display: block;
+    background: #ffffff88;
+  }
+
+  .thredded--icon {
+    height: 0.85em;
+    margin: 0;
+  }
+}
+
+.thredded--topics--topic > .thredded--topic--read-state-toggle {
+  border-radius: 50%;
+  display: inline-block;
+  font-weight: 900;
+  font-size: 0.8rem;
+  height: 2rem;
+  left: -$thredded-topics-topic-posts-counter-width;
+  line-height: 2rem;
+  margin-right: $thredded-base-spacing;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  width: 2rem;
+  transition: background 0.1s linear, color 0.1s linear;
+
+  .thredded--icon {
+    height: 1.25em;
+    position: relative;
+    top: 10%;
+  }
+}
+
+.thredded--topic-read {
+  > .thredded--topics--title a {
+    font-weight: lighter;
+  }
+
+  > .thredded--topic--read-state-toggle {
+    background: $thredded-badge-inactive-background;
+    color: $thredded-badge-inactive-color;
+
+    &.thredded--topic-hovering {
+      background: darken(opacify($thredded-badge-inactive-background, 0.25), 20%);
+    }
+  }
+
+  .thredded--topic--read-state-toggle.thredded--topic--mark-as-read {
+    display: none
+  }
+
+}
+
+.thredded--topic-unread {
+  > .thredded--topics--title a {
+    font-weight: bold;
+  }
+
+  > .thredded--topic--read-state-toggle {
+    background: $thredded-badge-active-background;
+    color: $thredded-badge-active-color;
+
+    .thredded--topics--read-icon {
+      display: none;
+    }
+
+    &.thredded--topic-hovering {
+      background: darken($thredded-badge-active-background, 20%);
+    }
+  }
+
+  .thredded--topic--read-state-toggle.thredded--topic--mark-as-unread {
+    display: none
+  }
+}
+
+.thredded--button {
+  svg.thredded--icon {
+    max-width: 16px;
+  }
+
+  &.thredded--topic-hovering {
+    background: darken($thredded-badge-active-background, 20%);
+  }
+}
+
+.thredded--topic-following {
+  .thredded--button.thredded--topic--follow {
+    display: none;
+  }
+}
+
+.thredded--topic-notfollowing {
+  .thredded--button.thredded--topic--unfollow {
+    display: none;
+  }
+}
+
+@include thredded-media-mobile {
+  .thredded--topic-hovering {
+    .thredded--button.thredded--topic--mark-as-unread,
+    .thredded--button.thredded--topic--mark-as-read,
+    .thredded--button.thredded--topic--follow,
+    .thredded--button.thredded--topic--unfollow {
+      display: none;
+    }
+  }
 }