ottograjeda · August 5, 2019 18:44 · ottograjeda · Jan 16, 2019
diff --git a/gist.5b = randomImage b/gist.5b = randomImage
 <!DOCTYPE html>

 <!--!

   Filename: gist.5b = randomImage.html                                                       

   Built for performance; is responsive & small in file size.
   Above means: all comments+whitespace removed. CS/JS minified.
   Toolbox = Gulp, Plain JavaScript & more. Hosted on Google Cloud.

   Copyright (c) 2018-2019 Otto Grajeda. All rights reserved. 
   Contact info: [email protected]. See additional disclaimers below. 

   NOTE 1: Code is NOT Open Source or Production Ready. It is working sample code.       
   NOTE 2: For support or code questions search keywords @ Google or Stack Overflow.     

   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - 

   THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND       
   ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED         
   WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE                
   DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR       
   ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES        
   (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;          
   LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON        
   ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT               
   (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS         
   SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.                          

   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - -   

 -->

 <html>
 <head>
 <base target="_top">

 <style>
 .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
 }

 .box {
  max-width: 100% !important;
  object-fit: cover !important;
  height: auto;
 }

 .centerBlock {
  margin-left: auto;
  margin-right: auto ; 
 }

 .textSmall {
  font-size: 77%;
  font-family: Arial, Helvetica, sans-serif;  
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center; 
  display: block;
 }
 </style>
 </head>

 <body>
 <center><div id="uxTop" class="textSmall">working...</div></center><!-- text will be removed -->  
 <div id="output" class="box"></div>
 <center><div id="uxBottom" class="textSmall"></div></center><!-- text will be added -->

 <script>
 var data = google.script.run.withSuccessHandler(function (data) {
  var UX_TOP = 'uxTop'; 
  var UX_BOTTOM = 'uxBottom'; 
  var UX_WORKING = 'working...';
  var validDiv1 = document.getElementById(UX_TOP);
  if(validDiv1){
    var text = validDiv1.textContent;
    validDiv1.textContent = '';
  }
  var validDiv2 = document.getElementById('output');
  if(validDiv2){
    var img = document.createElement("img");
    img.className = 'center';
    var imgUrl = '<link_removed>='+data; 
    img.src = imgUrl;
    img.onload = function () {
      validDiv2.appendChild(img);   
    }
  } 
  var validDiv3 = document.getElementById(UX_BOTTOM);
  if(validDiv3){
    var newLink = document.createElement('a');
    newLink.innerHTML = 'Fair Use notice';
    newLink.setAttribute('class', 'textSmall');
    newLink.setAttribute('target', '_blank');
    newLink.setAttribute('href', '<link_removed>');
    document.body.appendChild(newLink);
  }
 }).psRandomSet_get();
 </script>

 </body>
 </html>
	<!DOCTYPE html>

	<!--!

	Filename: gist.5b = randomImage.html

	Built for performance; is responsive & small in file size.
	Above means: all comments+whitespace removed. CS/JS minified.
	Toolbox = Gulp, Plain JavaScript & more. Hosted on Google Cloud.

	Copyright (c) 2018-2019 Otto Grajeda. All rights reserved.
	Contact info: [email protected]. See additional disclaimers below.

	NOTE 1: Code is NOT Open Source or Production Ready. It is working sample code.
	NOTE 2: For support or code questions search keywords @ Google or Stack Overflow.

	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - -

	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
	ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
	WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
	DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
	ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
	(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
	LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
	ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
	(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
	SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - -

	-->

	<html>
	<head>
	<base target="_top">

	<style>
	.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	}

	.box {
	max-width: 100% !important;
	object-fit: cover !important;
	height: auto;
	}

	.centerBlock {
	margin-left: auto;
	margin-right: auto ;
	}

	.textSmall {
	font-size: 77%;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	display: block;
	}
	</style>
	</head>

	<body>
	<center><div id="uxTop" class="textSmall">working...</div></center><!-- text will be removed -->
	<div id="output" class="box"></div>
	<center><div id="uxBottom" class="textSmall"></div></center><!-- text will be added -->

	<script>
	var data = google.script.run.withSuccessHandler(function (data) {
	var UX_TOP = 'uxTop';
	var UX_BOTTOM = 'uxBottom';
	var UX_WORKING = 'working...';
	var validDiv1 = document.getElementById(UX_TOP);
	if(validDiv1){
	var text = validDiv1.textContent;
	validDiv1.textContent = '';
	}
	var validDiv2 = document.getElementById('output');
	if(validDiv2){
	var img = document.createElement("img");
	img.className = 'center';
	var imgUrl = '<link_removed>='+data;
	img.src = imgUrl;
	img.onload = function () {
	validDiv2.appendChild(img);
	}
	}
	var validDiv3 = document.getElementById(UX_BOTTOM);
	if(validDiv3){
	var newLink = document.createElement('a');
	newLink.innerHTML = 'Fair Use notice';
	newLink.setAttribute('class', 'textSmall');
	newLink.setAttribute('target', '_blank');
	newLink.setAttribute('href', '<link_removed>');
	document.body.appendChild(newLink);
	}
	}).psRandomSet_get();
	</script>

	</body>
	</html>