Display Exif

This commit is contained in:
syuilo 2017-12-08 21:12:49 +09:00
parent 303ccaa2f7
commit c88097298f
7 changed files with 157 additions and 2 deletions

View file

@ -3,6 +3,7 @@
*/ */
import * as childProcess from 'child_process'; import * as childProcess from 'child_process';
import * as fs from 'fs';
import * as Path from 'path'; import * as Path from 'path';
import * as gulp from 'gulp'; import * as gulp from 'gulp';
import * as gutil from 'gulp-util'; import * as gutil from 'gulp-util';
@ -180,7 +181,9 @@ gulp.task('build:client:pug', [
.pipe(pug({ .pipe(pug({
locals: { locals: {
themeColor: constants.themeColor, themeColor: constants.themeColor,
facss: fontawesome.dom.css() facss: fontawesome.dom.css(),
//hljscss: fs.readFileSync('./node_modules/highlight.js/styles/default.css', 'utf8')
hljscss: fs.readFileSync('./src/web/assets/code-highlight.css', 'utf8')
} }
})) }))
.pipe(htmlmin({ .pipe(htmlmin({

View file

@ -441,6 +441,7 @@ mobile:
rename: "Rename" rename: "Rename"
move: "Move" move: "Move"
hash: "Hash (md5)" hash: "Hash (md5)"
exif: "EXIF"
mk-entrance-signin: mk-entrance-signin:
signup: "Sign up" signup: "Sign up"

View file

@ -441,6 +441,7 @@ mobile:
rename: "名前を変更" rename: "名前を変更"
move: "移動" move: "移動"
hash: "ハッシュ (md5)" hash: "ハッシュ (md5)"
exif: "EXIF"
mk-entrance-signin: mk-entrance-signin:
signup: "新規登録" signup: "新規登録"

View file

@ -97,6 +97,7 @@
"escape-regexp": "0.0.1", "escape-regexp": "0.0.1",
"event-stream": "3.3.4", "event-stream": "3.3.4",
"eventemitter3": "3.0.0", "eventemitter3": "3.0.0",
"exif-js": "^2.3.0",
"express": "4.16.2", "express": "4.16.2",
"file-type": "7.4.0", "file-type": "7.4.0",
"fuckadblock": "3.2.1", "fuckadblock": "3.2.1",
@ -113,6 +114,7 @@
"gulp-typescript": "3.2.3", "gulp-typescript": "3.2.3",
"gulp-uglify": "3.0.0", "gulp-uglify": "3.0.0",
"gulp-util": "3.0.8", "gulp-util": "3.0.8",
"highlight.js": "^9.12.0",
"inquirer": "4.0.1", "inquirer": "4.0.1",
"is-root": "1.0.0", "is-root": "1.0.0",
"is-url": "1.2.2", "is-url": "1.2.2",

View file

@ -24,6 +24,9 @@ html
//- FontAwesome style //- FontAwesome style
style #{facss} style #{facss}
//- highlight.js style
style #{hljscss}
body body
noscript: p noscript: p
| JavaScriptを有効にしてください | JavaScriptを有効にしてください

View file

@ -1,6 +1,6 @@
<mk-drive-file-viewer> <mk-drive-file-viewer>
<div class="preview"> <div class="preview">
<img if={ kind == 'image' } src={ file.url } alt={ file.name } title={ file.name }> <img if={ kind == 'image' } src={ file.url } alt={ file.name } title={ file.name } onload={ onImageLoaded } ref="img">
<virtual if={ kind != 'image' }>%fa:file%</virtual> <virtual if={ kind != 'image' }>%fa:file%</virtual>
<footer if={ kind == 'image' && file.properties && file.properties.width && file.properties.height }> <footer if={ kind == 'image' && file.properties && file.properties.width && file.properties.height }>
<span class="size"> <span class="size">
@ -39,6 +39,14 @@
</button> </button>
</div> </div>
</div> </div>
<div class="exif" show={ exif }>
<div>
<p>
%fa:camera%%i18n:mobile.tags.mk-drive-file-viewer.exif%
</p>
<pre ref="exif" class="json">{ exif ? JSON.stringify(exif, null, 2) : '' }</pre>
</div>
</div>
<div class="hash"> <div class="hash">
<div> <div>
<p> <p>
@ -178,12 +186,45 @@
white-space nowrap white-space nowrap
overflow auto overflow auto
font-size 0.8em font-size 0.8em
color #222
border solid 1px #dfdfdf
border-radius 2px
background #f5f5f5
> .exif
padding 14px
border-top solid 1px #dfdfdf
> div
max-width 500px
margin 0 auto
> p
display block
margin 0
padding 0
color #555
font-size 0.9em
> [data-fa]
margin-right 4px
> pre
display block
width 100%
margin 6px 0 0 0
padding 8px
height 128px
overflow auto
font-size 0.9em
border solid 1px #dfdfdf border solid 1px #dfdfdf
border-radius 2px border-radius 2px
background #f5f5f5 background #f5f5f5
</style> </style>
<script> <script>
import EXIF from 'exif-js';
import hljs from 'highlight.js';
import bytesToSize from '../../../common/scripts/bytes-to-size'; import bytesToSize from '../../../common/scripts/bytes-to-size';
import gcd from '../../../common/scripts/gcd'; import gcd from '../../../common/scripts/gcd';
@ -195,6 +236,17 @@
this.file = this.opts.file; this.file = this.opts.file;
this.kind = this.file.type.split('/')[0]; this.kind = this.file.type.split('/')[0];
this.onImageLoaded = () => {
const self = this;
EXIF.getData(this.refs.img, function() {
const allMetaData = EXIF.getAllTags(this);
self.update({
exif: allMetaData
});
hljs.highlightBlock(self.refs.exif);
});
};
this.rename = () => { this.rename = () => {
const name = window.prompt('名前を変更', this.file.name); const name = window.prompt('名前を変更', this.file.name);
if (name == null || name == '' || name == this.file.name) return; if (name == null || name == '' || name == this.file.name) return;

View file

@ -0,0 +1,93 @@
.hljs {
font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
}
.hljs,
.hljs-subst {
color: #444;
}
.hljs-comment {
color: #888888;
}
.hljs-keyword {
color: #2973b7;
}
.hljs-number {
color: #ae81ff;
}
.hljs-string {
color: #e96900;
}
.hljs-regexp {
color: #e9003f;
}
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name {
font-weight: bold;
}
.hljs-type,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
color: #880000;
}
.hljs-title,
.hljs-section {
color: #880000;
font-weight: bold;
}
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #BC6060;
}
/* Language color: hue: 90; */
.hljs-literal {
color: #78A960;
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
color: #397300;
}
/* Meta color: hue: 200 */
.hljs-meta {
color: #1f7199;
}
.hljs-meta-string {
color: #4d99bf;
}
/* Misc effects */
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}