123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="wrapper">
  
  # User Level Based Content

  I was browsing through [Brad Neuberg's blog](http://codinginparadise.org/) I came across [stretchtext.js](http://codinginparadise.org/ebooks/html/blog/stretchtext.html) and I found it interesting enough to take a deeper look.

  <p>Stretchtext is a Javascript implementation of a hypertext going back all the way to the work of Ted Nelson in 1967.</p>

  <p><a class="stretchsummary" href="#stretchtext_history_light" title="Expand" class="stretchtext-open">Taken from Neuberg's article:</a><p>

  <figure id="stretchtext_history_light" class="stretchdetail">
    <blockquote>
      <p>Stretchtext is an extremely simple but powerful form of hypertext. It is probably the easiest possible hypertext to understand. It would be hard for a reader of stretchtext to become confused.</p>
      <p>Stretchtext consists of ordinary continuous text which can be "stretched", or made longer and more detailed. By pointing at specific areas and pulling the throttle in the "magnify" direction, the reader may obtain a greater detail on a specific subject, or area of the text. The text <u>stretches</u>, becoming longer, with replacement phrases, new details and additional clauses popping into place.</p>
      <p>The good of this structure should be evident. <u>The reader remains oriented</u>. If he loses track of where he is, he "shrinks" the text to a higher, shorter level; if he wants to study a topic in more detail, he magnifies it.</p>
      <p><a class="stretchsummary" href="#ted_nelson_stretchtext_more_details" title="Expand">More...</a></p>
      <div id="ted_nelson_stretchtext_more_details" class="stretchdetail">
          <p>An important editorial constraint on stretchtext, then, is that details and narrative arrangements must remain fixed in their relative order through different levels of stretchtext. However, in one respect it appears to be easier to write than ordinary text: rather than deciding what details to "put in" and "leave out," the author merely assigns <u>altitudes</u> (or "fineness"?) to topics and details, thus determining at how great a magnification they will be seen.</p>
          <p>High performance dynamic consoles may be preferable for stretchtext, but ways are possible to present it on a static display-- if the display can support a moving cursor and a user pointing device.</p>
          <p>Editorially, the stretchtext is (1) always the same unit, and (2) <u>always a continuous narrative</u>. Thus it is unlike hypertexts with discrete chunks and breaks.</p>
      </div>
    </blockquote>
    <figcaption>Ted Nelson,
      <cite>Hypertext Note 8, 1967</cite>
    </figcaption>
    </figure>

  So, the idea is that we begin with our basic text or text for our beginner audience and then we can create additional material that we can "stretch" to allow for more advanced content at deeper levels or we can haave multiple sections of stretched content at the same level. 

  The tool adds complexity to the writing process. If the end result is 15 pages how do we create the content? Do we write all 15 and then insert the markup to create the stretch points? Do we create an initial five pages and then expand the content as needed?
  
</div>

<!-- <div class="wrapper">
  <h1>Exaample 1</h1>
  <p>There once was a <span class="stretchsummary">girl</span><span class="stretchdetail"> Her name was <span class="stretchsummary">Nancy</span><span class="stretchdetail">That was my mother's name.</span> Some stuff at the end</span>
  </p>
  <p>Most scientists accept <a href="#global-warming-details" class="stretchsummary">global warming</a>.</p>
  <aside id="global-warming-details" class="stretchdetail">
    <p>More details on global warming. <a class="stretchsummary" href="#evenmore">More supporting evidence</a></p>
    <ol id="evenmore" class="stretchdetail">
      <li>Greater degrees of CO<sub>2</sub></li>
      <li>Evidence of warming <span class="stretchsummary">trend</span><span class="stretchdetail"> It's the truth -- accept it!</span>.</li>
    </ol>
  </aside>
  <p>This is material at the bottom of the page that will get stretched down.</p>

  <h1>Example 2</h1>
  <p>There once was a <span class="stretchsummary">girl</span><span class="stretchdetail"> Her name was <span class="stretchsummary">Nancy</span><span class="stretchdetail">That was my mother's name.</span> Some stuff at the end</span>
  </p>
  <p>Most scientists accept <a href="#global-warming-details3" class="stretchsummary">global warming</a>.</p>
  <aside id="global-warming-details3" class="stretchdetail">
    <p>More details on global warming. <a class="stretchsummary" href="#evenmore3">More supporting evidence</a></p>
    <ol id="evenmore3" class="stretchdetail">
      <li>Greater degrees of CO<sub>2</sub></li>
      <li>Evidence of warming <span class="stretchsummary">trend</span><span class="stretchdetail"> It's the truth -- accept it!</span>.</li>
    </ol>
  </aside>
  <p>This is material at the bottom of the page that will get stretched down.</p>
</div> -->
            
          
!
            
              .wrapper {
  margin: 2em;
}

.stretchsummary {
  border: 1px dashed gray;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.stretchsummary:hover {
  border-style: solid;
}

.stretchsummary::after {
  content: "\00bb"; /* >> character */
  color: #88886d;
  padding-left: 3px;
  padding-right: 3px;
}

.stretchsummary + .stretchdetail {
  margin-left: 0.1em;
}

.stretchdetail {
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}

.stretchdetail.stretchtext-open {
  opacity: 1;
  background-color: #faf0e6;
}

.stretchsummary.stretchtext-open::after {
  content: "\00ab"; /* << character */
}

            
          
!
            
              (function() {
  "use strict";

  let TITLE_WHEN_CLOSED = "Expand";
  let TITLE_WHEN_OPEN = "Collapse";

  // requestAnimationFrame shimming.
  let requestAnimationFrame =
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };

  function toggleSummary(evt) {
    // Prevent the text from being selected if rapidly clicked.
    evt.preventDefault();

    let summary = evt.target;
    let detail = findDetailFor(summary);
    if (!detail) {
      return;
    }

    // CSS Transitions don't work as expected on things set to 'display: none'. Make the
    // stretch details visible if needed, then use a timeout for the transition to take
    // effect.
    if (summary.classList.contains("stretchtext-open")) {
      detail.style.display = "none";
    } else {
      detail.style.display = isBlockLevelDetail(summary) ? "block" : "inline";
    }

    requestAnimationFrame(function() {
      summary.classList.toggle("stretchtext-open");
      detail.classList.toggle("stretchtext-open");

      if (summary.classList.contains("stretchtext-open")) {
        setTitle(summary, TITLE_WHEN_OPEN);
      } else {
        setTitle(summary, TITLE_WHEN_CLOSED);
      }
    });
  }

  function isBlockLevelDetail(summary) {
    return summary.nodeName.toLowerCase() === "a";
  }

  function setTitle(summary, title) {
    // If the user placed a manual title on the summary leave it alone.
    if (summary.hasAttribute("title")) {
      return;
    } else {
      summary.setAttribute("title", title);
    }
  }

  function findDetailFor(summary) {
    if (isBlockLevelDetail(summary)) {
      let id = summary.getAttribute("href").replace(/^#/, "");
      let detail = document.getElementById(id);
      if (!detail && window.console) {
        console.error("No StretchText details element with ID: " + id);
      }
      return detail;
    } else {
      let detail = summary.nextElementSibling;
      if (!detail && window.console) {
        console.error("No StretchText details element found for: ", summary);
      }
      return detail;
    }
  }

  function getSummaries() {
    let results = [],
      summaries;

    // epub-type
    summaries = document.querySelectorAll('[epub-type="stretchsummary"]');
    Array.prototype.forEach.call(summaries, function(result) {
      results.push(result);
    });

    // CSS class.
    summaries = document.getElementsByClassName("stretchsummary");
    Array.prototype.forEach.call(summaries, function(result) {
      results.push(result);
    });

    return results;
  }

  let loadedCalled = false;
  function loaded() {
    if (loadedCalled) {
      return;
    }
    loadedCalled = true;
    // FIXME(slightlyoff): Add global handlers instead of one per item.
    getSummaries().forEach(function(summary) {
      summary.setAttribute("title", TITLE_WHEN_CLOSED);

      // Listen on mousedown instead of click so that we can prevent text
      // selection if mouse is clicked rapidly.
      summary.addEventListener("mousedown", toggleSummary);

      summary.addEventListener("touchstart", toggleSummary);

      // Link resolving can't be canceled in mousedown event, only in click
      // event.
      summary.addEventListener("click", function(e) {
        e.preventDefault();
      });
    });
  }

  window.addEventListener("DOMContentLoaded", loaded);
  if (document.readyState == "complete") {
    loaded();
  }
})();

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console