Mailing 1 – Bienvenida

 

/** * Functionality for scaling, showing by media query, and navigation between multiple pages on a single page. * Code subject to change. **/

if (window.console==null) { window["console"] = { log : function() {} } }; // some browsers do not set console

var Application = function() { // event constants this.prefix = "--web-"; this.NAVIGATION_CHANGE = "viewChange"; this.VIEW_NOT_FOUND = "viewNotFound"; this.VIEW_CHANGE = "viewChange"; this.VIEW_CHANGING = "viewChanging"; this.STATE_NOT_FOUND = "stateNotFound"; this.APPLICATION_COMPLETE = "applicationComplete"; this.APPLICATION_RESIZE = "applicationResize"; this.SIZE_STATE_NAME = "data-is-view-scaled"; this.STATE_NAME = this.prefix + "state";

this.lastTrigger = null; this.lastView = null; this.lastState = null; this.lastOverlay = null; this.currentView = null; this.currentState = null; this.currentOverlay = null; this.currentQuery = {index: 0, rule: null, mediaText: null, id: null}; this.inclusionQuery = "(min-width: 0px)"; this.exclusionQuery = "none and (min-width: 99999px)"; this.LastModifiedDateLabelName = "LastModifiedDateLabel"; this.viewScaleSliderId = "ViewScaleSliderInput"; this.pageRefreshedName = "showPageRefreshedNotification"; this.application = null; this.applicationStylesheet = null; this.showByMediaQuery = null; this.mediaQueryDictionary = {}; this.viewsDictionary = {}; this.addedViews = []; this.viewStates = []; this.views = []; this.viewIds = []; this.viewQueries = {}; this.overlays = {}; this.overlayIds = []; this.numberOfViews = 0; this.verticalPadding = 0; this.horizontalPadding = 0; this.stateName = null; this.viewScale = 1; this.viewLeft = 0; this.viewTop = 0; this.horizontalScrollbarsNeeded = false; this.verticalScrollbarsNeeded = false;

// view settings this.showUpdateNotification = false; this.showNavigationControls = false; this.scaleViewsToFit = false; this.scaleToFitOnDoubleClick = false; this.actualSizeOnDoubleClick = false; this.scaleViewsOnResize = false; this.navigationOnKeypress = false; this.showViewName = false; this.enableDeepLinking = true; this.refreshPageForChanges = false; this.showRefreshNotifications = true;

// view controls this.scaleViewSlider = null; this.lastModifiedLabel = null; this.supportsPopState = false; // window.history.pushState!=null; this.initialized = false;

// refresh properties this.refreshDuration = 250; this.lastModifiedDate = null; this.refreshRequest = null; this.refreshInterval = null; this.refreshContent = null; this.refreshContentSize = null; this.refreshCheckContent = false; this.refreshCheckContentSize = false;

var self = this;

self.initialize = function(event) { var view = self.getVisibleView(); var views = self.getVisibleViews(); if (view==null) view = self.getInitialView(); self.collectViews(); self.collectOverlays(); self.collectMediaQueries();

for (let index = 0; index 60) { hours = parseInt((seconds/60/60) +""); labelValue += hours==1 ? " hour" : " hours"; } else { labelValue = minutes+""; labelValue += minutes==1 ? " minute" : " minutes"; } }

if (seconds1 && self.enableDeepLinking) {

if (self.supportsPopState==false) { self.setFragment(viewId); } else { if (viewFragment!=window.location.hash) {

if (window.location.hash==null) { window.history.replaceState({name:viewId}, null, viewFragment); } else { window.history.pushState({name:viewId}, null, viewFragment); } } } } }

self.updateURLState = function(view, stateName) { stateName = view && (stateName=="" || stateName==null) ? self.getStateNameByViewId(view.id) : stateName;

if (self.supportsPopState==false) { self.setFragment(stateName); } else { if (stateName!=window.location.hash) {

if (window.location.hash==null) { window.history.replaceState({name:view.viewId}, null, stateName); } else { window.history.pushState({name:view.viewId}, null, stateName); } } } }

self.setFragment = function(value) { window.location.hash = "#" + value; }

self.setTooltip = function(element, value) { // setting the tooltip in edge causes a page crash on hover if (/Edge/.test(navigator.userAgent)) { return; }

if ("title" in element) { element.title = value; } }

