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