├── index.js
├── package.json
├── LICENSE
├── npm-debug.log
├── components
    └── PhotoGridComponent.vue
└── README.md


/index.js:
--------------------------------------------------------------------------------
1 | import PhotoGridComponent from './components/PhotoGridComponent.vue'
2 | 
3 | export default {
4 |   install: function (Vue, options) {
5 |     Vue.component('photoGrid', PhotoGridComponent)
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-photo-grid",
 3 |   "version": "1.0.1",
 4 |   "description": "This component let you automatically arrange the photos depending on their clusters.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/orlyyani/photo-grid.git"
12 |   },
13 |   "keywords": [
14 |     "vue",
15 |     "vuejs",
16 |     "photo",
17 |     "grid",
18 |     "photogrid",
19 |     "album",
20 |     "arrange",
21 |     "vue.js",
22 |     "js",
23 |     "javascript",
24 |     "npm"
25 |   ],
26 |   "author": "Lyor",
27 |   "license": "MIT",
28 |   "bugs": {
29 |     "url": "https://github.com/orlyyani/photo-grid/issues"
30 |   },
31 |   "homepage": "https://github.com/orlyyani/photo-grid#readme"
32 | }
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Orly John Yanson
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/npm-debug.log:
--------------------------------------------------------------------------------
 1 | 0 info it worked if it ends with ok
 2 | 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
 3 | 1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
 4 | 1 verbose cli   'version',
 5 | 1 verbose cli   'patch',
 6 | 1 verbose cli   '-m',
 7 | 1 verbose cli   'fixed issue #1' ]
 8 | 2 info using npm@3.10.10
 9 | 3 info using node@v6.11.1
10 | 4 info git [ 'status', '--porcelain' ]
11 | 5 verbose stack Error: Git working directory not clean.
12 | 5 verbose stack M  components/PhotoGridComponent.vue
13 | 5 verbose stack AD npm-debug.log
14 | 5 verbose stack     at C:\Program Files\nodejs\node_modules\npm\lib\version.js:247:19
15 | 5 verbose stack     at C:\Program Files\nodejs\node_modules\npm\lib\utils\no-progress-while-running.js:21:8
16 | 5 verbose stack     at ChildProcess.exithandler (child_process.js:195:7)
17 | 5 verbose stack     at emitTwo (events.js:106:13)
18 | 5 verbose stack     at ChildProcess.emit (events.js:191:7)
19 | 5 verbose stack     at maybeClose (internal/child_process.js:891:16)
20 | 5 verbose stack     at Socket.<anonymous> (internal/child_process.js:342:11)
21 | 5 verbose stack     at emitOne (events.js:96:13)
22 | 5 verbose stack     at Socket.emit (events.js:188:7)
23 | 5 verbose stack     at Pipe._handle.close [as _onclose] (net.js:497:12)
24 | 6 verbose cwd C:\xampp\htdocs\vue-plugins\src\plugins\photo-grid
25 | 7 error Windows_NT 10.0.15063
26 | 8 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "version" "patch" "-m" "fixed issue #1"
27 | 9 error node v6.11.1
28 | 10 error npm  v3.10.10
29 | 11 error Git working directory not clean.
30 | 11 error M  components/PhotoGridComponent.vue
31 | 11 error AD npm-debug.log
32 | 12 error If you need help, you may report this error at:
33 | 12 error     <https://github.com/npm/npm/issues>
34 | 13 verbose exit [ 1, true ]
35 | 