self.getStylesheetRules = function(styleSheet) { try { if (styleSheet) return styleSheet.cssRules || styleSheet.rules;

return document.styleSheets[0]["cssRules"] || document.styleSheets[0]["rules"]; } catch (error) { // ERRORS: // SecurityError: The operation is insecure. // Errors happen when script loads before stylesheet or loading an external css locally

// InvalidAccessError: A parameter or an operation is not supported by the underlying object // Place script after stylesheet

console.log(error); if (error.toString().indexOf("The operation is insecure")!=-1) { console.log("Load the stylesheet before the script or load the stylesheet inline until it can be loaded on a server") } return []; } }

/** * If single page application hide all of the views. * @param {Number} selectedIndex if provided shows the view at index provided **/ self.hideViews = function(selectedIndex, animation) { var rules = self.getStylesheetRules(); var queryIndex = 0; var numberOfRules = rules!=null ? rules.length : 0;

// loop through rules and hide media queries except selected for (var i=0;i=numberOfMediaQueries) { return; }

// loop through rules and hide media queries except selected for (var i=0;i=scaleNeededToFitWidth; canCenterHorizontally = scaleNeededToFitWidth>=1 && enableScaleUp==false;

if (isSliderChange) { canCenterHorizontally = desiredScale1 && (enableScaleUp || isSliderChange)) { transformValue = "scale(" + desiredScale + ")"; } else if (desiredScale>=1 && enableScaleUp==false) { transformValue = "scale(" + 1 + ")"; } else { transformValue = "scale(" + desiredScale + ")"; }

if (self.centerVertically) { if (canCenterVertically) { translateY = "-50%"; topPosition = "50%"; } else { translateY = "0"; topPosition = "0"; }

if (style.top != topPosition) { style.top = topPosition + ""; }

if (canCenterVertically) { transformValue += " translateY(" + translateY+ ")"; } }

if (self.centerHorizontally) { if (canCenterHorizontally) { translateX = "-50%"; leftPosition = "50%"; } else { translateX = "0"; leftPosition = "0"; }

if (style.left != leftPosition) { style.left = leftPosition + ""; }

if (canCenterHorizontally) { transformValue += " translateX(" + translateX+ ")"; } }

style.transformOrigin = "0 0"; style.transform = transformValue;

self.viewScale = desiredScale; self.viewToFitWidthScale = scaleNeededToFitWidth; self.viewToFitHeightScale = scaleNeededToFitHeight; self.viewLeft = leftPosition; self.viewTop = topPosition;

return desiredScale; }

// scale to fit height if (scaleToHeight && scaleToWidth==false) { //canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFitWidth; //canCenterHorizontally = scaleNeededToFitHeight=scaleNeededToFitWidth; canCenterHorizontally = scaleNeededToFitWidth>=1 && enableScaleUp==false;

if (isSliderChange) { canCenterHorizontally = desiredScale=scaleNeededToFitHeight && enableScaleUp==false; }

desiredScale = self.getShortNumber(desiredScale);

canCenterHorizontally = self.canCenterHorizontally(view, "height", enableScaleUp, desiredScale, minimumScale, maximumScale); canCenterVertically = self.canCenterVertically(view, "height", enableScaleUp, desiredScale, minimumScale, maximumScale);

if (desiredScale>1 && (enableScaleUp || isSliderChange)) { transformValue = "scale(" + desiredScale + ")"; } else if (desiredScale>=1 && enableScaleUp==false) { transformValue = "scale(" + 1 + ")"; } else { transformValue = "scale(" + desiredScale + ")"; }

if (self.centerHorizontally) { if (canCenterHorizontally) { translateX = "-50%"; leftPosition = "50%"; } else { translateX = "0"; leftPosition = "0"; }

if (style.left != leftPosition) { style.left = leftPosition + ""; }

if (canCenterHorizontally) { transformValue += " translateX(" + translateX+ ")"; } }

if (self.centerVertically) { if (canCenterVertically) { translateY = "-50%"; topPosition = "50%"; } else { translateY = "0"; topPosition = "0"; }

if (style.top != topPosition) { style.top = topPosition + ""; }

if (canCenterVertically) { transformValue += " translateY(" + translateY+ ")"; } }

style.transformOrigin = "0 0"; style.transform = transformValue;

self.viewScale = desiredScale; self.viewToFitWidthScale = scaleNeededToFitWidth; self.viewToFitHeightScale = scaleNeededToFitHeight; self.viewLeft = leftPosition; self.viewTop = topPosition;

return scaleNeededToFitHeight; }

