Display Exif
This commit is contained in:
syuilo
parent
303ccaa2f7
commit
c88097298f
@ -3,6 +3,7 @@
|
||||
*/
|
||||
|
||||
import * as childProcess from 'child_process';
|
||||
import * as fs from 'fs';
|
||||
import * as Path from 'path';
|
||||
import * as gulp from 'gulp';
|
||||
import * as gutil from 'gulp-util';
|
||||
@ -180,7 +181,9 @@ gulp.task('build:client:pug', [
|
||||
.pipe(pug({
|
||||
locals: {
|
||||
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({
|
||||
|
||||
@ -441,6 +441,7 @@ mobile:
|
||||
rename: "Rename"
|
||||
move: "Move"
|
||||
hash: "Hash (md5)"
|
||||
exif: "EXIF"
|
||||
|
||||
mk-entrance-signin:
|
||||
signup: "Sign up"
|
||||
|
||||
@ -441,6 +441,7 @@ mobile:
|
||||
rename: "名前を変更"
|
||||
move: "移動"
|
||||
hash: "ハッシュ (md5)"
|
||||
exif: "EXIF"
|
||||
|
||||
mk-entrance-signin:
|
||||
signup: "新規登録"
|
||||
|
||||
@ -97,6 +97,7 @@
|
||||
"escape-regexp": "0.0.1",
|
||||
"event-stream": "3.3.4",
|
||||
"eventemitter3": "3.0.0",
|
||||
"exif-js": "^2.3.0",
|
||||
"express": "4.16.2",
|
||||
"file-type": "7.4.0",
|
||||
"fuckadblock": "3.2.1",
|
||||
@ -113,6 +114,7 @@
|
||||
"gulp-typescript": "3.2.3",
|
||||
"gulp-uglify": "3.0.0",
|
||||
"gulp-util": "3.0.8",
|
||||
"highlight.js": "^9.12.0",
|
||||
"inquirer": "4.0.1",
|
||||
"is-root": "1.0.0",
|
||||
"is-url": "1.2.2",
|
||||
|
||||
@ -24,6 +24,9 @@ html
|
||||
//- FontAwesome style
|
||||
style #{facss}
|
||||
|
||||
//- highlight.js style
|
||||
style #{hljscss}
|
||||
|
||||
body
|
||||
noscript: p
|
||||
| JavaScriptを有効にしてください
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<mk-drive-file-viewer>
|
||||
<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>
|
||||
<footer if={ kind == 'image' && file.properties && file.properties.width && file.properties.height }>
|
||||
<span class="size">
|
||||
@ -39,6 +39,14 @@
|
||||
</button>
|
||||
</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>
|
||||
<p>
|
||||
@ -178,12 +186,45 @@
|
||||
white-space nowrap
|
||||
overflow auto
|
||||
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-radius 2px
|
||||
background #f5f5f5
|
||||
|
||||
</style>
|
||||
<script>
|
||||
import EXIF from 'exif-js';
|
||||
import hljs from 'highlight.js';
|
||||
import bytesToSize from '../../../common/scripts/bytes-to-size';
|
||||
import gcd from '../../../common/scripts/gcd';
|
||||
|
||||
@ -195,6 +236,17 @@
|
||||
this.file = this.opts.file;
|
||||
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 = () => {
|
||||
const name = window.prompt('名前を変更', this.file.name);
|
||||
if (name == null || name == '' || name == this.file.name) return;
|
||||
|
||||
93
src/web/assets/code-highlight.css
Normal file
93
src/web/assets/code-highlight.css
Normal 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user