|
<!DOCTYPE html> |
|
<html> |
|
|
|
|
|
|
|
|
|
|
|
<head> |
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" |
|
integrity="sha256-CMMTrj5gGwOAXBeFi7kNokqowkzbeL8ydAJy39ewjkQ=" |
|
crossorigin="anonymous"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.js" |
|
integrity="sha256-qwbDmNVLiCqkqRBpF46q5bjYH11j5cd+K+Y6D3/ja28=" |
|
crossorigin="anonymous"></script> |
|
<script |
|
src="https://code.jquery.com/jquery-3.3.1.js" |
|
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" |
|
crossorigin="anonymous"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lity/2.3.1/lity.js" |
|
integrity="sha256-28JiZvE/RethQIYCwkMdtSMHgI//KoTLeB2tSm10trs=" |
|
crossorigin="anonymous"></script> |
|
<link rel="stylesheet" |
|
href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.3.1/lity.css" |
|
integrity="sha256-76wKiAXVBs5Kyj7j0T43nlBCbvR6pqdeeZmXI4ATnY0=" |
|
crossorigin="anonymous" /> |
|
<style> |
|
h3 { font-family: sans-serif; font-size: 18px; } |
|
.thumb, .filter { font-family: sans-serif; font-size: 12px; } |
|
.filter { padding-bottom: 10px; } |
|
.thumb { display: inline-block; margin: 1px; text-align: center; } |
|
.thumb img, .thumb div { max-width: 150px; word-break: break-all; } |
|
</style> |
|
</head> |
|
<body> |
|
<div id="app" v-if="images"> |
|
<h3>Images in <a :href="directory">{{ directory }}</a></h3> |
|
<div class="filter"> |
|
Filter: <input v-model="pattern" placeholder="regexp"> |
|
</div> |
|
<div v-for="r in images" class="thumb" v-if="patternRe.test(r)"> |
|
<div>{{ r }}</div> |
|
<a :href="r" data-lity><img :src="r"></a> |
|
</div> |
|
</div> |
|
</body> |
|
<script> |
|
var theapp = new Vue({ |
|
el: '#app', |
|
data: { |
|
directory: window.location.pathname.replace(/[^\/]*$/, ''), |
|
images: null, |
|
pattern: '', |
|
}, |
|
created: function() { |
|
var self = this; |
|
$.get('./?' + Math.random(), function(d) { |
|
var imgurls = $.map($(d).find('a'), |
|
x => x.href).filter( |
|
x => x.match(/\.(jpg|jpeg|png|gif|svg)$/i)).map( |
|
x => x.replace(/.*\//, '')); |
|
self.images = imgurls; |
|
}, 'html'); |
|
}, |
|
computed: { |
|
patternRe: function() { |
|
try { |
|
return RegExp(this.pattern); |
|
} catch (e) { |
|
return /.*/; |
|
} |
|
} |
|
}, |
|
}) |
|
</script> |
|
</html> |
|
|
