Skip to content

Instantly share code, notes, and snippets.

@adamabernathy

adamabernathy/index.html

Last active February 13, 2017 16:12
Show Gist options
  • Save adamabernathy/774095cab34dd925050485476c1f481e to your computer and use it in GitHub Desktop.
Save adamabernathy/774095cab34dd925050485476c1f481e to your computer and use it in GitHub Desktop.
Download ZIP
Image viewer for brian
Raw
index.html
<!DOCTYPE html>
<!--
Photo Viewer
View all images in a directory by clicking buttons.
This allows you to stay on the same page rather than clicking the back button every time you want to see a different image.
Image name can not have any spaces!!
Created by Brian Blaylock
Date: November 30, 2015
Updated with bootstrap style: February 10, 2017
http://home.chpc.utah.edu/~u0553130/Brian_Blaylock/home.html
-->
<head>
<!-- I added the style class -->
<style>
.style1 {
width: 100%;
}
</style>
<title>Image Viewer - Hover</title>
<script src="http://home.chpc.utah.edu/~u0553130/Brian_Blaylock/js/site/siteopen.js"></script>
<script src="http://home.chpc.utah.edu/~u0553130/Brian_Blaylock/js/site/sitemenu.js"></script>
</head>
<body>
<h2 align="center"><i class="fa fa-picture-o" aria-hidden="true"></i> Image Viewer
<div class="btn-group">
<button type="button" class="btn btn-primary active">Hover</button>
<button type="button" class="btn btn-primary" onclick=window.location.href="./photo_viewer_v2.php">Click</button>
<button type="button" class="btn btn-primary" onclick=window.location.href="./photo_viewer_v3.php">Select</button>
</div></h2>
<!-- I had to stop here, because I was about to make this into an DOM component
and that's when I realized that I've probably gone too far with this :)
I hope that if nothing else, this gives you some cool ideas of how to
optimize and manage a neat little app like this. -->
<div>
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#img-select-hover" id="tab-hover" role="tab" data-toggle="tab" data-ui-mode="hover">Hover</a>
</li>
<li role="presentation">
<a href="#img-select-hover" id="tab-click" role="tab" data-toggle="tab" data-ui-mode="click">Click</a>
</li>
<li role="presentation">
<a href="#img-select-tab" aria-controls="img-select" role="tab" data-toggle="tab">Select</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="img-select-hover">
<div class="row">
<hr/>
<p id="image-folder" class="lead"></>
</div>
<div class="row">
<div class="col-sm-12 col-md-2">
<div class="btn-group-vertical" id="btn-group-toggle" align="center"></div>
</div>
<div class="col-sm-12 col-md-10">
<img class="style1" id="sounding-img" alt="empty" />
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="img-select-tab">
<p>Put Image select code here.</p>
</div>
</div>
</div>
</div>
<!-- End of my work -->
<script src="http://home.chpc.utah.edu/~u0553130/Brian_Blaylock/js/site/siteclose.js"></script>
</body>
<script>
(function () {
'use strict';
var _ID_ = '#';
var _CLASS_ = '.';
/*!
* The image reference variables (imgBaseURL, pwd, imgSuffix, imgListing) can be located
* inside here or declared in the global scope, but be sure to link them to the state.
* If you wanted to, you could have these generated by your server script, keep the HTML
* in this page static and do a simple HTTP request for this API reponse. It would make
* updates and the code easier to deal with. Just my two cents.
*/
// Using state/stateless methodology.
var state = {
ui: {
span__imageFolder: 'image-folder',
img__sounding: 'sounding-img',
imgMissing: '//home.chpc.utah.edu/~u0553130/Brian_Blaylock/images/empty.jpg',
btnSelectors: {
imgButtonClassList: 'btn btn-default img-selector',
selectorClass: 'img-selector',
},
tabClick: 'tab-click',
tabHover: 'tab-hover',
div_btnToggle: 'btn-group-toggle'
},
imgViewerHover: true,
imgBaseURL: '//home.chpc.utah.edu/~u0553130/',
pwd: 'PhD/UWFPS_2017/time-height/',
imgSuffix: '.png',
// `el.data-name` = image path
imgListing: {
kogd_hrrr_RH: {
label: 'KOGD - HRRR(RH)',
src: 'kogd_hrrr_RH'
},
kogd_hrrr_dwpt: 'kogd_hrrr_dwpt',
kogd_hrrr_press: 'kogd_hrrr_press',
kogd_hrrr_temp: 'kogd_hrrr_temp',
kogd_hrrr_theta: 'kogd_hrrr_theta',
kpvu_hrrr_RH: 'kpvu_hrrr_RH',
kpvu_hrrr_dwpt: 'kpvu_hrrr_dwpt',
kpvu_hrrr_press: 'kpvu_hrrr_press',
kpvu_hrrr_temp: 'kpvu_hrrr_temp',
kpvu_hrrr_theta: 'kpvu_hrrr_theta',
kslc_hrrr_RH: 'kslc_hrrr_RH',
kslc_hrrr_dwpt: 'kslc_hrrr_dwpt',
kslc_hrrr_press: 'kslc_hrrr_press',
kslc_hrrr_temp: 'kslc_hrrr_temp',
kslc_hrrr_theta: 'kslc_hrrr_theta'
}
}
// Think of this as a wrapper for the `_changePicture()` which is a stateless funciton
var changePicture = function(img, renderTo) {
var imgURL = state.imgBaseURL + state.pwd
+ (typeof state.imgListing[img].src === "undefined"
? state.imgListing[img]
: state.imgListing[img].src)
+ (typeof state.imgListing[img].suffix === "undefined"
? state.imgSuffix
: state.imgListing[img].suffix);
_changePicture(imgURL, renderTo);
}
/**
* Updates an `img` element
* Stateless/Pure.
*/
var _changePicture = function (imgURL, renderTo) {
document.getElementById(renderTo).src = imgURL
}
// Changes the display orientation of the buttons
// NOT STATELESS!!!!
var toggleBtnGroup = function(screenWidth) {
var windowWidth = $(window).width();
if(windowWidth >= screenWidth) {
$('#btn-group-toggle').addClass('btn-group-vertical').removeClass('btn-group');
} else {
$('#btn-group-toggle').addClass('btn-group').removeClass('btn-group-vertical');
}
}
/**
* Crates an HTML element
* Stateless/Pure
*/
function _makeElement(props, parentNode) {
var el = document.createElement(props.type);
for (var p in props) {
// Should we have a data object to fill
if (p === 'data') {
Object.keys(props[p]).map(function (k){el.dataset[k] = props[p][k];})
}
else {
el[p] = props[p];
}
}
document.getElementById(parentNode).appendChild(el);
}
/** When document is ready, time to set our listners and update the DOM */
window.addEventListener('load', function(){
// Register element listeners
console.log(document.getElementById(state.ui.tabClick))
document.getElementById(state.ui.tabClick).addEventListener('click', function () {
state.imgViewerHover = false;
_renderButtons()
})
document.getElementById(state.ui.tabHover).addEventListener('click', function(){
state.imgViewerHover = true;
_renderButtons()
})
// Update the window sizing. Although BS can do this for you for free.
window.addEventListener('resize', toggleBtnGroup(900));
_renderButtons()
_renderSelectMenu()
// Set the default image for the image container
_changePicture(
state.ui.imgMissing,
state.ui.img__sounding
)
// Update the `image-folder` node
document.getElementById(state.ui.span__imageFolder).innerText = state.pwd;
/** Renders the Select element to select images with */
function _renderSelectMenu() {
// Put code here to render the menu
}
/** Renders the buttons to select images with */
function _renderButtons() {
var _nodes = document.getElementById(state.ui.div_btnToggle)
while (_nodes.firstChild) {
_nodes.removeChild(_nodes.firstChild);
}
// Generate our image selector buttons
Object.keys(state.imgListing).map(function (k) {
_makeElement({
type: 'button',
className: state.ui.btnSelectors.imgButtonClassList,
data: { name: k },
innerHTML: typeof state.imgListing[k].label === "undefined"
? k
: state.imgListing[k].label,
}, state.ui.div_btnToggle)
})
// Now we can set the listeners on the buttons
_nodes = document.querySelectorAll('button.' + state.ui.btnSelectors.selectorClass);
var i = 0;
while (i < _nodes.length) {
_nodes[i].addEventListener(
state.imgViewerHover ? 'mouseover' : 'click',
function() { changePicture(this.dataset.name, state.ui.img__sounding)},
true
)
i++;
}
}
});
})();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment