* Fixed a bunch of little bugs

* Added more options to attachment page and filters
* Much better rendering and updating on attachment page
* Math bug is fixed with better string parsing fixes #14
* Icons are limited to 4 per note
* If an image is visible on note preview it will not appear in images preview
* Touched up text algorithm to better display note titles

client/src/pages/AttachmentsPage.vue

@@ -1,8 +1,8 @@
 <template>
-	<div class="ui basic segment no-fluf-segment">
+	<div class="ui basic segment no-fluf-segment" ref="content">
 		<div class="ui grid">
 
-			<div class="ui sixteen wide column">
+			<div class="ui twelve wide column">
 				<h2 class="ui header">
 					<i class="folder open outline icon"></i>
 						<div class="content">
@@ -10,13 +10,42 @@
 						<div class="sub header">Uploaded Files and Websites from notes.</div>
 					</div>
 				</h2>
+
+				<!-- subnav  -->
+				<router-link
+					exact-active-class="green" 
+					class="ui basic button" 
+					to="/attachments">
+					<i class="open folder outline icon"></i>
+					All
+				</router-link>
+				<router-link
+					v-if="$store.getters.totals && $store.getters.totals['linkFiles']"
+					exact-active-class="green" 
+					class="ui basic button" 
+					to="/attachments/type/links">
+					<i class="linkify icon"></i>
+					Links
+				</router-link>
+				<router-link 
+					v-if="$store.getters.totals && $store.getters.totals['otherFiles']"
+					exact-active-class="green"
+					class="ui basic button"
+					to="/attachments/type/files">
+					<i class="copy icon"></i>
+					Other Files
+				</router-link>
+
+			</div>
+			<div class="four wide bottom aligned column">
+				<i v-if="loading" class="green sync alternate loading icon"></i>
 			</div>
 
 			<div class="sixteen wide column" v-if="searchParams.noteId">
-				<div class="ui green button" v-on:click="clearNote">
+				<router-link class="ui green button" to="/attachments">
 					<i class="chevron circle left icon"></i>
-					Show All Attachments
-				</div>
+					Back to All
+				</router-link>
 				<div class="ui green button" v-on:click="openNote">
 					<i class="file outline icon"></i>
 					Open Note
@@ -47,11 +76,16 @@
 	export default {
 		components: {
 			'attachment-display': require('@/components/AttachmentDisplayCard').default,
+			'counter':require('@/components/AnimatedCounterComponent.vue').default,
 		},
 		data: function(){ 
 			return {
+				loading: false,
 				attachments: [],
-				searchParams: {}
+				searchParams: {},
+				loadedAttachmentsOffset: 0,
+				loadingBatchTimeout: null,
+				allLoaded: false,
 			}
 		},
 		beforeCreate: function(){
@@ -59,40 +93,107 @@
 			// Perform Login check
 			//
 			this.$parent.loginGateway()
+
 		},
 		mounted: function(){
 
+			//Load more attachments on scroll
+			window.addEventListener('scroll', this.onScroll)
+
 			//Mount notes on load if note ID is set
-			this.openNoteAttachments()
 			this.searchAttachments()
 		},
+		beforeDestroy(){
+
+			//Remove scroll event on destroy
+			window.removeEventListener('scroll', this.onScroll)
+		},
 		watch:{
 			$route (to, from){
-				//Open or close notes on route change
-				this.openNoteAttachments()
+
+				//Reset everything on route change
+				this.reset()
+				//Params are handled by search function
 				this.searchAttachments()
 			}
 		},
 		methods: {
-			openNoteAttachments(){
-				if(this.$route.params && this.$route.params.id){
-					const inputNoteId = this.$route.params.id
-					this.searchParams['noteId'] = inputNoteId
-				}
-			},
 			openNote(){
 				const noteId = this.searchParams['noteId']
 				this.$router.push('/notes/open/'+noteId)
 			},
-			clearNote(){
-				this.$router.push('/attachments/')
-				delete this.searchParams.noteId
+			onScroll(){
+				
+				clearTimeout(this.loadingBatchTimeout)
+				this.loadingBatchTimeout = setTimeout(() => {
+
+					//Distance to bottom of page
+					const bottomOfWindow = 
+					Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) 
+					+ window.innerHeight
+
+					//height of page
+					const offsetHeight = this.$refs.content.clientHeight
+
+					//Determine percentage down the page
+					const percentageDown = Math.round( (bottomOfWindow/offsetHeight)*100 )
+
+					//If greater than 80 of the way down the page, load the next batch
+					if(percentageDown >= 80){
+						
+						this.searchAttachments()
+					}
+
+				}, 50)
+			},
+			reset(){
+				this.attachments = []
+				this.loading = false
+				this.allLoaded = false
+				this.loadedAttachmentsOffset = 0
 			},
 			searchAttachments (){
 
+				if(this.loading || this.allLoaded){
+					return
+				}
+
+				delete this.searchParams.attachmentType
+				delete this.searchParams.noteId
+
+				//Set attchment type if in URL
+				if(this.$route.params.type){
+					this.searchParams.attachmentType = this.$route.params.type
+				}
+
+				//Set noteId in if in URL
+				if(this.$route.params.id){
+					this.searchParams.noteId = this.$route.params.id
+				}
+
+				//Offset of attchments to load
+				this.searchParams.offset = this.loadedAttachmentsOffset
+
+				if(this.allLoaded){
+					return
+				}
+
+				this.loading = true
 				axios.post('/api/attachment/search', this.searchParams)
 				.then( results => {
-					this.attachments = results.data
+
+					this.loading = false
+
+					if(results.data.length == 0){
+						this.allLoaded = true
+						return
+					}
+
+					//Load up the results
+					this.attachments.push(...results.data)
+
+					//Grab the next batch
+					this.loadedAttachmentsOffset += results.data.length
 				})
 			},
 		}