Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

3 expand mode implemented

  • Loading branch information...
commit 8d0c1ca157e113c6eb81752168a8df8fa394dd5b 1 parent 218369a
@gaomd authored
Showing with 121 additions and 60 deletions.
  1. +23 −6 assets/css/subv.css
  2. +60 −33 assets/js/subv.js
  3. +38 −21 subv.html
View
29 assets/css/subv.css
@@ -90,6 +90,7 @@ textarea {
}
#nav,
+.config-tb,
.width-tb {
padding: 0 1em;
}
@@ -144,10 +145,6 @@ textarea {
margin-bottom: 1em;
}
-.item.expand {
- background-color: #f6f6b6;
-}
-
.item-heading {
/*white-space: nowrap;*/
font-size: 1.1em;
@@ -282,8 +279,28 @@ div[class^=page-] .comment-item:nth-child(even) {
width: 100%;
}
-.goto-item {
- margin-top: 1em;
+.item.outline.expanded,
+.item.outline-stacked.expanded,
+.item.outline.expanding,
+.item.outline-stacked.expanding {
+ background-color: #f6f6b6;
+}
+
+.item.expanding .item-comments {
+ display: none;
+}
+
+.item.expanding .js-loading {
+ display: block;
+}
+
+.item.expanded .item-comments {
+ display: block;
+}
+
+.item.inline.expanded .item-meta,
+.item.expanded .js-loading {
+ display: none;
}
/* -------------------------- *
View
93 assets/js/subv.js
@@ -8,8 +8,12 @@
window.subv = {
currentPage: -1,
+ settings: {
+ expandMode: "outline", // inline, outline, stacked
+ },
init: function() {
window.doT.templateSettings.strip = false;
+ subv.settings.expandMode = "outline";
subv.bindEvents();
subv.clearList();
subv.loadNextList();
@@ -96,52 +100,60 @@ window.subv = {
},
expand: function(id) {
subv.log("subv.item.expand(" + id + ")");
-
+
var $item = $("[id^=item-" + id + "-]");
- if ($item.hasClass("cached")) {
- // expand item directly if it's expanded once
- subv.log("cached, expand directly [DO NOTHING CURRENTLY]");
+ var $itemx;
+ if (subv.settings.expandMode === "inline" &&
+ $item.hasClass("cached")) {
+ $item.addClass("inline expanded");
return;
- } else {
- $item.addClass("cached");
}
- $(".item.expand").removeClass("expand");
- $item.addClass("expand");
-
- $("#item").empty();
- var $view = $("<div/>")
- .append($item.find(".item-comments").clone())
- .appendTo("#item");
- var $loading = $view.find(".js-loading").show();
- var $gotoItem = $('<div class="goto-item" id="goto-item-' + id + '"><button class="btn"><i class="icon-arrow-left"></i> back</button></div>');
+ if (subv.settings.expandMode === "inline") {
+ $itemx = $item;
+ } else if (subv.settings.expandMode === "outline" ||
+ subv.settings.expandMode === "stacked") {
+ $itemx = $("<div/>").addClass("item");
+ $itemx.append($item.find(".item-heading").clone());
+ }
+ if (subv.settings.expandMode !== "inline") {
+ if (subv.settings.expandMode === "outline") {
+ $("#item").empty().append($itemx);
+ } else if (subv.settings.expandMode === "stacked") {
+ $("#item").append($itemx);
+ }
+ }
+ if (subv.settings.expandMode === "outline") {
+ $("body").animate({
+ "scrollTop": $itemx.offset().top
+ });
+ }
- $("body").animate({
- "scrollTop": $("#item").offset().top
- });
+ $(".item.outline.expanded").removeClass("outline expanded");
+ $(".item.outline.expanded").removeClass(".stacked.expanded");
+ $item.addClass("expanding cached").addClass(subv.settings.expandMode);
+ $itemx.addClass("expanding");
+
+ var template = doT.template( $("#item-comments-template").text() );
+ var $comments = $( template({ "id": id}) );
+ $itemx.append($comments);
subv.api.v2ex.getItem(id, null, function(item) {
subv.log(item);
- // title
- $view.prepend($item.find(".item-heading").clone());
// op
- var $op = $view.find(".op");
- var template = $("#comment-item-template").text();
- var t = ( doT.template(template) )(item.comments[0]);
- $op.append(t);
+ var $op = $comments.find(".op");
+ var template = doT.template( $("#comment-item-template").text() );
+ $op.append( template(item.comments[0]) );
// comments
for (var i = 1; i <= item.pages; i++) {
- $view.addClass("haspage-" + i);
+ $comments.addClass("haspage-" + i);
}
- var $page = $view.find(".page-" + item.current_page).empty();
+ var $page = $comments.find(".page-" + item.current_page).empty();
for (var i = 1; i < item.comments.length; i++) {
- var template = $("#comment-item-template").text();
- var t = ( doT.template(template) )(item.comments[i]);
- $page.append(t);
+ var template = doT.template( $("#comment-item-template").text() );
+ $page.append( template(item.comments[i]) );
}
- $loading.hide();
- $view.append($gotoItem);
-
- subv.log("marking "+id+"-"+item.comments_count+" as read");
+ $item.removeClass("expanding").addClass("expanded");
+ $itemx.removeClass("expanding").addClass("expanded");
subv.item.markRead(id, item.comments_count);
});
},
@@ -228,6 +240,21 @@ window.subv = {
});
});
+ $("#btn-set-mode-inline").on("click", function() {
+ subv.log("true");
+ subv.settings.expandMode = "inline";
+ });
+
+ $("#btn-set-mode-outline").on("click", function() {
+ subv.log("true");
+ subv.settings.expandMode = "outline";
+ });
+
+ $("#btn-set-mode-stacked").on("click", function() {
+ subv.log("true");
+ subv.settings.expandMode = "stacked";
+ });
+
$("#width-splitter").on("change", function() {
var val = $(this).val();
amplify.store("width-splitter-value", val);
View
59 subv.html
@@ -39,6 +39,13 @@
</div>
</div>
+ <div class="btn-toolbar config-tb">
+ <div class="btn-group">
+ <button class="btn" id="btn-set-mode-inline">inline</button>
+ <button class="btn" id="btn-set-mode-outline">outline</button>
+ <button class="btn" id="btn-set-mode-stacked">stacked</button>
+ </div>
+ </div>
<div class="btn-toolbar width-tb">
<div class="width-tb-margin">
<input id="width-adjuster" type="range" min="0" max="24" value="6" step="1" />
@@ -112,27 +119,37 @@
<a class="author" href="{{=it.comments[0].user.path}}">{{=it.comments[0].user.name}}</a>
&middot; <span class="comments-count"><a href="{{=it.path}}">{{=it.comments_count}} comments</a></span>
</div>
- <div class="item-comments">
- <div class="js-loading"><h3 class="pagination-right">Loading...</h3></div>
- <div class="op"></div>
- <div class="page-1"><button class="btn btn-load-page js-load-page">load page 1</button></div>
- <div class="page-2"><button class="btn btn-load-page js-load-page">load page 2</button></div>
- <div class="page-3"><button class="btn btn-load-page js-load-page">load page 3</button></div>
- <div class="page-4"><button class="btn btn-load-page js-load-page">load page 4</button></div>
- <div class="page-5"><button class="btn btn-load-page js-load-page">load page 5</button></div>
- <div class="page-6"><button class="btn btn-load-page js-load-page">load page 6</button></div>
- <div class="page-7"><button class="btn btn-load-page js-load-page">load page 7</button></div>
- <div class="page-8"><button class="btn btn-load-page js-load-page">load page 8</button></div>
- <div class="page-9"><button class="btn btn-load-page js-load-page">load page 9</button></div>
- <div class="page-10"><button class="btn btn-load-page js-load-page">load page 10</button></div>
- <div>
- <button class="btn btn-show-comment-box js-show-comment-box">add comment</button>
- <form class="comment-form" method="post" action="{{=it.comment_url}}">
- <textarea name="content" maxlength="10000" id="comment"></textarea>
- <br/>
- <input type="submit" class="btn comment-submit" value="post" />
- </form>
- </div>
+ </div>
+
+</script>
+
+<script type="text/template" id="item-comments-template">
+
+ <div class="js-loading"><h4>Loading...</h4></div>
+ <div class="item-comments">
+ <div class="op"></div>
+ <div class="page-1"><button class="btn btn-load-page js-load-page">load page 1</button></div>
+ <div class="page-2"><button class="btn btn-load-page js-load-page">load page 2</button></div>
+ <div class="page-3"><button class="btn btn-load-page js-load-page">load page 3</button></div>
+ <div class="page-4"><button class="btn btn-load-page js-load-page">load page 4</button></div>
+ <div class="page-5"><button class="btn btn-load-page js-load-page">load page 5</button></div>
+ <div class="page-6"><button class="btn btn-load-page js-load-page">load page 6</button></div>
+ <div class="page-7"><button class="btn btn-load-page js-load-page">load page 7</button></div>
+ <div class="page-8"><button class="btn btn-load-page js-load-page">load page 8</button></div>
+ <div class="page-9"><button class="btn btn-load-page js-load-page">load page 9</button></div>
+ <div class="page-10"><button class="btn btn-load-page js-load-page">load page 10</button></div>
+ <!-- comment maybe gone forever :(
+ <div>
+ <button class="btn btn-show-comment-box js-show-comment-box">add comment</button>
+ <form class="comment-form" method="post" action="{{=it.comment_url}}">
+ <textarea name="content" maxlength="10000" id="comment"></textarea>
+ <br/>
+ <input type="submit" class="btn comment-submit" value="post" />
+ </form>
+ </div>
+ -->
+ <div class="goto-item" id="goto-item-{{=it.id}}">
+ <button class="btn"><i class="icon-arrow-up"></i> back</button>
</div>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.