Closed ansonphong closed 10 years ago
michelhabib
commented
10 years ago i already implemented add/edit/delete/reply functionality in the load-comments component. i will look at it to see if it is possible to refactor to look more organized like the way you documented edit-comment directive. my original goal was more about performance rather than separation of components. so i will leave this open till i review it.
michelhabib
commented
10 years ago Phong, I put notes in the html for comment-default.html, to help us look at the possible separation - below. I am sorry i deviated from the original design, but if you believe we should still go with the original edit-comment directive, let me know.
here is the template:-
<div>
<!-- Temporarily show Post ID -->
<div>
view comments for post # {{treedata.children[0].comment_post_ID}}
</div>
<!-- Select Order By Options -->
<div>
<select class="form-control" ng-model="orderBy" ng-options="code as name for (code,name) in orderOptions" ng-change="loadComments()" ng-init="loadComments()">
</select>
</div>
<!-- Show Loading Icon While Loading -->
<div ng-hide="commentsLoaded" class="text-center">
<i class="icon-spinner icon-spin icon-large" style="font-size:48px; padding:20px"></i>
</div>
<!-- Show Comments Tree After Loading -->
<!-- This UL is wholly replicated every time there is a child Comment -->
<ul ng-show="commentsLoaded">
<div streeviewmodel ya-tree="child in treedata.children at ul" ng-class="{minimized:child.minimized}" ng-init="OpenClose(child)">
<div>
<!-- Maximize/Minimize Icon based on Karma Points -->
<span ng-switch on="child.minimized">
<i ng-switch-when="true" class="icon-plus-sign-alt" data-ng-click="toggleMinimized(child)"></i>
<i ng-switch-when="false" class="icon-minus-sign-alt" data-ng-click="toggleMinimized(child)"></i>
</span>
<!-- Add/Remove Points -->
<span>
<div class="glyphicon glyphicon-chevron-up" ng-click="karmaAdd(child)"></div>
<div class="glyphicon glyphicon-chevron-down" ng-click="karmaRemove(child)"></div>
</span>
<!-- Author / Date / Points -->
<span class="cm_author">{{child.comment_author}}</span>
<span > . </span>
<span title="{{ child.comment_date | date:'medium' }}">{{child.comment_date|timeago}}</span>
<span > . </span>
<span >{{child.comment_date| date:'yyyy-MM-dd HH:mm:ss'}}</span>
<span > . </span>
<span ><strong>{{child.karmaPoints}}</strong> karma</span>
<span > . </span>
<span ><strong>{{child.comment_ID}}</strong></span>
<div class="indent" ng-show="!child.minimized">
<!-- Comment Body Text -->
<span ng-switch on="child.editMode" ng-init="child.editMode=false">
<!-- Edit Mode, Show a Text Box -->
<div ng-switch-when="true" >
<textarea class="form-control margin-bottom" rows=6 ng-model="child.editText" ng-init="child.editText=child.comment_content" placeholder="What do you think..." ng-disabled="child.editInProgress"></textarea>
<div ng-show="child.editError" class="pull-left alert alert-danger error" >
{{child.editError}}
</div>
<div class=pull-right>
<button type="button" class="btn btn-primary btn-sm" ng-click="editComment(child)" ng-disabled="child.editInProgress">Save</button>
<button type="button" class="btn btn-default btn-sm" ng-click="child.editMode=false" ng-disabled="child.editInProgress">Cancel</button>
</div>
<div style='clear: both;'></div>
</div>
<!-- View Mode, Show Formatted Text -->
<div ng-switch-when="false" id="profile-description">
<div ng-show-more class="text" class="showMoreHeight" ng-class={showMoreHeight:child.showMore} ng-bind-html="child.trustedContent" ng-init="trustHtml(child)">
</div>
<!-- More/Less Directive - In Progress -->
<div ng-show="child.showMore" class='show-more' ng-click="child.showMore=false;">More</div>
<div ng-show="!child.showMore && child.tall" class='show-less' ng-click="child.showMore=true;">Less</div>
</div>
</span>
<!-- Control Bar: Edit/Delete/Reply -->
<div class="pull-right">
<!-- Edit if This is your comment -->
<span ng-if="child.user_id==user_id">
<span ng-click="toggleEditBox(child)" >edit</span>
<span > . </span>
</span>
<!-- Delete if This is your comment -->
<span ng-if="child.user_id==user_id">
<span ng-click="toggleDeleteBox(child)">delete</span>
<span > . </span>
</span>
<!-- Reply -->
<span ng-click="toggleReplyBox(child)" >reply</span>
</div>
<hr>
<!-- Reply Box -->
<div ng-show="child.replyBox">
<textarea class="form-control margin-bottom" rows="3" ng-model="child.replyText" placeholder="What do you think..." ng-disabled="child.replyInProgress"></textarea>
<div ng-show="child.replyError" class="pull-left alert alert-danger error" >
{{child.replyError}}
</div>
<div class=pull-right>
<button type="button" class="btn btn-primary btn-sm" ng-click="replyComment(child)" ng-disabled="child.replyInProgress">Reply</button>
<button type="button" class="btn btn-default btn-sm" ng-click="child.replyBox=false" ng-disabled="child.replyInProgress">Cancel</button>
</div>
</div>
<!-- Delete Box -->
<div ng-show="child.deleteBox">
<div class=pull-right>
<span class="alert-danger error" >Are you sure you want to delete this comment?</span>
<button type="button" class="btn btn-primary btn-sm" ng-click="deleteComment(child)" ng-disabled="child.deleteInProgress">Delete</button>
<button type="button" class="btn btn-default btn-sm" ng-click="child.deleteBox=false" ng-disabled="child.deleteInProgress">Cancel</button>
</div>
<div ng-show="child.deleteError" class="pull-left alert alert-danger error" >
{{child.deleteError}}
</div>
</div>
<div style='clear: both;'></div>
<ul data-ng-show="!child.minimized" ng-class="{pregnant:child.children.length, indent:true}">
</ul>
</div>
</div>
</div>
</ul>
<!-- Add a new comment to the Post - Top Level Comment Only -->
<div ng-show="commentsLoaded">
<textarea class="form-control margin-bottom" rows="3" ng-model="treedata.replyText" placeholder="What do you think..." ng-disabled="treedata.replyInProgress"></textarea>
<div ng-show="treedata.replyError" class="pull-left alert alert-danger error" >
{{treedata.replyError}}
</div>
<div class=pull-right>
<button type="button" class="btn btn-primary btn-sm" ng-click="replyComment(treedata)" ng-disabled="treedata.replyInProgress">New Comment</button>
</div>
<div style='clear: both;'></div>
</div>
</div>
ansonphong
commented
10 years ago That's an interesting conversation point to have. Seeing as how this software development is now transitioning from contracted development into open source development, so that the changes we make here echo onward, so I'm also prepared to change the angle of the conversation so that I'm not dictating things to you, since I really want to know your opinion.
Originally in the specifications I wrote naively from a theme developer's perspective about what would seem to be the most logical straightforward approach, so that if I were editing the comment templates myself, or explaining to somebody else how to edit the templates, in the process what would be the easiest?
So my conclusion at the time was to have the templates broken apart into :
Or somthing along those lines, so that the elements were easily distinguishable. Of course with the 'edit' template, we could use a ng-switch depending on if we were in 'edit' mode or 'new' comment mode.
What do you think is the best approach? I'm interested in completing what is the best for the application, I'm interested in your opinion, and I want to honor your time and efforts.
michelhabib
commented
10 years ago what you originally proposed works very well in my initial design (Design1).
Note that i repeated this design for the following reason:- Design 1: was very modular and breakable into recursive templates and separable comment templates. However, due to the way it is designed for simple editing, it compromised the performance. the main reason is that it has to compile each recursive template, resulting in x compiles depending on the number of comments. so 100 comment = 100 compile, a very expensive approach.
Design 2: was doing a single compile call, with performance increased 3 times Design 1. However, the compromise here was to make the template more condensed, the way it is now, which makes the separation much harder. especially when it comes to isolating the scope of a template.
Another point to consider here, the functionality of the comments tree, where you have multiple functions:- 1- Maximize/Minimize 2- Display Comment header 3- display indented comment text [or editable text of the comment for editing] 4- display control bar [reply/edit/delete] 5- display reply box or delete box or edit box [below the control bar]
The above structure breaks the comments tree in a way that might not be too logical for the theme editors, since functionality of the above 5 areas are interconnected.
That is why i think the comments template should be the same block i listed above, and any theme changes need to be done on the same single template.
ansonphong
commented
10 years ago OK well articulated - let's keep it in the single template then.
Hi Michel, I produced the documentation for edit-comment directive. We will want to finish load-comments first before doing this, as they go hand-in-hand.
edit-comment [ directive ] https://github.com/phongmedia/postworld/tree/master/js#edit-comment--directive-
Add Comment
Edit Comment
Reply to Comment
The PHP functions have already been written for this, and they live in
php/postworld-comments.php, and are documented under 'PHP Helper Functions' on the directive documentation.