From c88097298f204bcd3f181e84e0028b2ec0a39814 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Fri, 8 Dec 2017 21:12:49 +0900 Subject: [PATCH] Display Exif --- gulpfile.ts | 5 +- locales/en.yml | 1 + locales/ja.yml | 1 + package.json | 2 + src/web/app/base.pug | 3 + src/web/app/mobile/tags/drive/file-viewer.tag | 54 ++++++++++- src/web/assets/code-highlight.css | 93 +++++++++++++++++++ 7 files changed, 157 insertions(+), 2 deletions(-) create mode 100644 src/web/assets/code-highlight.css diff --git a/gulpfile.ts b/gulpfile.ts index cb72272130..641500bbe2 100644 --- a/gulpfile.ts +++ b/gulpfile.ts @@ -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({ diff --git a/locales/en.yml b/locales/en.yml index 9a54eed674..3009aad8cb 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -441,6 +441,7 @@ mobile: rename: "Rename" move: "Move" hash: "Hash (md5)" + exif: "EXIF" mk-entrance-signin: signup: "Sign up" diff --git a/locales/ja.yml b/locales/ja.yml index dcf4663395..cdfcd6385c 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -441,6 +441,7 @@ mobile: rename: "名前を変更" move: "移動" hash: "ハッシュ (md5)" + exif: "EXIF" mk-entrance-signin: signup: "新規登録" diff --git a/package.json b/package.json index 6de1602886..3bcb5f198d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/web/app/base.pug b/src/web/app/base.pug index 140286a768..d7c7f0aed4 100644 --- a/src/web/app/base.pug +++ b/src/web/app/base.pug @@ -24,6 +24,9 @@ html //- FontAwesome style style #{facss} + //- highlight.js style + style #{hljscss} + body noscript: p | JavaScriptを有効にしてください diff --git a/src/web/app/mobile/tags/drive/file-viewer.tag b/src/web/app/mobile/tags/drive/file-viewer.tag index da895359dc..48fc83fa67 100644 --- a/src/web/app/mobile/tags/drive/file-viewer.tag +++ b/src/web/app/mobile/tags/drive/file-viewer.tag @@ -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; diff --git a/src/web/assets/code-highlight.css b/src/web/assets/code-highlight.css new file mode 100644 index 0000000000..f0807dc9c3 --- /dev/null +++ b/src/web/assets/code-highlight.css @@ -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; +}