var RenderSide =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var React = __webpack_require__(1);
var ReactDOM = __webpack_require__(2);
var Album_1 = __webpack_require__(3);
var Gallery_1 = __webpack_require__(5);
var RenderClass = (function () {
function RenderClass() {
}
RenderClass.polarToCartesian = function (centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
};
RenderClass.describeArc = function (x, y, radius, startAngle, endAngle) {
var start = RenderClass.polarToCartesian(x, y, radius, endAngle);
var end = RenderClass.polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");
return d;
};
RenderClass.RenderEditAlbum = function (url, key, contentDivId, showUrlWindow) {
console.log("call RenderEditAlbum");
//document.getElementById(contentDivId).innerHTML = "";
ReactDOM.render(React.createElement(Album_1.EditAlbum, { key: key, showUrlWindow: showUrlWindow, hostRoot: "http://localhost:3000/", thumbsUrlBase: "static/", url: url }), document.getElementById(contentDivId));
};
RenderClass.RenderGalleryAlbum = function (hostRoot, jsonPath, contentDivId) {
ReactDOM.render(React.createElement(Gallery_1.Thumbs, { hostRoot: hostRoot, jsonFile: jsonPath }), document.getElementById(contentDivId));
};
return RenderClass;
}());
exports.RenderClass = RenderClass;
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = React;
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports = ReactDOM;
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
///
///
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Shared_1 = __webpack_require__(4);
var React = __webpack_require__(1);
var EditAlbum = (function (_super) {
__extends(EditAlbum, _super);
function EditAlbum() {
var _this = _super.apply(this, arguments) || this;
_this.state = { data: { list: [], bykey: {} } };
return _this;
}
EditAlbum.prototype.componentDidMount = function () {
var _this = this;
Shared_1.default.ajaxGetHelper(this.props.hostRoot + this.props.url, function (data) {
_this.setState({ data: data });
});
};
EditAlbum.prototype.render = function () {
var _this = this;
var picNodes = this.state.data.list.map(function (pic) {
return (React.createElement(Pic, { key: pic.fname, showUrlWindow: _this.props.showUrlWindow, thumbsUrlBase: _this.props.thumbsUrlBase, hostRoot: _this.props.hostRoot, fname: pic.fname, desc: pic.desc, title: pic.title }));
});
return (React.createElement("div", { className: "album", data: this.state.data }, picNodes));
};
return EditAlbum;
}(React.Component));
exports.EditAlbum = EditAlbum;
var Pic = (function (_super) {
__extends(Pic, _super);
function Pic(props) {
var _this = _super.call(this, props) || this;
_this.state = {
title: _this.props.title,
desc: _this.props.desc,
fname: _this.props.fname
};
return _this;
}
Pic.prototype.handleCaptionDone = function (key, arg) {
var _this = this;
var newObj = null;
if (key === 'title') {
newObj = { title: arg, fname: this.state.fname, desc: this.state.desc ? this.state.desc : "g=c" }; // don't write out undefined -> 'undefined'
}
else if (key === 'desc') {
newObj = { title: this.state.title ? this.state.title : "", fname: this.state.fname, desc: arg };
}
// send this to the Model (on the server)
Shared_1.default.ajaxPostHelper(this.props.hostRoot + 'api/pics', newObj, function (data) {
_this.setState(data);
});
};
Pic.prototype.picOnClickFunc = function (props) {
var urlToBigImg = props.hostRoot + props.thumbsUrlBase + '1560.' + props.fname;
console.log("want to open window with URL =", urlToBigImg);
props.showUrlWindow(urlToBigImg);
};
Pic.prototype.render = function () {
var _this = this;
return (React.createElement("div", { className: "pic" },
React.createElement("img", { onClick: function () { return _this.picOnClickFunc(_this.props); }, src: Shared_1.default.makethumburl(this.props.hostRoot + this.props.thumbsUrlBase, this.state.fname, this.state.desc) }),
React.createElement(Caption, { initValue: this.state.title ? this.state.title : "", onDone: function (arg) { return _this.handleCaptionDone('title', arg); } }),
React.createElement(Caption, { initValue: this.state.desc ? this.state.desc : "g=c", onDone: function (arg) { return _this.handleCaptionDone('desc', arg); } })));
};
return Pic;
}(React.Component));
var Caption = (function (_super) {
__extends(Caption, _super);
function Caption(props) {
var _this = _super.call(this, props) || this;
_this.state = { editing: false, val: _this.props.initValue };
_this.handleClick = _this.handleClick.bind(_this);
_this.handleTextChange = _this.handleTextChange.bind(_this);
_this.handleBlur = _this.handleBlur.bind(_this);
_this.handleKeyDown = _this.handleKeyDown.bind(_this);
return _this;
}
Caption.prototype.handleClick = function () {
this.setState({ editing: true, val: this.state.val });
};
Caption.prototype.handleTextChange = function (e) {
this.setState({ editing: true, val: e.target.value });
};
Caption.prototype.handleBlur = function (e) {
this.setState({ editing: false, val: this.state.val });
this.props.onDone(e.target.value);
};
// prevent pressing enter when meaning to submit but default is to insert new line since textarea is multiline
Caption.prototype.handleKeyDown = function (e) {
if (e.keyCode == 13) {
e.preventDefault();
e.target.blur();
}
};
Caption.prototype.render = function () {
if (this.state.editing)
return (React.createElement("textarea", { style: { "font-size": "80%" }, rows: 4, autoFocus: true, onKeyDown: this.handleKeyDown, onBlur: this.handleBlur, placeholder: "Type a caption", value: this.state.val, onChange: this.handleTextChange }));
else
return (React.createElement("div", { className: "pic-cap", onClick: this.handleClick }, (this.state.val && this.state.val != '') ? this.state.val : "Click to edit"));
};
return Caption;
}(React.Component));
/***/ },
/* 4 */
/***/ function(module, exports) {
"use strict";
var Shared = (function () {
function Shared() {
}
Shared.getField = function (desc, key, defaulty) {
var ret = defaulty;
// parse desc and grab g=c or g=n or g=e or g=w or g=s
var ps = desc.split(":");
if (ps && ps.length >= 1) {
ps.forEach(function (ab) {
var pair = ab.split("=");
if (pair && pair.length == 2) {
if (pair[0] === key) {
ret = pair[1];
}
}
});
}
return ret;
};
Shared.makethumburl = function (host, fname, desc) {
desc = desc || "g=c";
var grav = Shared.getField(desc, "g", "c");
var f = "sq" + grav + "." + fname;
// assumes host ends with /
return host + f;
};
Shared.ajaxGetHelper = function (url, success) {
$.ajax({
url: url,
dataType: 'json',
cache: false,
success: success,
error: function (xhr, status, err) {
console.error(url, status, err.toString());
}.bind(this)
});
};
Shared.ajaxPostHelper = function (url, data, success) {
$.ajax({
url: url,
dataType: 'json',
type: 'POST',
data: data,
success: success,
error: function (xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
};
return Shared;
}());
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Shared;
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = __webpack_require__(1);
//import TypedReact = require("typed-react");
var Shared_1 = __webpack_require__(4);
var Interp_1 = __webpack_require__(6);
// create 2 reusable offscreen canvases
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 4;
canvas.height = 4;
var canvasBig = document.createElement("canvas");
var ctxBig = canvasBig.getContext("2d");
canvasBig.width = 40;
canvasBig.height = 40;
var Gallery = (function () {
function Gallery() {
}
Gallery.clamp = function (x, low, hi) {
return Math.max(Math.min(x, hi), low);
};
Gallery.make4x4ImgUrl = function (str) {
var imgData = ctx.getImageData(0, 0, 4, 4);
var data = imgData.data;
// convert 24 bit
for (var i = 0; i < data.length; i += 4) {
var offset = ((i | 0) / 4) | 0;
offset *= 6;
data[i + 0] = parseInt(str.slice(offset + 0, offset + 2), 16);
data[i + 1] = parseInt(str.slice(offset + 2, offset + 4), 16);
data[i + 2] = parseInt(str.slice(offset + 4, offset + 6), 16);
data[i + 3] = 255;
}
ctx.putImageData(imgData, 0, 0);
// resample to 160x160 or whatever, using bicubic upsampling to make what appears to be a gaussian blurred image
// since Chrome only draws our tiny 4x4 image with bilinear upsampling, which looks awful in comparison to Safari's bicubic
// get r, g, or b data from little image we just made
function getter(c, y, x) {
x = Gallery.clamp(x, 0, canvas.width - 1);
y = Gallery.clamp(y, 0, canvas.height - 1);
var i = (y * canvas.width + x) * 4;
return data[i + c];
}
var interp = new Interp_1.Interpolator(3, canvasBig.height, canvasBig.width, getter);
// go for it
var imgDataBig = ctxBig.getImageData(0, 0, canvasBig.width, canvasBig.height);
var dataBig = imgDataBig.data;
for (var y = 0; y < canvasBig.height; y++) {
var fy = 1.0 * (canvas.height - 0) * y / (canvasBig.height - 0) - 0.5; // floating point coordinate
for (var x = 0; x < canvasBig.width; x++) {
var i = (y * canvasBig.width + x) * 4;
var fx = 1.0 * (canvas.width - 0) * x / (canvasBig.width - 0) - 0.5; // floating point coordinate
for (var c = 0; c < 3; c++) {
// r, g, and b
var val = interp.BicubicGet(c, fy, fx);
val = Gallery.clamp(val, 0, 255);
dataBig[i + c] = val;
}
// alpha
dataBig[i + 3] = 255;
}
}
ctxBig.putImageData(imgDataBig, 0, 0);
return canvasBig.toDataURL();
};
Gallery.make4x4BlackSquare = function (alpha) {
var imgData = ctx.getImageData(0, 0, 4, 4);
var data = imgData.data;
// convert 24 bit
for (var i = 0; i < data.length; i += 4) {
var offset = ((i | 0) / 4) | 0;
offset *= 6;
data[i + 0] = 0;
data[i + 1] = 0;
data[i + 2] = 0;
data[i + 3] = alpha;
}
ctx.putImageData(imgData, 0, 0);
return canvas.toDataURL();
};
return Gallery;
}());
Gallery.blackSquare4x4Url = Gallery.make4x4BlackSquare(48);
var PrettyCaption = (function (_super) {
__extends(PrettyCaption, _super);
function PrettyCaption() {
return _super.apply(this, arguments) || this;
}
PrettyCaption.prototype.render = function () {
var title = this.props.title || "(click to view full image)";
if (title.indexOf(":") > -1) {
// TWO+ PIECES (use two of them)
var t1 = this.props.title.split(":")[0];
var t2 = this.props.title.split(":")[1];
// top
var rhsTop = "100%";
if (t2.length < 10) {
rhsTop = "125%";
}
else if (t2.length < 12) {
rhsTop = "110%";
}
else if (t2.length > 20) {
rhsTop = "80%";
}
else if (t2.length > 14) {
rhsTop = "90%";
}
// bottom
var rhsBottom = "68%";
if (t1.length < 10) {
rhsBottom = "90%";
}
else if (t1.length < 12) {
rhsBottom = "80%";
}
else if (t1.length > 25) {
rhsBottom = "49%";
}
else if (t1.length > 23) {
rhsBottom = "52%";
}
else if (t1.length > 20) {
rhsBottom = "55%";
}
else if (t1.length > 14) {
rhsBottom = "58%";
}
var styleTop = { "fontSize": rhsTop };
var styleBottom = { "fontSize": rhsBottom };
return (React.createElement("span", null,
React.createElement("div", { className: "caption-top", style: styleTop }, t2),
React.createElement("div", { className: "caption-bottom", style: styleBottom }, t1)));
}
return (React.createElement("div", { className: "caption-top" }, title));
};
return PrettyCaption;
}(React.Component));
var Thumb = (function (_super) {
__extends(Thumb, _super);
function Thumb(props) {
var _this = _super.call(this, props) || this;
_this.state =
{ title: _this.props.title,
desc: _this.props.desc,
fname: _this.props.fname,
hex4x4url: Gallery.make4x4ImgUrl(_this.props.hex4x4),
thumburl: Shared_1.default.makethumburl(_this.props.hostRoot, _this.props.fname, _this.props.desc)
};
_this.handleClick = _this.handleClick.bind(_this);
return _this;
}
Thumb.prototype.handleClick = function (event) {
//event.preventDefault();
//var el = event.target;
//console.log(el); // if actual thumbnail component / div needed
this.props.onSetIndex(this.props.index);
};
Thumb.prototype.render = function () {
var styleBg = {
backgroundImage: 'url("' + this.state.hex4x4url + '")',
backgroundSize: "160px 160px",
backgroundRepeat: "no-repeat",
};
var styleBlack = {
backgroundImage: 'url("' + Gallery.blackSquare4x4Url + '")',
backgroundSize: "160px 160px",
backgroundRepeat: "no-repeat",
width: "160px",
height: "160px",
};
var styleImg = {
width: "160px",
height: "160px",
};
return (React.createElement("div", { className: "thumb", style: styleBg, onClick: this.handleClick },
React.createElement("div", { className: "black", style: styleBlack },
React.createElement(PrettyCaption, { title: this.state.title })),
React.createElement("img", { src: this.state.thumburl, style: styleImg })));
};
return Thumb;
}(React.Component));
var circleStyle = {
fill: "#444444"
};
var pathStyle = {
stroke: "#666666",
fill: "#666666"
};
var pathStyle2 = {
stroke: "#555555",
fill: "#555555"
};
var playSvg = React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "svg-button", viewBox: "0 0 24 24" },
React.createElement("circle", { cx: "12", cy: "12", r: "10", style: circleStyle }),
React.createElement("path", { transform: "translate(1.8, 1.8),scale(0.85)", style: pathStyle2, d: "M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }));
var pauseSvg = React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "svg-button", viewBox: "0 0 24 24" },
React.createElement("circle", { cx: "12", cy: "12", r: "10", style: circleStyle }),
React.createElement("path", { transform: "translate(1.8, 1.8),scale(0.85)", style: pathStyle2, d: "M9 16h2V8H9v8zm3-14C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-4h2V8h-2v8z" }));
var xsvg = React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "svg-button", viewBox: "0 0 24 24" },
React.createElement("circle", { cx: "12", cy: "12", r: "10", style: circleStyle }),
React.createElement("path", { transform: "translate(3,3),scale(0.75)", style: pathStyle, d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
var prevsvg = React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "svg-button", viewBox: "0 0 24 24" },
React.createElement("circle", { cx: "12", cy: "12", r: "10", style: circleStyle }),
React.createElement("path", { transform: "translate(1.8, 1.8),scale(0.85)", style: pathStyle, d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z" }));
var nextsvg = React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "svg-button", viewBox: "0 0 24 24" },
React.createElement("circle", { cx: "12", cy: "12", r: "10", style: circleStyle }),
React.createElement("path", { transform: "translate(1.8, 1.8),scale(0.85)", style: pathStyle, d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" }));
var SwipeImg = (function (_super) {
__extends(SwipeImg, _super);
function SwipeImg(props) {
var _this = _super.call(this, props) || this;
_this.state = { startPageX: -1337, startPageY: -1337, dx: 0, dy: 0 };
_this.handleTouchStart = _this.handleTouchStart.bind(_this);
_this.handleTouchMove = _this.handleTouchMove.bind(_this);
_this.handleTouchEnd = _this.handleTouchEnd.bind(_this);
return _this;
}
SwipeImg.prototype.handleTouchStart = function (event) {
if (event.changedTouches.length > 1) {
return;
}
event.preventDefault();
event.stopPropagation();
console.log('touchStart:', event.changedTouches[0].pageX, event.changedTouches[0].pageY);
this.setState({ startPageX: event.changedTouches[0].pageX, startPageY: event.changedTouches[0].pageY, dx: 0, dy: 0 });
};
SwipeImg.prototype.processPosition = function (px, py) {
var dx = px - this.state.startPageX;
var dy = py - this.state.startPageY;
// hold onto the dx and dy (with their signs) with the largest magnitudes
dx = Math.abs(dx) > Math.abs(this.state.dx) ? dx : this.state.dx;
dy = Math.abs(dy) > Math.abs(this.state.dy) ? dy : this.state.dy;
this.setState({ startPageX: this.state.startPageX, startPageY: this.state.startPageY, dx: dx, dy: dy });
};
SwipeImg.prototype.handleTouchMove = function (event) {
if (event.changedTouches.length > 1) {
return;
}
event.preventDefault();
event.stopPropagation();
console.log('touchMove:', event.changedTouches[0].pageX, event.changedTouches[0].pageY);
this.processPosition(event.changedTouches[0].pageX, event.changedTouches[0].pageY);
};
SwipeImg.prototype.handleTouchEnd = function (event) {
if (event.changedTouches.length > 1) {
return;
}
event.preventDefault();
event.stopPropagation();
console.log('touchEnd:', event.changedTouches[0].pageX, event.changedTouches[0].pageY);
var MINIMUM = 20;
var movedEnough = (Math.abs(this.state.dx) + Math.abs(this.state.dy)) > MINIMUM;
var horiz = Math.abs(this.state.dx) > Math.abs(this.state.dy);
var vert = Math.abs(this.state.dy) > Math.abs(this.state.dx);
if (this.state.dx < 0 && horiz && movedEnough) {
console.log("call onSwipedRightToLeft");
if (this.props.onSwipedRightToLeft) {
this.props.onSwipedRightToLeft();
}
}
else if (this.state.dx > 0 && horiz && movedEnough) {
console.log("call onSwipedLeftToRight");
if (this.props.onSwipedLeftToRight) {
this.props.onSwipedLeftToRight();
}
}
else if (this.state.dy < 0 && vert && movedEnough) {
console.log("call onSwipedBottomToTop");
if (this.props.onSwipedBottomToTop) {
this.props.onSwipedBottomToTop();
}
}
else if (this.state.dy > 0 && vert && movedEnough) {
console.log("call onSwipedTopToBottom");
if (this.props.onSwipedTopToBottom) {
this.props.onSwipedTopToBottom();
}
}
else if (!movedEnough) {
console.log("call onTapped");
if (this.props.onTapped) {
this.props.onTapped();
}
}
};
SwipeImg.prototype.render = function () {
return React.createElement("img", { className: "full", style: { "touch-action": "none" }, src: this.props.src, onLoad: this.props.onLoad, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd });
};
return SwipeImg;
}(React.Component));
exports.SwipeImg = SwipeImg;
// arrow keys left and right, space to toggle play/pause, escape to close
var Big = (function (_super) {
__extends(Big, _super);
function Big(props) {
var _this = _super.call(this, props) || this;
_this.state = { smallLoaded: _this.props.smallLoaded, visible: _this.props.visible, data: _this.props.data,
playing: false };
_this.handleLoaded = _this.handleLoaded.bind(_this);
_this.handleCloseClick = _this.handleCloseClick.bind(_this);
_this.handlePrevClick = _this.handlePrevClick.bind(_this);
_this.handleNextClick = _this.handleNextClick.bind(_this);
_this.handlePlayPauseClick = _this.handlePlayPauseClick.bind(_this);
$(document).bind('keyup', function (e) {
if (!_this.state.visible) {
return; // don't do anything unless this Big component is visible
}
console.log('pressed ' + e.which);
if (e.which == 37) {
e.preventDefault();
_this.handlePrevClick(null);
}
else if (e.which == 39) {
e.preventDefault();
_this.handleNextClick(null);
}
else if (e.which == 32) {
e.preventDefault();
_this.handlePlayPauseClick(null);
}
else if (e.which == 27) {
e.preventDefault();
_this.handleCloseClick(null);
}
});
return _this;
}
Big.prototype.handleLoaded = function (e) {
if (this.state.smallLoaded) {
return;
}
this.setState({ smallLoaded: true, visible: this.state.visible, data: this.state.data, playing: this.state.playing });
};
Big.prototype.handlePlayPauseClick = function (e) {
console.log('playing', this.state.playing);
console.log('set state');
var newPlaying = true;
if (this.state.playing) {
newPlaying = false;
}
this.setState({ smallLoaded: this.state.smallLoaded, visible: this.state.visible, data: this.state.data, playing: newPlaying });
console.log('playing', newPlaying);
this.addOneNextClick(newPlaying);
};
Big.prototype.addOneNextClick = function (newPlaying) {
var _this = this;
if (newPlaying) {
console.log('set timeout');
window.setTimeout(function () {
if (_this.state.playing) {
console.log('clicking next for you!');
_this.handleNextClick(null);
_this.addOneNextClick(_this.state.playing);
}
}, 3000);
}
};
Big.prototype.handleCloseClick = function (e) {
this.setState({ smallLoaded: this.state.smallLoaded, visible: false, data: this.state.data, playing: false });
};
Big.prototype.handlePrevClick = function (e) {
var newIndex = this.state.data.index - 1;
if (newIndex < 0) {
newIndex = this.state.data.list.length - 1;
}
this.setState({ smallLoaded: false, visible: this.state.visible, playing: false,
data: { list: this.state.data.list, bykey: this.state.data.bykey, index: newIndex, key: this.state.data.key } });
};
Big.prototype.handleNextClick = function (e) {
var newIndex = this.state.data.index + 1;
if (newIndex > this.state.data.list.length - 1) {
newIndex = 0;
}
this.setState({ smallLoaded: false, visible: this.state.visible, playing: this.state.playing,
data: { list: this.state.data.list, bykey: this.state.data.bykey, index: newIndex, key: this.state.data.key } });
console.log('playing', this.state.playing);
};
Big.prototype.render = function () {
if (!this.state.data || this.state.data.index >= this.state.data.list.length) {
return null;
}
var info = this.state.data.list[this.state.data.index];
var fname = info.fname;
var bigImg = this.props.hostRoot + "130." + fname;
if (this.state.smallLoaded) {
bigImg = this.props.hostRoot + "1560." + fname;
}
// var style = {
// backgroundImage: 'url("'+bigImg+'")',
// backgroundSize: "96vw 54vw",
// backgroundRepeat: "no-repeat",
// };
var sob = {
display: this.state.visible ? "block" : "none"
};
var title1 = "";
var title2 = "";
if (info.title) {
if (info.title.indexOf(": ") > -1) {
var ix = info.title.indexOf(": ");
title1 = info.title.slice(ix + 2);
title2 = info.title.slice(0, ix);
}
else {
title1 = info.title;
}
}
return (React.createElement("div", { className: "over" },
React.createElement("div", { className: "big", style: sob },
React.createElement(SwipeImg, { className: "full", src: bigImg, onLoad: this.handleLoaded, onSwipedLeftToRight: this.handlePrevClick, onSwipedRightToLeft: this.handleNextClick, onSwipedTopToBottom: this.handleCloseClick, onSwipedBottomToTop: this.handleCloseClick, onTapped: this.handlePlayPauseClick }),
React.createElement("div", { className: "below" },
React.createElement("div", { className: "flex-item" },
React.createElement("div", { className: "flex-item targets x", onClick: this.handleCloseClick }, xsvg),
React.createElement("div", { className: "targets playpause", onClick: this.handlePlayPauseClick }, this.state.playing ? pauseSvg : playSvg),
React.createElement("br", { className: "break-visibility" }),
React.createElement("div", { className: "targets prev", onClick: this.handlePrevClick }, prevsvg),
React.createElement("div", { className: "targets next", onClick: this.handleNextClick }, nextsvg)),
React.createElement("div", { className: "flex-item caps" },
React.createElement("div", { className: "topcap" }, title1),
React.createElement("div", { className: "botcap" }, title2))))));
};
return Big;
}(React.Component));
exports.Big = Big;
var Thumbs = (function (_super) {
__extends(Thumbs, _super);
function Thumbs(props) {
var _this = _super.call(this, props) || this;
_this.state = { visible: false, data: { list: [], bykey: {}, index: 0, key: 0 } };
_this.handleSetIndex = _this.handleSetIndex.bind(_this); // such BS that this is necessary
return _this;
}
Thumbs.prototype.componentDidMount = function () {
var _this = this;
Shared_1.default.ajaxGetHelper(this.props.hostRoot + this.props.jsonFile, function (data) {
_this.setState({ visible: _this.state.visible, data: data });
});
};
Thumbs.prototype.handleSetIndex = function (index) {
// modify 'key' every time we change the index so Big can re-render with new state (resets its smallLoaded to false)
var data = { list: this.state.data.list, bykey: this.state.data.bykey, index: index,
key: this.state.data.key + 1 };
// make visible when a thing gets clicked
this.setState({ visible: true, data: data });
};
Thumbs.prototype.render = function () {
var _this = this;
var thumbNodes = this.state.data.list.map(function (pic) {
return React.createElement(Thumb, { hostRoot: _this.props.hostRoot, key: pic.fname, hex4x4: pic.hex4x4, index: pic.index, fname: pic.fname, desc: pic.desc, title: pic.title, onSetIndex: _this.handleSetIndex });
});
//
...
return (React.createElement("div", { className: "album" },
React.createElement(Big, { hostRoot: this.props.hostRoot, visible: this.state.visible, key: this.state.data.key, data: this.state.data, smallLoaded: false }),
React.createElement("div", { className: "thumbs" }, thumbNodes)));
};
return Thumbs;
}(React.Component));
exports.Thumbs = Thumbs;
/***/ },
/* 6 */
/***/ function(module, exports) {
"use strict";
var Interpolator = (function () {
// interpolate 1 to 4 channels, by passing ch = 1 or 2 or 3 or 4
function Interpolator(ch, h, w, getter) {
this.UseMissing = false;
this.ch = 1;
this.w = 1;
this.h = 1;
this.getter = null; // Func ch, y, x --> int
this.MISSING = -32; //-32767;
this.w = w;
this.h = h;
this.getter = getter;
this.ch = ch;
this.coeffsY = [0, 0, 0, 0];
this.coeffsX = [0, 0, 0, 0];
this.yabcd = [null, null, null, null];
this.xabcd = [null, null, null, null];
this.yabcd[0] = [null, null, null, null];
this.yabcd[1] = [null, null, null, null];
this.yabcd[2] = [null, null, null, null];
this.yabcd[3] = [null, null, null, null];
for (var c = 0; c < ch; c++) {
this.yabcd[0][c] = [0, 0, 0, 0];
this.yabcd[1][c] = [0, 0, 0, 0];
this.yabcd[2][c] = [0, 0, 0, 0];
this.yabcd[3][c] = [0, 0, 0, 0];
this.xabcd[c] = [0, 0, 0, 0];
}
this.fromsx = [0, 0, 0, 0];
this.oldfromsx = [0, 0, 0, 0];
}
Interpolator.prototype.updateWithGetter = function (opt, c, fromsy_1, fromsy0, fromsy1, fromsy2) {
//int c = 0;
//int ch = 1;
// optimization: still interpolating from the same four pixels ... don't do any new work!
if (opt && this.fromsx[3] == this.oldfromsx[3]) {
return;
}
//else
// leading edge changed
for (var i = 0; i < 4; i++) {
// optimization: reuse old work!
if (i < 3 && opt && this.fromsx[i] == this.oldfromsx[i] + 1) {
this.oldfromsx[i]++; // = fromsx[i];
this.xabcd[c][i] = this.xabcd[c][i + 1];
continue;
}
this.oldfromsx[i] = this.fromsx[i];
this.yabcd[i][c][0] = this.getter(c, fromsy_1, this.oldfromsx[i]);
this.yabcd[i][c][1] = this.getter(c, fromsy0, this.oldfromsx[i]);
this.yabcd[i][c][2] = this.getter(c, fromsy1, this.oldfromsx[i]);
this.yabcd[i][c][3] = this.getter(c, fromsy2, this.oldfromsx[i]);
this.xabcd[c][i] = Interp.dot4(this.coeffsY, this.yabcd[i][c], this.MISSING, this.UseMissing);
}
};
Interpolator.prototype.BicubicGet = function (c, fromyDouble, fromxDouble) {
c = c | 0;
// // nearest neighbor for testing
// let y0: number = (Math.round(fromyDouble))|0;
// let x0: number = (Math.round(fromxDouble))|0;
// return this.getter(c, y0, x0);
// a = -1 b = 0 c = 1 d = 2
//
//double fromyDouble = 1.0 * (h)*(y-0.5) / (1.0 * (nuh));
var fromy0 = ((fromyDouble)) | 0;
var fromy_1 = Math.max(0, fromy0 - 1);
var fromy1 = Math.min(this.h - 1, fromy0 + 1);
var fromy2 = Math.min(this.h - 1, fromy0 + 2);
var yt = fromyDouble - fromy0;
Interp.spline4_setCoeffs(yt, this.coeffsY);
this.oldfromsx[0] = -1;
this.oldfromsx[1] = -1;
this.oldfromsx[2] = -1;
this.oldfromsx[3] = -1;
this.fromsx[0] = -1;
this.fromsx[1] = -1;
this.fromsx[2] = -1;
this.fromsx[3] = -1;
var fromx0 = ((fromxDouble)) | 0;
var fromx_1 = Math.max(0, fromx0 - 1);
var fromx1 = Math.min(this.w - 1, fromx0 + 1);
var fromx2 = Math.min(this.w - 1, fromx0 + 2);
var xt = fromxDouble - fromx0;
Interp.spline4_setCoeffs(xt, this.coeffsX);
this.fromsx[0] = fromx_1;
this.fromsx[1] = fromx0;
this.fromsx[2] = fromx1;
this.fromsx[3] = fromx2;
var opt = fromx0 >= 4 && fromx0 < this.w - 4;
// (C# comment) I tried copying the code from update() here and it made it slower!
//update(opt, ch, chans, yabcd, xabcd, oldfromsx, fromsx, coeffsY, fromy_1, fromy0, fromy1, fromy2);
this.updateWithGetter(opt, c, fromy_1, fromy0, fromy1, fromy2);
var val = Interp.dot4(this.coeffsX, this.xabcd[c], this.MISSING, this.UseMissing);
//if (val < 0) val = 0;
//if (val > 255) val = 255;
//byte result = (byte)val;
//int result = (int)val;
return val; // could use val|0 to make into an integer
};
return Interpolator;
}());
exports.Interpolator = Interpolator;
var Interp = (function () {
function Interp() {
}
Interp.spline4p = function (t, p_1, p0, p1, p2) {
return (t * ((2 - t) * t - 1) * p_1 + (t * t * (3 * t - 5) + 2) * p0 + t * ((4 - 3 * t) * t + 1) * p1 + (t - 1) * t * t * p2) / 2.0;
};
Interp.spline4p_arr = function (t, p) {
return (t * ((2 - t) * t - 1) * p[0] + (t * t * (3 * t - 5) + 2) * p[1] + t * ((4 - 3 * t) * t + 1) * p[2] + (t - 1) * t * t * p[3]) / 2.0;
};
Interp.spline4_setCoeffs = function (t, outp) {
outp[0] = t * ((2 - t) * t - 1) / 2.0;
outp[1] = (t * t * (3 * t - 5) + 2) / 2.0;
outp[2] = t * ((4 - 3 * t) * t + 1) / 2.0;
outp[3] = ((t - 1) * t * t) / 2.0;
};
Interp.linear_setCoeffs = function (t, outp) {
outp[0] = 0; //t*((2-t)*t - 1) / 2.0;
outp[1] = 1.0 - t; //(t*t*(3*t - 5) + 2) / 2.0;
outp[2] = t; //t*((4 - 3*t)*t + 1) / 2.0;
outp[3] = 0; //( (t-1)*t*t ) / 2.0;
};
Interp.dot4 = function (a, b, MISSING, UseMissing) {
if (UseMissing) {
if (b[0] == MISSING || b[1] == MISSING || b[2] == MISSING || b[3] == MISSING) {
//Console.WriteLine("Missing Contagion 0: " + b[0]);
//Console.WriteLine("Missing Contagion 1: " + b[1]);
//Console.WriteLine("Missing Contagion 2: " + b[2]);
//Console.WriteLine("Missing Contagion 3: " + b[3]);
//Console.WriteLine("Missing: " + MISSING + " <-- ");
//throw new Exception("HERE");
return MISSING;
}
}
return a[0] * b[0] + a[1] * b[1] + a[2] * b[2] + a[3] * b[3];
};
return Interp;
}());
// exercise for the reader... port this from C# to TypeScript
/*
public BilinearGet(int c, double fromyDouble, double fromxDouble): number {
// a = -1 b = 0 c = 1 d = 2
//
//double fromyDouble = 1.0 * (h)*(y-0.5) / (1.0 * (nuh));
int fromy0 = (int)(fromyDouble);
int fromy_1 = Math.Max(0, fromy0-1);
int fromy1 = Math.Min(h-1, fromy0+1);
int fromy2 = Math.Min(h-1, fromy0+2);
double yt = fromyDouble - fromy0;
Interp.linear_setCoeffs(yt, coeffsY);
oldfromsx[0] = -1;
oldfromsx[1] = -1;
oldfromsx[2] = -1;
oldfromsx[3] = -1;
fromsx[0] = -1;
fromsx[1] = -1;
fromsx[2] = -1;
fromsx[3] = -1;
int fromx0 = (int)(fromxDouble);
int fromx_1 = Math.Max(0, fromx0-1);
int fromx1 = Math.Min(w-1, fromx0+1);
int fromx2 = Math.Min(w-1, fromx0+2);
double xt = fromxDouble - fromx0;
Interp.linear_setCoeffs(xt, coeffsX);
fromsx[0] = fromx_1;
fromsx[1] = fromx0;
fromsx[2] = fromx1;
fromsx[3] = fromx2;
bool opt = fromx0 >= 4 && fromx0 < w-4;
updateWithGetter(opt, c, fromy_1, fromy0, fromy1, fromy2);
//for (int c = 0; c < ch; c++)
double val = Interp.dot4(coeffsX, xabcd[c], MISSING, UseMissing);
//if (val < 0) val = 0;
//if (val > 255) val = 255;
//byte result = (byte)val;
int result = (int)val;
return result;
}
*/
/***/ }
/******/ ]);
//# sourceMappingURL=bundle.js.map