Testing Bionic Test mode on Blogs

Still some bugs, but generally works
Bionic Reading seems to help some Autistic & ADHD individuals to read faster

Author: ProcStack

docs/js/ProcStackGitio.js

@@ -179,10 +179,16 @@ if( searchParams.has('scale') ){
 
 // -- -- -- -- --
 
+// I should add a "isMobile" callback on pxlNav boot, but for now -
+let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent );
+
+// -- -- -- -- --
+
 // Create the main page manager
 //  - Not related to pxlNav -
 const procPages = new ProcPageManager();
 procPages.setVersion( pxlNavVersion );
+procPages.setMobile( isMobile );
 // Set the Meta Data per page
 //   Page changes will update the meta data automatically if the page is in the list
 //procPages.setPageMetaData( ProcPageMetaData );

docs/js/blog/blogEntryBase.js

@@ -20,17 +20,41 @@ export const baseEntryStruct = () =>{
 export class blogEntry{
   constructor( parent, entryData ){
     this.id = null;
+    this.isMobile = false;
     this.parent = parent;
     //this.rawEntryData = entryData; // I have no need for it yet, but maybe
     this.title = entryData.title;
     this.marked = entryData.marked || ENTRY_MARK_ENUM.NONE;
     this.date = entryData.date;
     this.body = entryData.body;
     this.tags = entryData.tags;
-
+    
+    // -- -- --
+    // Bionic Reading Data & State
+    //   Neurodivergent Text Mode for Autism & ADHD
+    //   Bolded initial letters of words to allow the brain to fill in the rest of the word for easier reading.
+    //     https://bionic-reading.com/
+    
+    this.autoBuildBionic = true;
+    this.bionicMode = false;
+    this.isBionicTextBuilding = false;
+
+    this.bionicPercentConversion = .5; // Percent of the word to convert to bold 
+    this.bionicPercentConversion_desktop = .5;
+    this.bionicPercentConversion_mobile = .35;
+    this.bionicBuildWaitTime = 50; // MS Waittime between building chunks of bionic text
+    this.bionicBuildRunMax = 10; // Number of lines of text to convert per wait time timeout into bionic text, avoids thread locking the browser on long entries.
+    this.body_bionic_toProcess = entryData.body.split('\n'); // To Convert; Unprocessed body -> bionic conversion
+    this.body_bionic = null; // Built on demand
+    this.body_typical = entryData.body;
+    this.bionicTimeout = null;
+    
+    // -- -- --
+    
     this.readTimes = null;
 
     this.blogEntryObj = null;
+    this.accessibilityObj = null;
     this.titleObj = null;
     this.dateObj = null;
     this.bodyObj = null;
@@ -51,6 +75,27 @@ export class blogEntry{
   setParent( parent ){
     this.parent = parent;
   }
+  setMobile( isMobile ){
+    this.isMobile = !!isMobile;
+    if( this.isMobile ){
+      this.bionicPercentConversion = this.bionicPercentConversion_mobile;
+    }else{
+      this.bionicPercentConversion = this.bionicPercentConversion_desktop;
+    }
+
+    // Re-trigger Bionic Text Building from scratch
+    //  TODO : I should pass bionic build through the pageManager, but for now, I'm just re-running it.
+    if( this.isBionicTextBuilding ){
+      clearTimeout( this.bionicTimeout );
+      this.isBionicTextBuilding = false;
+      this.body_bionic = null;
+      this.body_bionic_toProcess = this.body.split('\n');
+      this.buildBionicBody();
+    }
+  }
+
+  // -- -- -- 
+
   build( parent=null ){
     let parentObj = parent;
     if( parentObj == null ){
@@ -100,7 +145,7 @@ export class blogEntry{
     // Accessibility Buttons; Font Size +/- for now
     let plusBtn = document.createElement('button');
     plusBtn.classList.add('blogEntryAccessibilityButtonStyle');
-    plusBtn.classList.add('procPagesNavSectionStyle');
+    plusBtn.classList.add('accessibilitySectionStyle');
     plusBtn.classList.add('procPagesButtonStyle');
     plusBtn.classList.add('procPagesSectionNavColor');
     //procPagesNavSectionStyle procPagesButtonStyle procPagesSectionNavColor aiDevPage-sectionNavButtonStyle
@@ -110,14 +155,34 @@ export class blogEntry{
     plusBtn.addEventListener('click', (e)=>{this.resizeText(.2);});
     let minusBtn = document.createElement('button');
     minusBtn.classList.add('blogEntryAccessibilityButtonStyle');
-    minusBtn.classList.add('procPagesNavSectionStyle');
+    minusBtn.classList.add('accessibilitySectionStyle');
     minusBtn.classList.add('procPagesButtonStyle');
     minusBtn.classList.add('procPagesSectionNavColor');
     minusBtn.innerHTML = '-';
     minusBtn.title = 'Decrease Font Size';
     this.accessibilityObj.appendChild(minusBtn);
     minusBtn.addEventListener('click', (e)=>{this.resizeText(-.2);});
+
+    // Bionic Reading Toggle
+    //   Neurodivergent Text Mode for Autism & ADHD
+    //   Bolded initial letters of words to allow the brain to fill in the rest of the word for easier reading.
+    //     https://bionic-reading.com/
+    let bionicButton = document.createElement('button');
+    bionicButton.classList.add('blogEntryAccessibilityButtonStyle');
+    bionicButton.classList.add('accessibilitySectionStyle');
+    bionicButton.classList.add('procPagesButtonStyle');
+    bionicButton.classList.add('procPagesSectionNavColor');
+    bionicButton.classList.add('bionicToggleButtonStyle');
+    bionicButton.innerHTML = '<span class="hideOnMobile">To&nbsp;</span>Bionic';
+    bionicButton.title = 'Toggle Bionic Reading';
+    this.accessibilityObj.appendChild(bionicButton);
+    bionicButton.addEventListener('click', (e)=>{this.toggleBionicReading( bionicButton );});
+
+
     // -- -- --
+
+    // Build title row
+
     this.titleRowObj.appendChild(this.titleObj);
     this.titleRowObj.appendChild(this.dateObj);
     this.titleRowObj.appendChild(this.readTimeBodyObj);
@@ -163,8 +228,18 @@ export class blogEntry{
     this.blogEntryObj.appendChild(this.commentObj);
 
     parentObj.appendChild( this.blogEntryObj );
+
+
+    // -- -- --
+
+    // Initialize Bionic Text Conversion
+    if( this.autoBuildBionic ){
+      this.buildBionicBody();
+    }
   }
 
+  // -- -- --
+
   getReadTimes( text ){
     // Average is 200-250 words per minute,
     //   But I was a slow reader when I was younger.
@@ -205,6 +280,8 @@ export class blogEntry{
     }
     return retVal;
   }
+  
+  // -- -- --
 
   resizeText( dir ){
       let currentSize = this.bodyObj.style.fontSize;
@@ -213,6 +290,128 @@ export class blogEntry{
       this.bodyObj.style.fontSize = toSize + 'em';
   }
 
+  // -- -- --
+
+  toggleBionicReading(  buttonObj=null ){
+
+    let isBuilding = this.isBionicTextBuilding;
+    if( this.isBionicTextBuilding ){
+      if( this.bionicTimeout ){
+        clearTimeout( this.bionicTimeout );
+      }
+      this.isBionicTextBuilding = false;
+    }
+
+    this.bionicMode = !this.bionicMode;
+
+    // End processing and process the rest of the toProcess bionic body text
+    if( this.bionicMode && this.verifyBionicBuilt() ){
+      this.bodyObj.innerHTML = this.body_bionic;
+    }else{
+      this.bodyObj.innerHTML = this.body_typical;
+    }
+
+    // Update button text
+    if( buttonObj ){
+      if( this.bionicMode ){
+        buttonObj.innerHTML = '<span class="hideOnMobile">To&nbsp;</span>Typical';
+      }else{
+        buttonObj.innerHTML = '<span class="hideOnMobile">To&nbsp;</span>Bionic';
+      }
+    }
+  }
+
+  // Process line chunks of the body text into bionic text,
+  //   Building up `this.body_bionic` until all lines are processed.
+  buildBionicBody(){
+    this.isBionicTextBuilding = true;
+
+    let selectedLines = this.body_bionic_toProcess.splice( 0, this.bionicBuildRunMax );
+    this.processBionicLines( selectedLines );
+    if( this.body_bionic_toProcess.length > 0 ){
+      this.bionicTimeout = setTimeout( () => { this.buildBionicBody(); }, this.bionicBuildWaitTime );
+    }else{
+      this.isBionicTextBuilding = false;
+      this.body_bionic_toProcess = null;
+      this.bionicTimeout = null;
+    }
+  }
+
+  // Process a provided array of lines into bionic text
+  //   This will process all lines if the full `this.body_bionic_toProcess` is provided
+  processBionicLines( lines ){
+    let keepMatch = /(&nbsp;|[</](br|div|span|p|)|(class.+>))/g;
+    if( lines.length === 0 ){
+      this.isBionicTextBuilding = false;
+      return;
+    }
+    let toProcess = lines.splice( 0, this.bionicBuildRunMax );
+    toProcess.forEach( (line) => {
+      let textBreaks = line.split(' ');
+      let convertedLine = textBreaks.map( word => { 
+                            // Find and return HTML tags & &nbsp;
+                            let hasMatch = word.match( keepMatch );
+                            if( hasMatch != null && hasMatch.length > 0 ){
+                              return word;
+                            }
+
+                            // Find dashes in word
+                            let hyph = word.split('-');
+                            if( hyph.length > 1 ){
+                              return hyph.map( part => this.convertToBionic(part) ).join('-');
+                            }
+
+                            hyph = word.split('+');
+                            if( hyph.length > 1 ){
+                              return hyph.map( part => this.convertToBionic(part) ).join('+');
+                            }
+                            
+                            // Convert word to bionic
+                            return this.convertToBionic(word);
+                          } ).join(' ');
+      if( this.body_bionic == null ){
+        this.body_bionic = convertedLine;
+      }else{
+        this.body_bionic += '\n' + convertedLine;
+      }
+    });
+  }
+
+  // Verify if the body needs to be fully processed in one go
+  //   The user clicked the Bionic button before processing finished
+  verifyBionicBuilt(){
+    if( this.body_bionic_toProcess != null && this.body_bionic_toProcess.length > 0 ){
+      clearTimeout( this.bionicTimeout );
+      this.processBionicLines( this.body_bionic_toProcess );
+      this.body_bionic_toProcess = null;
+      this.isBionicTextBuilding = false;
+    }
+    return true;
+  }
+
+  // Bolden the first X% of the word, minimum 1 letter
+  //   Percentage set in `this.bionicPercentConversion`
+  convertToBionic( text ){
+    if( text.trim().length === 0 ){
+      return text;
+    }
+    let matchReg = /(?!.*[<>])([\d\D])/g;
+    let matchOnce = text.match( matchReg );
+    if( matchOnce == null ){
+      return text;
+    }
+    
+    let stringRun = Math.ceil(text.length * this.bionicPercentConversion);
+    stringRun = Math.max( stringRun, 1 );
+
+    let retVal = "";
+    retVal += `<span class="textBold">${text.substring(0, stringRun)}</span>`;
+    retVal += text.substring(stringRun);
+    return retVal;
+  }
+
+  // -- -- --
+
   show(){
     this.blogEntryObj.style.display = 'block';
     this.updateURL();

docs/js/procPages/ProcPage.js

@@ -64,6 +64,7 @@ export class ProcPage {
    * @param {Object} [contentObject.sections] - Section definitions
    */
   constructor( contentObject ){
+    this.isMobile = false;
     this.metaData = contentObject.metaData || {};
     this.visible = contentObject.hasOwnProperty('visible') ? contentObject.visible : true;
     this.id = contentObject.id || null;
@@ -170,6 +171,12 @@ export class ProcPage {
   }
 
   // -- -- --
+  
+  setMobile( isMobile ){
+    this.isMobile = isMobile;
+  }
+
+  // -- -- --
 
 /**
  * Set page metadata
@@ -968,9 +975,10 @@ export class ProcPage {
     }
 
     if( builtObjs['blog'] != null ){
-
       this.sectionData[sectionName].blogManager = builtObjs['blog'];
-
+      builtObjs['blog'].blogEntries.forEach(( entry )=>{
+        entry.setMobile( this.isMobile );
+      });
     }
 
     this.sectionData[sectionName].isLoaded = true;

docs/js/procPages/ProcPageManager.js

@@ -37,6 +37,7 @@ export class ProcPageManager {
    */
   constructor(originUrl) {
     this.originUrl = originUrl || window.location.origin;
+    this.isMobile = false;
     this.mainDiv = null;
     this.curPage = null;
     this.curRoom = null;
@@ -206,6 +207,12 @@ export class ProcPageManager {
 
     return depthPrefix;
   }
+  
+  setMobile( isMobile ){
+    this.isMobile = isMobile;
+  }
+  
+  // -- -- --
 
 /**
  * @method init
@@ -622,6 +629,8 @@ export class ProcPageManager {
       if( !listingKeys.includes(pageKey) ){
         this.pageListing[pageKey] = Object.assign({}, this.defaultPageListing);
       }
+
+      pageData[pageKey].setMobile( this.isMobile );
 
       this.pageListing[pageKey][ "pageData" ] = pageData[pageKey];
       if( pageData[pageKey].hasOwnProperty("metaData") ){

docs/pages/aiDev/aiNotes.js

@@ -51,6 +51,10 @@ export const pageListingData = {
 
       <br>No LLMs here.
       <br>These are my own rambly-ass thoughts.
+
+      <br>
+      <br>If you are Autistic or ADHD,
+      <br>Try <span class="textName">Bionic Reading</span> mode; it may help you read faster.
     </div>
 
       <br><br><br><div class='procPagesAIDevBar'></div>