Skip to content
This repository has been archived by the owner on Nov 27, 2023. It is now read-only.

Commit

Permalink
adds directory sorting (#30)
Browse files Browse the repository at this point in the history 
* adds main files path to directories list for displaying list of directories

* fixes #26

* update npm dependencies

* adds directory sorting to the directories list

* removes boilerplate sorting code
Adds lodash to order the directories
for #28

* removes click even and sorting from subdirectories for #28

* removes base directory for #29

* adds rowspan attribute to table rows for #29

* removes unused sortDirection data property

* fixes #29 adds hover class for table rows and directories to table

* adds compiled files for directory sorting
  • Loading branch information
@cdowdy
cdowdy authored Oct 3, 2018
1 parent d5797a4 commit 579b1d2
Show file tree
Hide file tree
Showing 6 changed files with 210 additions and 92 deletions.
68 changes: 33 additions & 35 deletions assets/js/TinypngApp.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,41 +84,33 @@
</div><!-- /.col-xs-12 upload conatainer -->
<div class="col-xs-12">

<tabs>
<tab title="Files"
selected="true">
<tinypng-filelist
:files="fileList"
:tinypng-path="tinypngPath"
:tinypngDeletePath="tinypngDeletePath"
:tinypng-rename-path="tinypngRenamePath"
:tinypng-batch-optimize="tinypngBatchOptimize"
@tinypng-image-optimized="updateTinypngData"
@tinypng-batch-optimized="updateCompressionCount">
</tinypng-filelist>
</tab>

<tab title="Directories">

<table class="dashboardlisting">
<thead>
<tr>
<th>Directories</th>
<th>Sub Directories</th>
</tr>
</thead>
<tbody is="tinypng-directory"
:directories="tinypngDirectories"
:pathAllImages="allImagesPath">
</tbody>
</table>

<tinypng-newdir :directory=" currentDirectory"
:create-action-path="createDirectoryPath "
:delete-action-path="deleteDirectoryPath"
:directories="tinypngDirectories"></tinypng-newdir>
</tab>
</tabs>
<!--<keep-alive>-->
<tabs>
<tab title="Files"
selected="true">
<tinypng-filelist
:files="fileList"
:tinypng-path="tinypngPath"
:tinypngDeletePath="tinypngDeletePath"
:tinypng-rename-path="tinypngRenamePath"
:tinypng-batch-optimize="tinypngBatchOptimize"
@tinypng-image-optimized="updateTinypngData"
@tinypng-batch-optimized="updateCompressionCount">
</tinypng-filelist>
</tab>

<tab title="Directories">

<tinypng-directory :directories="tinypngDirectories">
</tinypng-directory>
<tinypng-newdir :directory=" currentDirectory"
:create-action-path="createDirectoryPath "
:delete-action-path="deleteDirectoryPath"
:directories="tinypngDirectories">
</tinypng-newdir>
</tab>
</tabs>
<!--</keep-alive>-->
</div>
</div>
</template>
Expand Down Expand Up @@ -262,7 +254,13 @@
updateCompressionCount: function (response) {
this.compressions = response;
},
},
computed: {
}
}
</script>
159 changes: 125 additions & 34 deletions assets/js/components/TinypngDirectoryList.vue
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,76 @@
<template>
<tbody>
<tr>
<td>
<a :href="pathAllImages">
Files
</a>
</td>
<td></td>
</tr>
<tr v-for="directory in directoriesList">
<td>
<a :href="directory.route ">
{{ directory.path }}
</a>
</td>
<td>
<p v-for="dir in directory.subdirectory" v-if="dir.path">
<a :href="dir.route">
{{ dir.path }}
</a>
</p>
</td>
</tr>
</tbody>
<table class="dashboardlisting table-hover"
role="grid"
aria-labelledby="directoryCaption"
aria-readonly="true"
id="tinypng-dirlist-table"
>
<caption id="directoryCaption">
Image Directories <span v-if="captionVisible">Sorted By Directory: {{ activeSortDirection }}</span>
</caption>
<thead>
<tr role="row">
<th scope="col"
role="columnheader"
:aria-sort=" activeSortDirection ? activeSortDirection : 'none' "
class="tinypng-table-header"
@click="sortBy('path')"
>
<span role="button"
tabindex="0"
class="tinypng-table-header--button" >
Directory
<i class="fa"
:class=" sortedIcons ">
</i>
</span>
</th>
<th scope="col"
role="columnheader"
>
Subdirectory
</th>
</tr>
</thead>
<tbody>
<template v-for="directory in sortedDirectories" >
<template v-if="directory.subdirectory.length < 1">
<tr role="row">
<td>
<a :href="directory.route ">
{{ directory.path }}
</a>
</td>
<td></td>
</tr>
</template>
<template v-else>
<tr role="row"
:rowspan="directory.subdirectory.length">
<td>
<a :href="directory.route ">
{{ directory.path }}
</a>
</td>
<td>
<p v-for="dir in directory.subdirectory" v-if="dir.path">
<a :href="dir.route">
{{ dir.path }}
</a>
</p>
</td>
</tr>
</template>
</template>
</tbody>
</table>
</template>