if (scaleToFitType=="fit") { //canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFitWidth; //canCenterHorizontally = scaleNeededToFitWidth>=scaleNeededToFitHeight; canCenterVertically = scaleNeededToFitHeight>=scaleNeededToFit; canCenterHorizontally = scaleNeededToFitWidth>=scaleNeededToFit;

if (hasMinimumScale) { desiredScale = Math.max(desiredScale, Number(minimumScale)); }

desiredScale = self.getShortNumber(desiredScale);

if (isSliderChange || scaleToFit==false) { canCenterVertically = scaleToFitFullHeight>=desiredScale; canCenterHorizontally = desiredScale=1) { canCenter = true; } } else if (type=="height") { minScale = Math.min(1, scaleNeededToFitHeight); if (minimumScale!="" && maximumScale!="") { minScale = Math.max(minimumScale, Math.min(maximumScale, scaleNeededToFitHeight)); } else { if (minimumScale!="") { minScale = Math.max(minimumScale, scaleNeededToFitHeight); } if (maximumScale!="") { minScale = Math.max(minimumScale, Math.min(maximumScale, scaleNeededToFitHeight)); } }

if (scaleUp && maximumScale=="") { canCenter = false; } else if (scaleNeededToFitWidth>=minScale) { canCenter = true; } } else if (type=="fit") { canCenter = scaleNeededToFitWidth>=scaleNeededToFit; } else { if (scaleUp) { canCenter = false; } else if (scaleNeededToFitWidth>=1) { canCenter = true; } }

self.horizontalScrollbarsNeeded = canCenter;

return canCenter; }

/** * Returns true if view can be centered horizontally * @param {HTMLElement} view view to scale * @param {String} type type of scaling * @param {Boolean} scaleUp if scale up enabled * @param {Number} scale target scale value */ self.canCenterVertically = function(view, type, scaleUp, scale, minimumScale, maximumScale) { var scaleNeededToFit = self.getViewFitToViewportScale(view, scaleUp); var scaleNeededToFitWidth = self.getViewFitToViewportWidthScale(view, scaleUp); var scaleNeededToFitHeight = self.getViewFitToViewportHeightScale(view, scaleUp); var canCenter = false; var minScale;

type = type==null ? "none" : type; scale = scale==null ? 1 : scale; scaleUp = scaleUp == null ? false : scaleUp;

if (type=="width") { canCenter = scaleNeededToFitHeight>=scaleNeededToFitWidth; } else if (type=="height") { minScale = Math.max(minimumScale, Math.min(maximumScale, scaleNeededToFit)); canCenter = scaleNeededToFitHeight>=minScale; } else if (type=="fit") { canCenter = scaleNeededToFitHeight>=scaleNeededToFit; } else { if (scaleUp) { canCenter = false; } else if (scaleNeededToFitHeight>=1) { canCenter = true; } }

self.verticalScrollbarsNeeded = canCenter;

return canCenter; }

self.getViewFitToViewportScale = function(view, scaleUp) { var enableScaleUp = scaleUp; var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var elementWidth = parseFloat(getComputedStyle(view, "style").width); var elementHeight = parseFloat(getComputedStyle(view, "style").height); var newScale = 1;

// if element is not added to the document computed values are NaN if (isNaN(elementWidth) || isNaN(elementHeight)) { return newScale; }

availableWidth -= self.horizontalPadding; availableHeight -= self.verticalPadding;

if (enableScaleUp) { newScale = Math.min(availableHeight/elementHeight, availableWidth/elementWidth); } else if (elementWidth > availableWidth || elementHeight > availableHeight) { newScale = Math.min(availableHeight/elementHeight, availableWidth/elementWidth); }

return newScale; }

self.getViewFitToViewportWidthScale = function(view, scaleUp) { // need to get browser viewport width when element var isParentWindow = view && view.parentNode && view.parentNode===document.body; var enableScaleUp = scaleUp; var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var elementWidth = parseFloat(getComputedStyle(view, "style").width); var newScale = 1;

// if element is not added to the document computed values are NaN if (isNaN(elementWidth)) { return newScale; }

availableWidth -= self.horizontalPadding;

if (enableScaleUp) { newScale = availableWidth/elementWidth; } else if (elementWidth > availableWidth) { newScale = availableWidth/elementWidth; }

return newScale; }

self.getViewFitToViewportHeightScale = function(view, scaleUp) { var enableScaleUp = scaleUp; var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var elementHeight = parseFloat(getComputedStyle(view, "style").height); var newScale = 1;

// if element is not added to the document computed values are NaN if (isNaN(elementHeight)) { return newScale; }

availableHeight -= self.verticalPadding;

if (enableScaleUp) { newScale = availableHeight/elementHeight; } else if (elementHeight > availableHeight) { newScale = availableHeight/elementHeight; }

return newScale; }