--------------------------------------------------------------------------------
/components/PhotoGridComponent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="grid-component">
  3 | 		<div class="__image_container" v-bind:style="styles">
  4 | 			<slot>
  5 |     	</slot>
  6 | 			<div v-if="count > 0" v-on:click="passData()" class="__image_body __quarter __image_count"><p>{{image_excess}}</p></div>
  7 | 		</div>
  8 | 	</div>
  9 | </template>
 10 | 
 11 | <script>
 12 | 	module.exports = {
 13 | 		props: {
 14 | 			boxWidth: { type: String, default: 'auto' },
 15 | 			boxHeight: { type: String, default: '200px' },
 16 | 			boxBorder: { type: Number, default: 0 },
 17 | 			excessText: { type: String, default: 'View more {{count}} images'}
 18 | 		},
 19 | 
 20 | 		data: function(){
 21 | 			return{
 22 | 				styles: {
 23 | 					width: this.boxWidth,
 24 | 					height: this.boxHeight,
 25 | 					'border-radius': this.boxBorder + 'px',
 26 | 					overflow: 'hidden'
 27 | 				},
 28 | 				image_excess: 0
 29 | 			}
 30 | 		},
 31 | 
 32 | 		computed: {
 33 | 			$child() {
 34 |       	return this.$el;
 35 |     	},
 36 | 
 37 |     	countImageLength(){
 38 | 				return this.$slots.default.length
 39 | 			},
 40 | 
 41 | 			count(){
 42 | 				return this.$slots.default.length - 4;
 43 | 			},
 44 | 		},
 45 | 
 46 | 		mounted(){
 47 | 			let __image_Size = this.$slots.default.length;
 48 | 			this.$slots.default.forEach(vnode => {
 49 | 				vnode.elm.className += "__image_body"
 50 | 
 51 |         vnode.elm.setAttribute("style", "background-image: url( " + vnode.elm.src + ")");
 52 | 				switch (true) {
 53 | 					case (__image_Size == 1):
 54 | 	      		vnode.elm.className += " __single"
 55 | 					break;
 56 | 					case (__image_Size == 3):
 57 | 	      		vnode.elm.className += " __triple"
 58 | 					break;
 59 | 					case (__image_Size == 4):
 60 | 	      		vnode.elm.className += " __quarter"
 61 | 					break;
 62 | 					case (__image_Size > 4):
 63 | 	      		vnode.elm.className += " __quarter __more_image"
 64 | 					break;
 65 | 				}
 66 | 	    }),
 67 | 
 68 | 	    this.pareseExcessText()
 69 | 		},
 70 | 
 71 | 		methods: {
 72 | 			passData(){
 73 | 				this.$emit('clickExcess')
 74 | 			},
 75 | 
 76 | 			pareseExcessText(){
 77 | 				this.image_excess = this.excessText.replace('{{count}}', this.$slots.default.length - 4);
 78 | 			}
 79 | 		}
 80 | 	}
 81 | </script>
 82 | 
 83 | <style scoped>
 84 | 	.__image_container{
 85 | 		height: 200px;
 86 | 		width: 200px;
 87 | 		display: inline-block;
 88 | 		position: relative;
 89 | 	}
 90 | 	.__image_body:first-child, .__image_body:last-child, .__image_body.__quarter:nth-child(3){
 91 | 		float: left;
 92 | 	}
 93 | 	.__image_body.__single{
 94 |     width: 100%;
 95 |     height: 100%;
 96 |   }
 97 |   .__image_body.__triple, .__image_body.__quarter{
 98 |     height: 50%;
 99 |   }
