Collapsible threaded nested comments for Ionic and Angular
Member since 2014
Threaded comments for Ionic and Angular. Used for collapsible nested comment threads with multiple levels of indentation for Wordpress, Reddit or various other social networks. Can also be used to display any other list of comments.
Tap on any comment to show replies, swipe it to the left to reveal options.
bower install ionic-threads
Include ionic.threads.js and ionic.threads.css after the rest of your Ionic and Angular includes.
<script src="lib/ionic-threads/ionic.threads.js"></script>
<link href="lib/ionic-threads/ionic.threads.css" rel="stylesheet">Add ionic.contrib.ui.ionicThreads as a module dependency of your app. Then use the following AngularJS directives:
<ion-thread comments="comments" post="post"></ion-thread>Included is an example app that loads the first few posts from the Reddit frontpage, clicking on a post leads to the comment section.
Go to /example folder and run:
npm install
ionic serve
Open up ionic.threads.js and change the ionComment template and add your <ion-option-button> of choice and add the code for the button events.
Included is the ionic.threads.scss if you want to customize the styling. There are variables for colors, font sizes and thread indendation. Add ionic.threads.scss to your scss folder and include it in your ionic.app.scss file with:
@import "www/lib/ionic-threads/ionic.threads.scss";Ionic threads is currently used in Updraft for Reddit (www.upvote.io)
Icon by www.somerandomdude.com
Hey there! You'll need to log in before you can leave a comment here.
Nikola Would you be so nice and give us a schematic view of data objects that are expected by this library? Just single post object and two sub-whatever records to see the structure and how it binds together. I'm having some difficulties to install the demo as npm install has multiple versions objections.
Hi Alex, try running the example without "npm install", I think everything is in the /lib folder and you probably have everything installed already. As for the example objects, the ion-thread directive expects an array of comments. Each comment should contain an array of their child comments. Depending on the API you are using, you will need to update this section of the code: <li ng-repeat="comment in comment.data.replies.data.children">\ <ng-include src="\'node.html\'"/>\ </li>\ "comment.data.replies.data.children" is Reddit's structure, this can be replaced with any array of replies that's a property on the comment object (e.g. comment.replies). The comments themselves have a data object with properties like comment.data.author and comment.data.body, this can be replaced according to your API (in Facebook's case it would be comment.from and comment.message). Cheers, Nikola
Hi Alex, try running the example without "npm install", I think everything is in the /lib folder and you probably have everything installed already. As for the example objects, the ion-thread directive expects an array of comments. Each comment should contain an array of their child comments. Depending on the API you are using, you will need to update this section of the code: <li ng-repeat="comment in comment.data.replies.data.children">\ <ng-include src="\'node.html\'"/>\ </li>\ "comment.data.replies.data.children" is Reddit's structure, this can be replaced with any array of replies that's a property on the comment object (e.g. comment.replies). The comments themselves have a data object with properties like comment.data.author and comment.data.body, this can be replaced according to your API (in Facebook's case it would be comment.from and comment.message). Cheers, Nikola
Nikola Would you be so nice and give us a schematic view of data objects that are expected by this library? Just single post object and two sub-whatever records to see the structure and how it binds together. I'm having some difficulties to install the demo as npm install has multiple versions objections.
Hey there! You'll need to log in before you can leave a rating here.
Good..
{{ rating.comment }}
{{ rating.comment }}
Good..
