From 21856d3106726668616fdf4b96e9a7b02ce69d42 Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Fri, 8 Dec 2017 20:16:51 -0500 Subject: image fade in, placeholders, doubled image size during fetch for resolution, w/h tweaks #91 --- www/external/ng-image-appear.min.js | 1 + www/external/origjs/ng-image-appear.js | 361 +++++++++++++++++++++++++++++++++ www/index.html | 5 +- www/js/DataModel.js | 2 +- www/js/EventCtrl.js | 77 ++++++- www/js/app.js | 4 +- www/templates/events.html | 15 +- www/templates/image-modal.html | 10 +- 8 files changed, 462 insertions(+), 13 deletions(-) create mode 100644 www/external/ng-image-appear.min.js create mode 100644 www/external/origjs/ng-image-appear.js diff --git a/www/external/ng-image-appear.min.js b/www/external/ng-image-appear.min.js new file mode 100644 index 00000000..ccbc902a --- /dev/null +++ b/www/external/ng-image-appear.min.js @@ -0,0 +1 @@ +!function(){"use strict";var A=angular.module("ngImageAppear",[]),e="#f0f0f0";A.run(function(){var A,e=document.head;if(void 0===A){A=document.createElement("style");A.appendChild(document.createTextNode("@animation .ngImageAppearLoader {width: 40px; height: 40px; position: absolute; left: calc((100% - 40px) / 2); top: calc((100% - 40px) / 2);} .ngImageAppearPlaceholder {position: relative; display: inline-block; background-size: cover; background-repeat: no-repeat; background-position: center center; background-color: #f0f0f0;}")),e.insertBefore(A,e.firstChild)}}),A.directive("ngImageAppear",["$timeout",function(A){return{restrict:"A",link:function(M,t,i){function o(A,e,M){void 0!==g&&""!==g&&(x+=g),(S=document.createElement("div")).setAttribute("style",x),S.className=w,void 0!==r&&""!==r&&(S.className+=" "+r),N?(k=Math.round(100*A/e),k+="%",S.style.width=k):(k=Math.round(A),k+="px",S.style.width=k);for(var t in M)S.style[t]=M[t];if(Q.style.width="100%",Q.style.padding=Q.style.margin=0,Q.replaceWith(S),S.appendChild(Q),!D){S.offsetWidth>=70?function(){function A(){z=document.createElement("img");for(var A in m)z[A]=m[A];z.style.margin=z.style.padding=z.style.border=z.style.borderRadius=0,z.style.boxShadow=z.style.float="none",z.style.transform=z.style.outline="",S.appendChild(z),O=!0}if(l){var e=l.split(".").pop();"gif"===(e=e.substring(0,3))?A():console.warn("The custom loader image should have a proper gif extension. Read full documentation here - https://github.com/ArunMichaelDsouza/ng-image-appear")}else A()}():E=!0}void 0!==j&&""!==j&&(f=y+" "+j+" "+p)}function a(A,e){var M=window.getComputedStyle(A),t=parseFloat(M.paddingLeft)+parseFloat(M.paddingRight);return"wrapper"===e?A.offsetWidth-t:A.offsetWidth}function u(){!function(){if(!E&&!D&&O){var A=t[0].nextSibling;A&&A.parentNode.removeChild(A)}}(),function(){var A=setInterval(function(){if(void 0!==S){clearInterval(A),S.style.backgroundColor=S.style.position=Q.style.width=Q.style.padding=Q.style.margin=Q.style.border=Q.style.borderRadius=Q.style.boxShadow=Q.style.float=Q.style.transform=Q.style.outline="";var e=t[0].parentNode;e.parentNode.replaceChild(t[0],e)}},1)}(),A(function(){t.css({transition:" all "+C+" "+p,opacity:1,animation:y?f:""})},100)}function n(){u(),t.unbind("load")}function s(){t.css({opacity:0}),function(){Q=t[0],T=Q.parentNode;var A=setInterval(function(){if(0!==Q.offsetWidth&&0!==Q.clientHeight){clearInterval(A);var e={padding:window.getComputedStyle(Q).padding,margin:window.getComputedStyle(Q).margin,borderRadius:window.getComputedStyle(Q).borderRadius,border:window.getComputedStyle(Q).border,boxShadow:window.getComputedStyle(Q).boxShadow,float:window.getComputedStyle(Q).float,transform:window.getComputedStyle(Q).transform,outline:window.getComputedStyle(Q).outline},M=a(T,"wrapper");o(a(t[0],"image"),M,e)}},1)}(),t[0].complete?u():t.bind("load",n)}var w="ngImageAppearPlaceholder",C=i.transitionDuration,D=t[0].hasAttribute("no-loader"),L=i.placeholder,r=i.placeholderClass,g=i.placeholderStyle,d=i.bgColor,l=i.loaderImg,I=i.loaderClass,c=i.loaderStyle,j=i.animationDuration,y=i.animation,N=t[0].hasAttribute("responsive"),p=i.easing,m={className:"ngImageAppearLoader"};void 0!==I&&(m.className+=" "+I),void 0!==c&&""!==c&&(m.style=c),C=C||"0.7s",d=d||e,j=j||"0.7s",p=p||"ease-in-out",m.src=l||"data:image/gif;base64,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";var Q,T,S,z,k,f,x="background-color: "+d+"; ",E=!1,O=!1;void 0!==L&&(x+=""===L?"background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDIuNjVweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgNDIuNjUgMzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQyLjY1IDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjRDNEM0QzIiBkPSJNMCwwaDQyLjYzN2MwLjAyNCwwLjM1NCwwLjAwNCwwLjcxLDAuMDExLDEuMDY2YzAsMTAuMzEzLDAsMjAuNjI0LDAsMzAuOTM0SDBWMHogTTE1Ljg0OSwxMS41MDINCgkJCWMwLDIuOTYzLTAuMDAyLDUuOTI3LDAuMDAxLDguODkxYzMuNjQ0LDAuMDAzLDcuMjksMC4wMDMsMTAuOTM2LDBjMC4wMDItMi45NjQsMC4wMDItNS45MjcsMC04Ljg5MQ0KCQkJQzIzLjE0MSwxMS40OTgsMTkuNDk1LDExLjQ5OCwxNS44NDksMTEuNTAyeiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZmlsbD0iI0QzRDNEMyIgZD0iTTE2LjUzNywxMi4xODZjMy4xODgsMCw2LjM3NSwwLDkuNTY0LDBjMC4wMDEsMi41MDksMC4wMDEsNS4wMTQtMC4wMDIsNy41MjENCgkJCWMtMy4xODgsMC4wMDMtNi4zNzUsMC4wMDMtOS41NjMsMEMxNi41MzMsMTcuMTk5LDE2LjUzMywxNC42OTQsMTYuNTM3LDEyLjE4NnogTTE3LjIxNSwxMi44N2MwLDIuMDUyLTAuMDAyLDQuMTAzLDAuMDAyLDYuMTU1DQoJCQljMC40NTcsMCwwLjkxNSwwLjAwMywxLjM3My0wLjAwNGMwLjQxLTAuNDA5LDAuODIxLTAuODIxLDEuMjMyLTEuMjMyYzAuMDU2LTAuMDU0LDAuMTA2LTAuMTIxLDAuMTgzLTAuMTQ3DQoJCQljMC42NjUtMC4yMjYsMS4zMzUtMC40NDEsMi0wLjY3MmMwLjIyNi0wLjY4MSwwLjQ1MS0xLjM2MSwwLjY3OS0yLjA0MmMwLjE3OSwwLjM1MiwwLjM1NCwwLjcwNywwLjUzMSwxLjA2MQ0KCQkJYzAuMDY2LDAuMTM1LDAuMTQzLDAuMjY2LDAuMTg4LDAuNDA4YzAuMjA3LDAuNjI2LDAuNDE3LDEuMjUxLDAuNjI1LDEuODc4YzAuMDIxLDAuMDc4LDAuMDg3LDAuMTM0LDAuMTQ1LDAuMTkNCgkJCWMwLjE5LDAuMTg1LDAuMzcxLDAuMzc3LDAuNTY1LDAuNTZjMC4yMjgsMCwwLjQ1MywwLjAwMiwwLjY4MywwYzAuMDAyLTIuMDUyLDAuMDAyLTQuMTAzLDAtNi4xNTUNCgkJCUMyMi42ODYsMTIuODY4LDE5Ljk1LDEyLjg2OCwxNy4yMTUsMTIuODd6Ii8+DQoJPC9nPg0KCTxwYXRoIGZpbGw9IiNEM0QzRDMiIGQ9Ik0xOS4zNzcsMTMuNTgyYzAuNDctMC4xMiwwLjk5NywwLjE0OSwxLjE3NSwwLjU5OWMwLjIwMywwLjQ1NSwwLjAxLDEuMDM2LTAuNDI0LDEuMjc5DQoJCWMtMC40MTgsMC4yNjEtMS4wMTYsMC4xNTEtMS4zMTYtMC4yMzljLTAuMzA0LTAuMzY1LTAuMjk4LTAuOTM5LDAuMDEyLTEuMjk5QzE4Ljk2NSwxMy43NTMsMTkuMTYzLDEzLjYzMiwxOS4zNzcsMTMuNTgyeiIvPg0KPC9nPg0KPC9zdmc+DQo=); ":"background-image: url("+L+"); "),M.$watch(function(){return t[0].getAttribute("src")},function(A,e){A&&A!==e&&s()}),s()}}}])}(); diff --git a/www/external/origjs/ng-image-appear.js b/www/external/origjs/ng-image-appear.js new file mode 100644 index 00000000..e20a65e0 --- /dev/null +++ b/www/external/origjs/ng-image-appear.js @@ -0,0 +1,361 @@ +/* + ng-image-appear v1.11.5 + Copyright (c) 2016 Arun Michael Dsouza (amdsouza92@gmail.com) + Licence: MIT + Demo on CodePen - http://codepen.io/amdsouza92/full/aNQeWW/ +*/ + +(function() { + 'use strict'; + + // Declaring ngImageAppear module + var ngImageAppear = angular.module('ngImageAppear', []); + + // Default background color for image wrapper + var defaultBackgroundColor = '#f0f0f0'; + + // ngImageAppear initialization code + ngImageAppear.run(function() { + + // Creating default stylesheet for elements + var defaultStylesheet, + head = document.head; + + // Checking if default stylesheet already exists in DOM + if(defaultStylesheet === undefined) { + defaultStylesheet = document.createElement('style'); + + // Default CSS stylesheet + // Styles for elements + animations + var css = '@animation .ngImageAppearLoader {width: 40px; height: 40px; position: absolute; left: calc((100% - 40px) / 2); top: calc((100% - 40px) / 2);} .ngImageAppearPlaceholder {position: relative; display: inline-block; background-size: cover; background-repeat: no-repeat; background-position: center center; background-color: '+defaultBackgroundColor+';}'; + + // Adding CSS text to default stylesheet + defaultStylesheet.appendChild(document.createTextNode(css)); + + // Prepend default stylesheet to head + head.insertBefore(defaultStylesheet, head.firstChild); + } + }); + + // ngImageAppear directive + ngImageAppear.directive('ngImageAppear',['$timeout', function($timeout) { + return { + restrict: 'A', + link: function(scope, element, attrs) { + + // Set default CSS classes for elements + var defaultLoaderClass = 'ngImageAppearLoader', + defaultPlaceholderClass = 'ngImageAppearPlaceholder'; + + // Fetching element attributes + var transitionDurationAttr = attrs.transitionDuration, // Set transition duration + noLoaderAttr = element[0].hasAttribute('no-loader'), // Check if loader is to be hidden + placeholderAttr = attrs.placeholder, // Check if default placeholder image is to be shown + placeholderClassAttr = attrs.placeholderClass, // Set CSS class for placeholder (image wrapper) + placeholderStyleAttr = attrs.placeholderStyle, // Set CSS styles for placeholder (image wrapper) + bgColorAttr = attrs.bgColor, // Set loader wrapper background color + loaderImgAttr = attrs.loaderImg, // Set custom loader image + loaderClassAttr = attrs.loaderClass, // Set CSS class for loader element + loaderStyleAttr = attrs.loaderStyle, // Set custom styles for loader element + animationDurationAttr = attrs.animationDuration, // Set animation duration + animationAttr = attrs.animation, // Set animation type + isResponsiveAttr = element[0].hasAttribute('responsive'), // Check if image is to be set responsive or not + easingAttr = attrs.easing; // Set easing for transition/animation + + // Setting default loader attributes + var loaderSrc = 'data:image/gif;base64,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', + defaultPlaceholder = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDIuNjVweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgNDIuNjUgMzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQyLjY1IDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjRDNEM0QzIiBkPSJNMCwwaDQyLjYzN2MwLjAyNCwwLjM1NCwwLjAwNCwwLjcxLDAuMDExLDEuMDY2YzAsMTAuMzEzLDAsMjAuNjI0LDAsMzAuOTM0SDBWMHogTTE1Ljg0OSwxMS41MDINCgkJCWMwLDIuOTYzLTAuMDAyLDUuOTI3LDAuMDAxLDguODkxYzMuNjQ0LDAuMDAzLDcuMjksMC4wMDMsMTAuOTM2LDBjMC4wMDItMi45NjQsMC4wMDItNS45MjcsMC04Ljg5MQ0KCQkJQzIzLjE0MSwxMS40OTgsMTkuNDk1LDExLjQ5OCwxNS44NDksMTEuNTAyeiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZmlsbD0iI0QzRDNEMyIgZD0iTTE2LjUzNywxMi4xODZjMy4xODgsMCw2LjM3NSwwLDkuNTY0LDBjMC4wMDEsMi41MDksMC4wMDEsNS4wMTQtMC4wMDIsNy41MjENCgkJCWMtMy4xODgsMC4wMDMtNi4zNzUsMC4wMDMtOS41NjMsMEMxNi41MzMsMTcuMTk5LDE2LjUzMywxNC42OTQsMTYuNTM3LDEyLjE4NnogTTE3LjIxNSwxMi44N2MwLDIuMDUyLTAuMDAyLDQuMTAzLDAuMDAyLDYuMTU1DQoJCQljMC40NTcsMCwwLjkxNSwwLjAwMywxLjM3My0wLjAwNGMwLjQxLTAuNDA5LDAuODIxLTAuODIxLDEuMjMyLTEuMjMyYzAuMDU2LTAuMDU0LDAuMTA2LTAuMTIxLDAuMTgzLTAuMTQ3DQoJCQljMC42NjUtMC4yMjYsMS4zMzUtMC40NDEsMi0wLjY3MmMwLjIyNi0wLjY4MSwwLjQ1MS0xLjM2MSwwLjY3OS0yLjA0MmMwLjE3OSwwLjM1MiwwLjM1NCwwLjcwNywwLjUzMSwxLjA2MQ0KCQkJYzAuMDY2LDAuMTM1LDAuMTQzLDAuMjY2LDAuMTg4LDAuNDA4YzAuMjA3LDAuNjI2LDAuNDE3LDEuMjUxLDAuNjI1LDEuODc4YzAuMDIxLDAuMDc4LDAuMDg3LDAuMTM0LDAuMTQ1LDAuMTkNCgkJCWMwLjE5LDAuMTg1LDAuMzcxLDAuMzc3LDAuNTY1LDAuNTZjMC4yMjgsMCwwLjQ1MywwLjAwMiwwLjY4MywwYzAuMDAyLTIuMDUyLDAuMDAyLTQuMTAzLDAtNi4xNTUNCgkJCUMyMi42ODYsMTIuODY4LDE5Ljk1LDEyLjg2OCwxNy4yMTUsMTIuODd6Ii8+DQoJPC9nPg0KCTxwYXRoIGZpbGw9IiNEM0QzRDMiIGQ9Ik0xOS4zNzcsMTMuNTgyYzAuNDctMC4xMiwwLjk5NywwLjE0OSwxLjE3NSwwLjU5OWMwLjIwMywwLjQ1NSwwLjAxLDEuMDM2LTAuNDI0LDEuMjc5DQoJCWMtMC40MTgsMC4yNjEtMS4wMTYsMC4xNTEtMS4zMTYtMC4yMzljLTAuMzA0LTAuMzY1LTAuMjk4LTAuOTM5LDAuMDEyLTEuMjk5QzE4Ljk2NSwxMy43NTMsMTkuMTYzLDEzLjYzMiwxOS4zNzcsMTMuNTgyeiIvPg0KPC9nPg0KPC9zdmc+DQo=', + loaderObject = { + 'className': defaultLoaderClass + }; + + // Attach CSS class to loader element if attribute is present + if(loaderClassAttr !== undefined) { + loaderObject.className += ' '+loaderClassAttr; + } + + // Set custom styles for loader element if attribute is present + if(loaderStyleAttr !== undefined && loaderStyleAttr !== '') { + loaderObject.style = loaderStyleAttr; + } + + // Setting values for element attributes + transitionDurationAttr = !transitionDurationAttr ? 0.7+'s' : transitionDurationAttr; // Set transition duration, default - 700ms + bgColorAttr = !bgColorAttr ? defaultBackgroundColor : bgColorAttr, // Set default bg color for loader wrapper + animationDurationAttr = !animationDurationAttr ? 0.7+'s' : animationDurationAttr; // Set transition duration, default - 700ms + easingAttr = !easingAttr ? 'ease-in-out' : easingAttr; // Set easing for transition, default - ease-in-out + + // Set custom loader image if present + loaderObject.src = loaderImgAttr ? loaderImgAttr : loaderSrc; + + // DOM manipulation element variable declarations + var imgElement, + parentElement, + imgWrapper, + loaderElement, + wrapperStyles = 'background-color: '+bgColorAttr+'; ', + setImageElementWidth, + isSmall = false, + hasShownLoader = false, + animationText; + + // Add placeholder image if attribute is present + if(placeholderAttr !== undefined) { + if(placeholderAttr === '') { + // Set default placeholder + wrapperStyles += 'background-image: url('+defaultPlaceholder+'); '; + } + else { + // Set custom placeholder + wrapperStyles += 'background-image: url('+placeholderAttr+'); '; + } + } + + // Function to render loader + function renderLoader() { + + // Show loader in DOM + function showLoader() { + loaderElement = document.createElement('img'); + + // Adding loader object properties to loader element + for(var key in loaderObject) { + loaderElement[key] = loaderObject[key]; + } + + // Set loader element's visual styles to null + loaderElement.style.margin = loaderElement.style.padding = loaderElement.style.border = loaderElement.style.borderRadius = 0; + loaderElement.style.boxShadow = loaderElement.style.float = 'none'; + loaderElement.style.transform = loaderElement.style.outline = ''; + + // Add loader to DOM + imgWrapper.appendChild(loaderElement); + hasShownLoader = true; + } + + // Check custom loader image extension + if(loaderImgAttr) { + + // Get filetype of image + var fileType = loaderImgAttr.split('.').pop(); + fileType = fileType.substring(0,3); + + // Show loader if gif file is present + if(fileType === 'gif') { + showLoader(); + } + // Else throw warning in console + else { + console.warn('The custom loader image should have a proper gif extension. Read full documentation here - https://github.com/ArunMichaelDsouza/ng-image-appear'); + } + } + else { + showLoader(); + } + } + + // Function to remove loader element from DOM + function removeLoader() { + + // Check for loader visibility flags + if(!isSmall && !noLoaderAttr && hasShownLoader) { + var elementLoader = element[0].nextSibling; // Get loader of current element + if(elementLoader) { + elementLoader.parentNode.removeChild(elementLoader); // Remove rendered loader from DOM + } + } + } + + // Function to remove wrapper element from DOM + function removeImgWrapper() { + + // Interval to check that image wrapper has been rendered in DOM + var intervalRemove = setInterval(function() { + if(imgWrapper !== undefined) { + clearInterval(intervalRemove); + + // Reset img wrapper CSS + imgWrapper.style.backgroundColor = imgWrapper.style.position = imgElement.style.width = imgElement.style.padding = imgElement.style.margin = imgElement.style.border = imgElement.style.borderRadius = imgElement.style.boxShadow = imgElement.style.float = imgElement.style.transform = imgElement.style.outline = ''; + + var wrapper = element[0].parentNode, + wrapperParent = wrapper.parentNode; + wrapperParent.replaceChild(element[0], wrapper); // Replace wrapper with actual image element + } + }, 1); + } + + // Function to render image wrapper in DOM + function renderImageWrapper(imgElementWidth, parentElementWidth, imgElementStyles) { + + // Append placeholder styles to image wrapper if attribute is present + if(placeholderStyleAttr !== undefined && placeholderStyleAttr !== '') { + wrapperStyles += placeholderStyleAttr; + } + + imgWrapper = document.createElement('div'); // Create wrapper element for image + imgWrapper.setAttribute('style', wrapperStyles); // Set default CSS for wrapper element + imgWrapper.className = defaultPlaceholderClass; // Attach default CSS placeholder class to image wrapper + + // Append placeholder custom class if attribute is present + if(placeholderClassAttr !== undefined && placeholderClassAttr !== '') { + imgWrapper.className += ' '+placeholderClassAttr; + } + + // Set default CSS width + unit for img element + if(isResponsiveAttr) { + // Set image element width in % + setImageElementWidth = Math.round((imgElementWidth * 100) / parentElementWidth); + setImageElementWidth+= '%'; + + // Set wrapper width to width of image element + imgWrapper.style.width = setImageElementWidth; + } + else { + // Set image element width in px + setImageElementWidth = Math.round(imgElementWidth); + setImageElementWidth+= 'px'; + + // Set wrapper width to width of image element + imgWrapper.style.width = setImageElementWidth; + } + + // Add image element styles to wrapper element + for(var property in imgElementStyles) { + imgWrapper.style[property] = imgElementStyles[property]; + } + + imgElement.style.width = '100%'; // Span image element to 100% width of wrapper + imgElement.style.padding = imgElement.style.margin = 0; // Set image element's margin/padding to 0 + + //PP + //parentElement.replaceChild(imgWrapper, imgElement); // Replace actual image element with wrapper element + imgElement.replaceWith(imgWrapper); + imgWrapper.appendChild(imgElement); // Append actual image element to wrapper element + // This will wrap the image element into a parent div tag used for showing the loader + + // Show loader if 'no-loader' attribute is not present + if(!noLoaderAttr) { + var imgWrapperWidth = imgWrapper.offsetWidth; + + // Show loader if wrapper width is more than 70px + imgWrapperWidth >= 70 ? renderLoader() : isSmall = true; + } + + // Create animation sequence if attribute is present + if(animationDurationAttr !== undefined && animationDurationAttr !== '') { + animationText = animationAttr+' '+animationDurationAttr+' '+easingAttr; + } + } + + // Function to get element's content width (without horizontal padding) + function getElementContentWidth(element, type) { + var styles = window.getComputedStyle(element), // Get computed styles of element + padding = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight); // Get horizontal padding of element + + // Return content width + if(type === 'wrapper') { + return element.offsetWidth - padding; + } + else { + return element.offsetWidth; + } + } + + // Function to create image wrapper element + function generateImageWrapper() { + imgElement = element[0], // Get image element + parentElement = imgElement.parentNode; // Get parent of image element + + // Fire interval for checking image's width/height until calculated by DOM + var interval = setInterval(function() { + + // If image element's width and height have been calculated by DOM then clear interval + if(imgElement.offsetWidth !== 0 && imgElement.clientHeight !== 0) { + clearInterval(interval); + + // Get image element's visual styles and set it to wrapper element when rendered in DOM + var imgElementStyles = { + padding: window.getComputedStyle(imgElement).padding, + margin: window.getComputedStyle(imgElement).margin, + borderRadius: window.getComputedStyle(imgElement).borderRadius, + border: window.getComputedStyle(imgElement).border, + boxShadow: window.getComputedStyle(imgElement).boxShadow, + float: window.getComputedStyle(imgElement).float, + transform: window.getComputedStyle(imgElement).transform, + outline: window.getComputedStyle(imgElement).outline + }; + + // Set content width for parent, image elements + var parentElementWidth = getElementContentWidth(parentElement, 'wrapper'), + imgElementWidth = getElementContentWidth(element[0], 'image'); + + // Render image wrapper + renderImageWrapper(imgElementWidth, parentElementWidth, imgElementStyles); + } + }, 1); + } + + // Function to load image into DOM + function loadImage() { + removeLoader(); // Remove loader element once image is loaded + + removeImgWrapper(); // Remove image wrapper from DOM + + // Make element appear with transition/animation + $timeout(function() { + element.css({ + 'transition': ' all '+ transitionDurationAttr +' '+ easingAttr, // Set element transition + 'opacity': 1, // Show image element in view + 'animation': animationAttr ? animationText : '' // Set element animation + }); + }, 100); // Timeout to clear stack and rebuild DOM + } + + // Function to initiate actual image load + function onImageLoad() { + loadImage(); + element.unbind('load'); + } + + // Function to initialise directive + function initialize() { + + // Hide image element from view + element.css({ + 'opacity': 0 + }); + + // Create image wrapper for loader + generateImageWrapper(); + + // Check if image element has already been completely downloaded + if(element[0].complete) { + loadImage(); + } + else { + // Else detect image load event + element.bind('load', onImageLoad); + } + } + + // Function to get image element's source + function getImageSrc() { + return element[0].getAttribute('src'); + } + + // Attach a watcher to image element's source + scope.$watch(getImageSrc, function(newSrcValue, oldSrcValue) { + + // Check if the image element's source has actually changed + if(newSrcValue && newSrcValue !== oldSrcValue) { + initialize(); // Re-initialise directive + } + + }); + + // Initialise directive + initialize(); + } + }; + }]); +})(); diff --git a/www/index.html b/www/index.html index 604f6e9e..cf7728bf 100644 --- a/www/index.html +++ b/www/index.html @@ -85,7 +85,10 @@ - + + + + diff --git a/www/js/DataModel.js b/www/js/DataModel.js index 4fd3a791..1b83ce48 100755 --- a/www/js/DataModel.js +++ b/www/js/DataModel.js @@ -2028,7 +2028,7 @@ angular.module('zmApp.controllers') } } - return "(Unknown)"; + return undefined; }, getImageMode: function (id) { diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js index 3468d988..73c6c77d 100644 --- a/www/js/EventCtrl.js +++ b/www/js/EventCtrl.js @@ -155,7 +155,7 @@ angular.module('zmApp.controllers') if (NVRDataModel.getLogin().enableThumbs) { NVRDataModel.debug ("--> thumbnail means increasing row size"); eventsListScrubHeight=370; - eventsListDetailsHeight=300; + eventsListDetailsHeight=330; } @@ -380,6 +380,7 @@ angular.module('zmApp.controllers') // console.log ("WE GOT EVENTS="+JSON.stringify(data)); var myevents = data; + NVRDataModel.debug("EventCtrl: success, got " + myevents.length + " events"); var loginData = NVRDataModel.getLogin(); for (var i = 0; i < myevents.length; i++) @@ -418,6 +419,46 @@ angular.module('zmApp.controllers') myevents[i].Event.BasePath = computeBasePath(myevents[i]); myevents[i].Event.relativePath = computeRelativePath(myevents[i]); + // get thumbW/H + + var tempMon = NVRDataModel.getMonitorObject(myevents[i].Event.MonitorId); + if (tempMon != undefined) { + + var ratio; + var mw = parseInt(tempMon.Monitor.Width); + var mh = parseInt(tempMon.Monitor.Height); + var mo = Math.abs(parseInt(tempMon.Monitor.Orientation)); + + // scale by X if width > height + if (mw > mh ) { + ratio = mw / zm.thumbWidth; + myevents[i].Event.thumbWidth = 200; + myevents[i].Event.thumbHeight = Math.round(mh/ratio); + } + else { + + ratio = mh / zm.thumbWidth; + myevents[i].Event.thumbHeight = 200; + myevents[i].Event.thumbWidth = Math.round(mw/ratio); + + } + + if (mo == 90) { + var t = myevents[i].Event.thumbHeight; + myevents[i].Event.thumbWidth = myevents[i].Event.thumbHeight; + myevents[i].Event.thumbHeight = t; + + + } // swap + + console.log ("--------->" +"MW:"+myevents[i].Event.thumbWidth+ " MH:"+ myevents[i].Event.thumbHeight + " for Monitor:" + myevents[i].Event.MonitorName); + + + + + + } + // in multiserver BasePath is login url for frames // http://login.url/index.php?view=frame&eid=19696772&fid=21 @@ -2919,6 +2960,40 @@ angular.module('zmApp.controllers') myevents[i].Event.relativePath = computeRelativePath(myevents[i]); myevents[i].Event.height = eventsListDetailsHeight; + // get thumbW/H + + var tempMon = NVRDataModel.getMonitorObject(myevents[i].Event.MonitorId); + if (tempMon != undefined) { + + var ratio; + var mw = parseInt(tempMon.Monitor.Width); + var mh = parseInt(tempMon.Monitor.Height); + var mo = Math.abs(parseInt(tempMon.Monitor.Orientation)); + + // scale by X if width > height + if (mw > mh ) { + ratio = mw / zm.thumbWidth; + myevents[i].Event.thumbWidth = 200; + myevents[i].Event.thumbHeight = Math.round(mh/ratio); + } + else { + + ratio = mh / zm.thumbWidth; + myevents[i].Event.thumbHeight = 200; + myevents[i].Event.thumbWidth = Math.round(mw/ratio); + + } + + if (mo == 90) { + var t = myevents[i].Event.thumbHeight; + myevents[i].Event.thumbWidth = myevents[i].Event.thumbHeight; + myevents[i].Event.thumbHeight = t; + + + } // swap + } + + if (myevents[i].Event.imageMode == 'path') //if (1) myevents[i].Event.videoPath = myevents[i].Event.baseURL + "/events/" + myevents[i].Event.relativePath + myevents[i].Event.DefaultVideo; diff --git a/www/js/app.js b/www/js/app.js index 15c6aeab..a4fafc9e 100755 --- a/www/js/app.js +++ b/www/js/app.js @@ -29,6 +29,7 @@ angular.module('zmApp', [ 'jett.ionic.scroll.sista', 'uk.ac.soton.ecs.videogular.plugins.cuepoints', 'dcbImgFallback', + 'ngImageAppear' ]) @@ -102,7 +103,8 @@ angular.module('zmApp', [ maxGifWidth: 800.0, quantSample: 15, hashSecret: 'unused at the moment', - forceMontageReloadDelay: 3600 // 1 hr + forceMontageReloadDelay: 3600, // 1 hr, + thumbWidth:200 }) diff --git a/www/templates/events.html b/www/templates/events.html index 8157d0f6..999c8c88 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -25,7 +25,7 @@
-      {{prettifyTime(event.Event.StartTime)}} {{tzAbbr}}       {{event.Event.humanizeTime}} () @@ -64,7 +64,7 @@
-  {{event.Event.MonitorName}} ({{event.Event.Id}})   +  {{event.Event.MonitorName}} ({{event.Event.Id}})   @@ -72,7 +72,7 @@ -
@@ -80,15 +80,18 @@ {{event.Event.Frames}}   {{event.Event.AlarmFrames}}   - {{event.Event.TotScore}} +
-
+
- + + + +
diff --git a/www/templates/image-modal.html b/www/templates/image-modal.html index 2ed126c6..7195bae7 100644 --- a/www/templates/image-modal.html +++ b/www/templates/image-modal.html @@ -1,5 +1,9 @@ - - - + + + + + + + -- cgit v1.2.3