<script>
import orderBy from 'lodash/orderBy';
export default {
name: 'TinypngDirectorylist',
Expand All @@ -37,32 +82,78 @@
directory: {
},
// subdirectory: {
//
// },
pathAllImages: {
type: String,
},
subDirectoryPath: {
type: String,
}
},
},
data() {
return {
directoriesList: this.directories
captionVisible: false,
sort: {
sortBy: 'path',
activeDirection: '',
},
sortIcons: {
asc: false,
desc: false
},
directoriesList: this.directories,
currentSort: 'path',
}
},
methods: {
sortBy: function (sort) {
if (sort === this.sort.sortBy) {
this.sort.activeDirection = this.sort.activeDirection === 'ascending' ? 'descending' : 'ascending';
this.captionVisible = true;
}
this.sort.sortBy = sort;
}
},
computed: {
hasSubDirectory() {
return Object.keys(this.directoriesList).length > 0;
},
activeSortDirection(){
return this.sort.activeDirection;
},
sortedDirectories() {
let direction = 'asc';
if (this.sort.activeDirection === 'descending' ) {
direction = 'desc';
}
return orderBy( this.directoriesList, [ this.sort.sortBy ], [ direction ] );
},
// should refactor this to use props or data instead of returning the
// icon name in a string
sortedIcons() {
if ( this.sort.activeDirection === 'ascending' ) {
return 'fa-arrow-down';
}
if ( this.sort.activeDirection === 'descending' ) {
return 'fa-arrow-up';
}
return 'fa-arrows-v';
}
},
//
// mounted() {
// this.isActive = this.selected;
// }
}
</script>
28 changes: 15 additions & 13 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,20 @@
"devDependencies": {
"@symfony/webpack-encore": "^0.15.1",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-function-bind": "^6.22.0",
"babel-preset-env": "^1.6.0",
"bootstrap-vue": "^1.0.0-beta.9",
"copy-webpack-plugin": "^4.1.0",
"dropzone": "^5.2.0",
"babel-preset-env": "^1.7.0",
"bootstrap-vue": "^1.5.1",
"copy-webpack-plugin": "^4.5.2",
"dropzone": "^5.5.1",
"node-sass": "^4.5.3",
"rimraf": "^2.6.1",
"sass-loader": "^6.0.6",
"vue-click-outside": "git+https://github.com/vue-bulma/click-outside.git",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0"
"vue-click-outside": "^1.0.7",
"vue-loader": "^13.7.3",
"vue-template-compiler": "^2.5.17",
"webpack": "^3.12.0"
},
"browserslist ": [
"ie 10",
Expand All @@ -29,9 +29,11 @@
"dependencies": {
"axios": "^0.16.2",
"cpx": "^1.5.0",
"popper.js": "^1.12.5",
"uiv": "^0.12.0",
"vue": "^2.4.4"
"lodash": "^4.17.11",
"popper.js": "^1.14.4",
"uiv": "^0.12.3",
"vue": "^2.5.17",
"vue-table-component": "^2.0.0-alpha.1"
},
"scripts": {
"dev": "./node_modules/.bin/encore dev",
Expand Down
16 changes: 11 additions & 5 deletions src/Controller/TinyPNGBackendController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,12 @@ protected function getAllDirectories( $app, $fileList )
$filesystem = $this->fsSetup($app);
$urlGenerator = $app[ 'url_generator' ];

$files = [];
$files = [
[ 'path' => 'Files',
'route' => $urlGenerator->generate('tinypng-all-images'),
'subdirectory' => []
]
];

foreach ( $fileList as $object ) {
if ( $object[ 'type' ] == 'dir'
Expand All @@ -229,7 +234,8 @@ protected function getAllDirectories( $app, $fileList )

}

return $files;

return $files;

}

Expand All @@ -250,7 +256,7 @@ protected function listFileSystemPaths( $app, $paths )
&& !preg_match_all( '/.cache/i', $object[ 'basename' ] )
) {
$pathsList[] = [
'path' => $object[ 'path' ],
'path' => basename($object[ 'path' ]),
'route' => $urlGenerator->generate('tinypng-all-images', [ 'directory' => $object[ 'path' ] ])
];
}
Expand All @@ -271,7 +277,7 @@ protected function getAllFiles( Application $app, $fileList )
$filesystem = $this->fsSetup( $app );

$boltFilesPath = (new FilePathHelper( $app ) )->boltFilesPath() ;
$expectedMimes = $this->checkAccpetedTypes();
$expectedMimes = $this->checkAcceptedTypes();
$files = [];

foreach ( $fileList as $object ) {
Expand Down Expand Up @@ -470,7 +476,7 @@ private function fsSetup( Application $app )
/**
* @return array
*/
protected function checkAccpetedTypes()
protected function checkAcceptedTypes()
{

return [ 'image/jpeg', 'image/png', 'image/gif' ];
Expand Down
10 changes: 5 additions & 5 deletions web/tinypng.optimize.js
View file

Large diffs are not rendered by default.

21 changes: 21 additions & 0 deletions web/tinypng.styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,27 @@
}
}

#tinypng-dirlist-table .tinypng-table-header--button:focus,
#tinypng-dirlist-table .tinypng-table-header--button:active,
#tinypng-dirlist-table .tinypng-table-header--button:hover {
outline: #204460 solid 2px;
cursor: pointer;
}

/** need to override the specificity of bolts .dashboardlisting .th classes which set it @ 13px for font size
*/
#tinypng-dirlist-table .tinypng-table-header {
font-size: 16px;

}

#tinypng-dirlist-table .tinypng-table-header--button {
display: block;
width: 100%;
padding: .1875rem .625rem;
}

/*.tinypng-button-list {*/
/*list-style: none;*/
/*display: flex;*/
Expand Down

0 comments on commit 579b1d2

Please sign in to comment.