100 |   .__image_body.__triple:nth-child(2), .__image_body.__quarter:nth-child(2), 
101 |   .__image_body.__quarter:last-child, .__image_body.__more_image:nth-child(4){
102 |   	float: right;
103 |   }
104 |   .__image_count{
105 |   	display: inline-flex !important;
106 |     align-items: center !important;
107 |     justify-content: center;
108 |   	position: absolute;
109 |     bottom: 0;
110 |     color: #fff;
111 |     font-size: 1em;
112 |     background: rgba(0, 0, 0, 0.5) !important;
113 |   }
114 |   .__image_body.__triple:last-child{
115 |   	width: 100%;
116 |   }
117 | 	.__image_body{
118 |     width: 50%;
119 |     height: 100%;
120 |     background: #d8d8d8;
121 |     object-fit: cover;
122 |     display: inline;
123 |   }
124 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Photo Grid Component
  2 | 
  3 | [![npm version](https://badge.fury.io/js/vue-photo-grid.svg)](https://badge.fury.io/js/vue-photo-grid)
  4 | 
  5 | This component let you automatically arrange the photos depending on their clusters.
  6 | 
  7 | 
  8 | # Examples
  9 | 
 10 | For examples, refer to [the demo page](https://orlyyani.github.io/photo-grid/#/).
 11 | 
 12 | # NPM
 13 | 
 14 | ```
 15 |  npm install vue-photo-grid
 16 | ```
 17 | 
 18 | # Features!
 19 | 
 20 |   - Arrange depending on their numbers.
 21 |   - Edit grids width and height.
 22 |   - Edit grids radius.
 23 |   - Passess an argument when clicking the excess the images.
 24 | 
 25 | # Usage
 26 | 
 27 | ```
 28 | import PhotoGrid from 'vue-photo-grid';
 29 |  
 30 | Vue.use(PhotoGrid);
 31 | ```
 32 | 
 33 | # Sample
 34 | 
 35 | ```
 36 | <template>
 37 |   <div id="photo-grid">
 38 |     <photo-grid :box-height="'200px'" :box-width="'20%'" :excess-text="'+ {{count}}'" v-on:clickExcess="triggerClick">
 39 |       <img v-for="imahe in images" v-bind:src="imahe.url"/>
 40 |     </photo-grid>
 41 |   </div>
 42 | </template>
 43 | 
 44 | <script>
 45 | export default {
 46 |   data () {
 47 |     return {
 48 |       images: [
 49 |         {
 50 |           title: "image 1",
 51 |           url: "https://img00.deviantart.net/e895/i/2017/275/7/d/ultra_sun_ultra_moon_by_kawacy-dbpbuiq.jpg" 
 52 |         }, {
 53 |           title: "image 2",
 54 |           url: "https://img00.deviantart.net/870d/i/2009/174/d/b/sweet_summer_ii_by_zanasoul.jpg" 
 55 |         }, {
 56 |           title: "image 3",
 57 |           url: "https://pre00.deviantart.net/9b5b/th/pre/i/2017/205/c/8/electra_by_mistanphotography-dbhgxsz.jpg" 
 58 |         }, {
 59 |           title: "image 4",
 60 |           url: "https://img00.deviantart.net/47b3/i/2017/140/0/7/wonder_woman_by_pencilhead7-db9w9lw.png" 
 61 |         }, {
 62 |           title: "image 5",
 63 |           url: "https://orig00.deviantart.net/2b7a/f/2017/275/5/6/daily_paint_1777__swineapple_by_cryptid_creations-dbpboas.png" 
 64 |         }, {
 65 |           title: "image 6",
 66 |           url: "https://pre00.deviantart.net/a41c/th/pre/i/2015/014/9/8/swan_by_avine-d8dw53d.jpg" 
 67 |         }
 68 |       ]
 69 |     }
 70 |   },
 71 | 
 72 |   methods: {
 73 |     triggerClick() {
 74 |       // Some code here...
 75 |     }
 76 |   },
 77 | }
 78 | </script>
 79 | ```
 80 | 
 81 | ### Using Options
 82 | 
 83 | All read more options were converted to props to be able use them in the `vue-photo-grid` component.
 84 | 
 85 | *Usage*
 86 | ```html
 87 | <photo-grid :box-height="'500px'" :box-width="'500px'" :excess-text="'+ {{count}}'" v-on:clickExcess="triggerClick">
 88 |   <img v-for="imahe in images" v-bind:src="imahe.url"/>
 89 | </photo-grid>
 90 | ```
 91 | 
 92 | # API
 93 | 
 94 | 
 95 | | Option | Type | Default | Description |
 96 | |--------|------|---------|-------------|
 97 | | `boxWidth` | `String` | `200px` | let you edit the grids Width depending on your ideal choice you can change the size unit (pixels or percentage)  | 
 98 | | `boxHeight` | `String` | `200px` | let you edit the grids Height depending on your ideal choice you can change the size unit (pixels or percentage) |
 99 | | `boxBorder` | `Number` | `0` |  This feature makes you add the border og the grid.
100 | | `excessText` | `String` | `View more {{count}} images` |  You can change the text whenever the number of your image exceeds 4 and above.
101 | 
102 | *Note:*
103 | You can customize the text between the `{{count}}` in the `excessText`. Note that `{{count}}` is the default value of the excess number in your list of images.
104 | 
105 | # Events
106 | 
107 | 
108 | | Name | Description |
109 | |--------|-------------|
110 | | `clickExcess` | You can pass your method here whenever you click the excess images number. | 
111 | 
112 | 
113 | # License
114 | 
115 | #### MIT
116 | Use at your own risk!
117 | with :heart: by Lyor
118 | 


--------------------------------------------------------------------------------