nux.use nuweb/mdl.io nux.use nuweb/router nux.use nux.mime mdlio.app() { mdlio.app.html "$@" } app.header() { : } mdlio.app.custom() { local func=$1; shift; nux.exec.or $func app.$func "$@"; } mdlio.app.html() { nuweb.content_type text/html echo local spec="$1"; shift; $spec "$@"; local appName=$(nux.exec.optional app.name); local title="$(nux.exec.optional title)"; echo "" +e html +e head e meta @charset utf-8 e meta @http-equiv x-ua-compatible @content ie=edge e meta @name "viewport" @content "width=device-width, initial-scale=1.0, minimum-scale=1.0" mdlio.css $(mdlio.app.custom color.primary) $(mdlio.app.custom color.accent) e link @rel stylesheet @href "$NUWEB_SCRIPT_URI/action:asset/mdlio-app.css" e link @rel stylesheet @href "https://unpkg.com/simplelightbox@1.11.0/dist/simplelightbox.css" nux.exec.optional app.custom.head e title "$title - $appName" -e head +e body .mdl-base +mdlio.layout .mdl-layout--fixed-header e.mdlio.header++ "$appName" mdlio.app.custom header -e div -e header if nux.check.function app.drawer ; then +e div .mdl-layout__drawer app.drawer nux.exec.optional drawer -e div fi +mdlio.main nux.exec.optional app.main.start main "$@" +e div @id scooter +e div .mdl-grid @id sizer e div @id gutter .gutter .mdl-cell .mdl-cell--1-col .mdl-cell--1-col-phone .mdl_cell--1-col-tablet -e div -e div nux.exec.optional app.main.end -e main -e div mdlio.app.photoswipe.html e script @src https://code.jquery.com/jquery-3.2.1.min.js e script @src https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js #e script @src https://unpkg.com/simplelightbox@1.11.0/dist/simple-lightbox.js e script @src https://unpkg.com/photoswipe@4.1.2/dist/photoswipe.js e script @src https://unpkg.com/photoswipe@4.1.2/dist/photoswipe-ui-default.js e link @rel stylesheet @href https://unpkg.com/photoswipe@4.1.2/dist/photoswipe.css e link @rel stylesheet @href https://unpkg.com/photoswipe@4.1.2/dist/default-skin/default-skin.css e script @src https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js e script @src "$NUWEB_SCRIPT_URI/action:asset/mdlio-app.js" e script @src "https://code.getmdl.io/1.3.0/material.min.js" nux.exec.optional scripts -e body -e html } app.color.primary() { echo teal } app.color.accent() { echo cyan } mdlio.app.infinity() { # outlayer: msnry, local container=$1; local item=$2; local nextPage=$3; local outlayer=""; e script """ var grid = document.querySelector('$container'); var infScroll = new InfiniteScroll( grid, { path: '$nextPage', append: '$item', $outlayer status: '.page-load-status', elementScroll: '.mdl-layout__content', }); """ } function mdlio.app.masonry() { local grid="$1" local gridItem="$2" local lightBoxItem="$3" local gutter="$4" local nextPage="$5"; e script """ var gallery = new mdlio.cardsGallery(document.querySelector('$grid'), '$gridItem', '$lightBoxItem'); """ } function mdlio.app.thumb.uri() { local filename="$1"; local mimetype="$2"; #if [ -d "$filename" ] ; then # nux.log info "File $filename is folder." # filename=$(find "$1" -maxdepth 1 -iname "*.jpg" -or -iname "*.png" | head -n1) # nux.log info "Using $filename for thumbnail." #fi local thumb_name="$(thumby.name.shared "$filename")" local dirname=$(dirname "$filename") local thumb_path="$dirname/.sh_thumbnails/large/$thumb_name" if [ -e "$thumb_path" ] ; then nux.dirty.urlencode $thumb_path elif thumby.thumb.can.generate "$filename" "$mimetype"; then echo "$NUWEB_SCRIPT_URI/action:thumb/$NUWEB_REQUEST_PATH/$filename" fi } function mdlio.app.thumb.get() { img_path="${@##/}" nux.log info "Generating thumb for" $(pwd) "$img_path" thumb_path=$(thumby.thumb.get "${DOCUMENT_ROOT}/$img_path"); if [ -n "$thumb_path" ]; then nux.dirty.urlencode ${thumb_path#$DOCUMENT_ROOT}; fi } mdlio.app.run() { nuweb.router.exec mdlio.app.routes } mdlio.app.routes() { get() { local uri_spec="$1"; shift; nuweb.get "$uri_spec" mdlio.app "$@" } get.paginate() { main() { #nux.exec.optional before "$@"; before=before after=after nuweb.paginate div .gallery .mdl-grid items per-item next-page 20; #nux.exec.optional after "$@"; } next-page() { +e div .mdl-grid e div .mdl-cell .mdl-cell--11-col .mdl-cell--col-3-phone .mdl-cell--col-7-tablet +e div .mdl-cell .mdl-cell--1-col e a .next-page .mdl-button.mdl-button--colored @href "${REQUEST_URI%%?*}?page=$1&per_page=$2" Next -e div -e div } get "$@" } #nuweb.get "/action:zip:serve/@+" mdlio.action.zip.serve nuweb.get "/action:thumb/@+" nuweb.redirect.exec mdlio.app.thumb.get nuweb.get "/action:asset/@" mdlio.app.asset nux.exec.optional app.routes; } mdlio.app.asset() { file="$NUX_ENV_DIR/assets/nuweb/$1"; if [ -e "$file" ]; then mime=$(nux.mime "$file"); echo Content-Type: $mime echo cat "$file" fi } mdlio.app.photoswipe.html() { cat < EOF }