blog page blog post settings time slider replace.html

<script>

  document.addEventListener ( 'DOMContentLoaded', ( ) => {
  
    /*
    
      blog page blog post settings time slider replace
      
      License     : < https://tinyurl.com/s872fb68 >
      
      Version     : 0.1.1
      
      SS Version  : 7.1
      
      Fluid
      Engine
      Compatible  : Not Applicable
      
      Note        : this effect is only active in SS Preview
      
      By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      no user serviceable parts below
      
      */
      
    const version = '0.1.1';
    
    const s =
    
      `Blog Page Blog Post Settings Time Slider Replace v${ version }, ` +
      
      'License < https://tinyurl.com/s872fb68 >, ' +
      
      'Tom\'s Web Consulting < http://www.tomsWeb.consulting >';
      
    console.log ( s );
    
    // bail if no mutation observer available
    
    if ( ! ( 'MutationObserver' in window ) ) return;
    
    if ( window.frameElement == null ) return; // bail if not in preview
    
    const bodyConfig = {
    
      childList : true,
      
      subtree : true
      
      };
      
    const bodyCallback = mutations => {
    
      const callback = mutation => {
      
        // bail if no added node
        
        if ( ! mutation.addedNodes.length ) return false;
        
        const xpath = `.//p[. = 'Blog Post Settings']`;
        
        let element = mutation.addedNodes [ 0 ];
        
        element = document
        
          .evaluate ( xpath, element, null, XPathResult.FIRST_ORDERED_NODE_TYPE,
          
            null )
            
          .singleNodeValue;
          
        if ( element == null ) return; // bail if no element of interest
        
        element = element
        
          .closest ( '[role="dialog"]' )
          
          .querySelector ( '[class^="Transition-container-"]' );
          
        if ( element == null ) return false; // bail if no container
        
        // start listening for changes in element
        
        containerObserver.observe ( element, containerConfig );
        
        };
        
      mutations.forEach ( callback );
      
      };
      
    const bodyObserver = new MutationObserver ( bodyCallback );
    
    const codeKey = 'twc-bpbpstsr';
    
    const containerCallback = mutations => {
    
      const callback = mutation => {
      
        // bail if no added node
        
        if ( ! mutation.addedNodes.length ) return false;
        
        let element = mutation.addedNodes [ 0 ];
          
        let xpath = `.//span[. = 'Time']`;
        
        element = document
        
          .evaluate ( xpath, element, null, XPathResult.FIRST_ORDERED_NODE_TYPE,
          
            null )
            
          .singleNodeValue;
          
        if ( element == null ) return; // bail if no element of interest
        
        const callback = event => {
        
          const inputChangeTrigger = ( node, value = '' ) => {
          
            /*
            
              based on code by Dan G < https://tinyurl.com/4hes79u8 > and
              others
              
              */
              
            const inputTypes = [
            
              parent.HTMLInputElement,
              
              parent.HTMLSelectElement,
              
              parent.HTMLTextAreaElement,
              
              ];
              
            /*
            
              only process the change on elements we know have a value setter in their
              constructor
              
              */
              
            const isInputType = inputTypes
            
              .indexOf (
              
                node.__proto__.constructor
                
                )
                
              >
              
              -1;
              
            if ( ! isInputType ) return; // bail if not input type
            
            const event = new Event ( 'input', { bubbles : true } );
            
            const setValue = Object
            
              .getOwnPropertyDescriptor ( node.__proto__, 'value' )
              
              .set;
              
            setValue.call ( node, value );
            
            node.dispatchEvent ( event );
            
            };
            
          const time = input
          
            .value
            
            .split ( ':' );
            
          const hours = + time [ 0 ];
          
          const minutes = + time [ 1 ];
          
          let d = new Date (
          
            + inputSsElement.value
            
            );
            
          d.setHours ( hours, minutes );
          
          d = d.getTime ( );
          
          inputChangeTrigger ( inputSsElement, d )
          
          };
          
        // begin style
        
          const selector = `style[id="${ codeKey }"]`;
          
          let style = dcmnt
          
            .querySelector ( selector );
            
          if ( style !== null )
          
            style.remove ( );
            
          style = dcmnt
          
            .createElement ( 'style' );
            
          style
          
            .setAttribute ( 'id', `${ codeKey }` );
            
          style
          
            .setAttribute ( 'type', 'text/css' );
            
          style.innerHTML = `
          
            .${ codeKey }:nth-of-type( 2 ) {
            
              display : none;
              
              }
              
            .${ codeKey } div:first-child {
            
              margin-bottom : 11px;
              
              }
              
            `;
            
          dcmnt
          
            .head
            
            .appendChild ( style );
            
          // end style
          
        element = element
        
          .parentElement
          
          .parentElement;
          
        element
        
          .classList
          
          .add ( `${ codeKey }` );
          
        const classNames = element
        
          .getAttribute ( 'class' );
          
        const inputSsElement = element
        
          .querySelector ( 'input' );
          
        const d = new Date (
        
          Number (
          
            inputSsElement.value
            
            )
          
          );
          
        const hours = d
        
          .getHours ( )
          
          .toString ( )
          
          .padStart ( 2, '0' );
          
        const minutes = d
        
          .getMinutes ( )
          
          .toString ( )
          
          .padStart ( 2, '0' );
          
        const html = `
        
          <div class="${ classNames }">
          
            <div>
            
              <span>
              
                Time
                
                </span>
                
              </div>
              
            <div>
            
              <input name="time" type="time" value="${ hours }:${ minutes }">
              
              </div>
              
            </div>
            
          `;
          
        let input = document
        
          .createElement ( 'template' );
          
        inputSsElement
        
          .removeAttribute ( 'step' );
          
        input.innerHTML = html;
        
        input = input
        
          .content
          
          .children
          
          [ 0 ];
          
        element
        
          .insertAdjacentElement ( 'afterend', input );
          
        input = input
        
          .querySelector ( 'input' );
          
        input
        
          .addEventListener (  'change', callback );
          
        };
        
      mutations.forEach ( callback );
      
      };
      
    const containerConfig = {
    
      childList : true,
      
      subtree : true
      
      };
      
    const containerObserver = new MutationObserver ( containerCallback );
    
    const dcmnt = parent.document;
    
    // start listening for changes in parent document body
    
    bodyObserver.observe ( dcmnt.body, bodyConfig );
    
    } );
    
  </script>