Merge pull request #24 from alanmmckay/general_edits

main <- general_edits

js/project_functions.js

@@ -85,4 +85,110 @@ function setDynamicFigureStyle(event_type, screen_state,element,old_ele_height,c
     },old_ele_height];
 }
 
+/* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- -----  */
+
+// A function which changes the font size of a code block being displayed.
+//  This requires elements with the following schema to be in place:
+/*
+ * <figure class='code-figure'>
+ *      <iframe frameborder="0" style='width:100%;max-height:<INT>px;overflow:auto' max-height='<INT>' src='<URI>'>
+ *      </iframe>
+ * </figure>
+ */
+// setCodeSizeSliders() will attach a div containing a button and an input
+//  slider to each element with code-figure set as a class.
+// revealCodeSizeSlider() activates the relevant control once a button is
+//  pressed or once an input option is selected.
+// changeCodeSize() will then set the size of the font in each iframe whilst
+//  changing the max-height property to ensure that the iframes cannot be
+//  resized to too great of a length.
+
+// Changes made using this resize method is global for all code blocks being
+//  displayed on a page.
+
+function changeCodeSize(element){
+    var value = element.value;
+    var iframes = document.getElementsByTagName('iframe');
+    for(let i=0; i<iframes.length; i++){
+        var iframe = iframes[i];
+        var iframe_content = iframe.contentWindow.document;
+        var pre = iframe_content.getElementsByTagName('pre')[0];
+        var code = iframe_content.getElementsByTagName('code')[0];
+        code.style['font-size'] = value+'px';
+        // For hidden elements:
+        if(pre.getBoundingClientRect().height == '' || pre.getBoundingClientRect().height == '0'){
+            var new_height = Number(iframe.style['max-height'].substring(0,iframe.style['max-height'].length-2));
+            var max = Number(iframe.getAttribute('max-height'));
+            var ratio = max * ((17-1)-value);
+            ratio = ratio / 17;
+            iframe.style['max-height'] = max - ratio + 'px';
+        }else{
+            var new_height = pre.getBoundingClientRect().height;
+            iframe.style['max-height'] = new_height+((17+1-value+85)*.40)+'px';
+        }
+        //
+        if(pre.style['padding-top'] == '' || pre.style['padding-top'] == '0%'){
+            var padding = 0;
+        }else{
+            var padding = Number(pre.style['padding-top'].substring(0,pre.style['padding-top'].length-1));
+        };
+        pre.style['padding-top'] = (17 + 1 - value)*.40 + '%';
+    }
+    slider_containers = document.getElementsByClassName('code-font');
+    for(let i=0; i<slider_containers.length; i++){
+        container = slider_containers[i];
+        slider = container.getElementsByTagName('input')[0];
+        slider.value = value;
+    }
+}
+
+function revealCodeSizeSlider(bool){
+    var buttons = document.getElementsByTagName('button');
+    for(let i=0; i<buttons.length; i++){
+        var button = buttons[i];
+        if(bool == true){
+            button.style['display'] = 'none';
+        }else{
+            button.style['display'] = 'inherit';
+        }
+    }
+    slider_containers = document.getElementsByClassName('code-font');
+    for(let i=0; i<slider_containers.length; i++){
+        container = slider_containers[i];
+        slider = container.getElementsByTagName('input')[0];
+        if(bool == true){
+            slider.style['display'] = 'inherit';
+        }else{
+            slider.style['display'] = 'none';
+        }
+    }
+}
+
+function setCodeSizeSliders(){
+    var iframe_containers = document.getElementsByClassName('code-figure');
+    for(let i=0; i<iframe_containers.length; i++){
+        var container = iframe_containers[i];
+        var div = document.createElement('div');
+        div.classList.add('code-font');
+
+        var button = document.createElement('button');
+        button.addEventListener("click",function(){revealCodeSizeSlider(true);});
+        button.innerHTML = "Code Size";
+
+        var input = document.createElement('input');
+        input.type = 'range';
+        input.min = '12';
+        input.max = '17';
+        input.value = '17';
+        input.addEventListener('input',function(){changeCodeSize(this);});
+        input.addEventListener('mouseup',function(){revealCodeSizeSlider(false);});
+        input.addEventListener('touchend',function(){revealCodeSizeSlider(false);});
+
+        div.appendChild(button);
+        div.appendChild(input);
+        container.insertBefore(div,container.firstChild);
+    }
+}
+
+
 /* ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- -----  */

photography/index.php

@@ -31,14 +31,9 @@
     ){
 ?>
                     <section class='info'>
-                        <header>
-                            <h2>On VSCO</h2>
-                        </header>
+                        <br>
                         <p>
-                            From the homepage, navigating to my photography portal used to take a visitor to my <a href='https://vsco.co/alanmckay/gallery' target="_blank" rel="noopener noreferrer">VSCO profile</a>. The VSCO platform has recently made a change forcing a vistor to sign into their service in order to view the entirety of a given profile's image gallery. This has effectively siloed their users into a walled garden, which has encouraged me to stop paying an optional subscription and develop my own image gallery.
-                        </p>
-                        <p>
-                            This is the result of my efforts. Feel free to take a look at the various photographs I've taken since 2018. There is no obligation to sign in here. Interacting with an image will take you to the relevant photo within the VSCO platform. This will be changed once the gate is locked for individual images as well.
+                            Unless noted otherwise, all photos on this page have been taken by Alan Mckay. A project description of how this gallery works can be found <a href='../projects/gallery/'>here</a>.
                         </p>
                     <hr>
                     </section>
@@ -52,7 +47,7 @@
 <?php
     $json = file_get_contents("manifest.json");
     $json_data = json_decode($json,true);
-    $image_count = 9;
+    $image_count = 18;
     $image_index = 0;
     $images_quantity = count($json_data);
     $max_page_number = ceil($images_quantity / $image_count);
@@ -205,7 +200,7 @@
             function isFigureBottom(fig_object){
                 var fig_height = fig_object.getBoundingClientRect().height;
                 var fig_top = fig_object.getBoundingClientRect().top;
-                if((window.innerHeight * .95)-fig_top > 0){
+                if((window.innerHeight * 1.85)-fig_top > 0){
                     return true;
                 }else{
                     return false;