self.keypressHandler = function(event) { var rightKey = 39; var leftKey = 37;

// listen for both events if (event.type=="keypress") { window.removeEventListener("keyup", self.keypressHandler); } else { window.removeEventListener("keypress", self.keypressHandler); }

if (self.showNavigationControls) { if (self.navigationOnKeypress) { if (event.keyCode==rightKey) { self.nextView(); } if (event.keyCode==leftKey) { self.previousView(); } } } else if (self.navigationOnKeypress) { if (event.keyCode==rightKey) { self.nextView(); } if (event.keyCode==leftKey) { self.previousView(); } } }

/////////////////////////////////// // GENERAL FUNCTIONS ///////////////////////////////////

self.getViewById = function(id) { id = id ? id.replace("#", "") : ""; var view = self.viewIds.indexOf(id)!=-1 && self.getElement(id); return view; }

self.getViewIds = function() { var viewIds = self.getViewPreferenceValue(document.body, self.prefix + "view-ids"); var viewId = null;

viewIds = viewIds!=null && viewIds!="" ? viewIds.split(",") : [];

if (viewIds.length==0) { viewId = self.getViewPreferenceValue(document.body, self.prefix + "view-id"); viewIds = viewId ? [viewId] : []; }

return viewIds; }

self.getInitialViewId = function() { var viewId = self.getViewPreferenceValue(document.body, self.prefix + "view-id"); return viewId; }

self.getApplicationStylesheet = function() { var stylesheetId = self.getViewPreferenceValue(document.body, self.prefix + "stylesheet-id"); self.applicationStylesheet = document.getElementById("applicationStylesheet"); return self.applicationStylesheet.sheet; }

self.getVisibleView = function() { var viewIds = self.getViewIds();

for (var i=0;itoIndex) { self.setElementAnimation(to, null); self.setElementAnimation(from, null); self.showViewByMediaQuery(to); self.fadeOut(from, update, reverse);

setTimeout(function() { self.setElementAnimation(to, null); self.setElementAnimation(from, null); self.hideView(from); self.updateURL(); self.setViewVariables(to); }, duration) } } }

self.fadeIn = function(element, update, animation) { self.showViewByMediaQuery(element);

if (update) { self.updateURL(element);

element.addEventListener("animationend", function(event) { element.style.animation = null; self.setViewVariables(element); self.updateViewLabel(); element.removeEventListener("animationend", arguments.callee); }); }

self.setElementAnimation(element, null);

element.style.animation = animation; }

self.fadeOutCurrentView = function(animation, update) { if (self.currentView) { self.fadeOut(self.currentView, update, animation); } if (self.currentOverlay) { self.fadeOut(self.currentOverlay, update, animation); } }

self.fadeOut = function(element, update, animation) { if (update) { element.addEventListener("animationend", function(event) { element.style.animation = null; self.hideView(element); element.removeEventListener("animationend", arguments.callee); }); }

element.style.animationPlayState = "paused"; element.style.animation = animation; element.style.animationPlayState = "running"; }

self.getReverseAnimation = function(animation) { if (animation && animation.indexOf("reverse")==-1) { animation += " reverse"; }

return animation; }

/** * Get duration in animation string * @param {String} animation animation value * @param {Boolean} inMilliseconds length in milliseconds if true */ self.getAnimationDuration = function(animation, inMilliseconds) { var duration = 0; var expression = /.+(\d\.\d)s.+/;

if (animation && animation.match(expression)) { duration = parseFloat(animation.replace(expression, "$" + "1")); if (duration && inMilliseconds) duration = duration * 1000; }

return duration; }

self.setElementAnimation = function(element, animation, priority) { element.style.setProperty("animation", animation, "important"); }

self.getElement = function(id) { id = id ? id.trim() : id; var element = id ? document.getElementById(id) : null;

return element; }

self.getElementById = function(id) { id = id ? id.trim() : id; var element = id ? document.getElementById(id) : null;

return element; }

self.getElementByClass = function(className) { className = className ? className.trim() : className; var elements = document.getElementsByClassName(className);

return elements.length ? elements[0] : null; }

self.resizeHandler = function(event) {

if (self.showByMediaQuery) { if (self.enableDeepLinking) { var stateName = self.getHashFragment();

if (stateName==null || stateName=="") { var initialView = self.getInitialView(); stateName = initialView ? self.getStateNameByViewId(initialView.id) : null; } self.showMediaQueryViewsByState(stateName, event); } } else { var visibleViews = self.getVisibleViews();

for (let index = 0; index