unpoly-rails 0.61.1 → 2.0.0.pre.rc4

data/design/ghost-debugging.txt

@@ -1,118 +0,0 @@
-https://jsbin.com/mehuyefuqi/6/edit?html,css,js,output
-
-
-$(function() {
-  var $box = $('.box');
-
-  var $ghost = $box.clone();
-
-  var $wrapper = $('<div class="wrapper"></div>');
-
-  $ghost.appendTo($wrapper);
-
-  $wrapper.css({
-    backgroundColor: 'rgba(255,255,0,0.1)'
-  });
-
-  var offset = $box.position();
-  var height = $box.height();
-  var width = $box.width();
-
-
-  $wrapper.css({
-    position: 'absolute',
-    left: offset.left,
-    top: offset.top,
-  });
-
-  $ghost.css({
-    width: width,
-    height: height,
-    color: 'red',
-    backgroundColor: 'rgba(255,255,255,0.2)'
-  });
-
-  $wrapper.insertBefore($box);
-
-  var diff = $ghost.offset().top - $box.offset().top;
-
-  $('.output').text(
-    $wrapper.offset().top + " / " +
-    $ghost.offset().top + " / " +
-    $box.offset().top + " / " +
-    "D=" + diff
-  );
-
-  $wrapper.css({
-    top: parseInt($wrapper.css('top')) - diff
-  });
-
-  // alert($wrapper.css('top'));
-
-});
-
-
-
-
-
-Nochmal neu:
-------------
-
-
-$(function() {
-
-  var $box = $('.box');
-
-  var $ghost = $box.clone();
-
-  var $wrapper = $('<div class="wrapper"></div>');
-
-  $ghost.appendTo($wrapper);
-
-  $wrapper.css({
-    backgroundColor: 'rgba(255,255,0,0.1)'
-  });
-
-  var offset = $box.position();
-  var height = $box.height();
-  var width = $box.width();
-
-  $wrapper.css({
-    position: 'absolute',
-    left: offset.left,
-    top: offset.top,
-    width: width,
-    height: height
-  });
-
-  $ghost.css({
-    position: 'static', // or relative if it was non-static before
-    width: '100%',
-    height: '100%',
-    left: '',
-    top: '',
-    right: '',
-    bottom: '',
-    color: 'red',
-    backgroundColor: 'rgba(255,255,255,0.4)'
-  });
-
-  $wrapper.insertBefore($box);
-
-  var diff = $ghost.offset().top - $box.offset().top;
-
-  $('.output').text(
-    $wrapper.offset().top + " / " +
-    $ghost.offset().top + " / " +
-    $box.offset().top + " / " +
-    "D=" + diff
-  );
-
-  $wrapper.css({
-    top: parseInt($wrapper.css('top')) - diff
-  });
-
-  // alert($wrapper.css('top'));
-
-});
-

data/design/homepage.txt

@@ -1,236 +0,0 @@
-
-
-
-  PROGRESSIVE ENHANCEMENT, RELOADED
-  
-  
-  
-  Demo
-  
-    Update a page fragment via AJAX
-
-
-
-    Animate a page transition
-
-
-
-    Open a link in a modal dialog
-
-
-
-    Custom HTML tags
-  
-  Batteries included
-  
-    We will ship a basic implementation for the most established
-    UI patterns like navigation bars, infinite scrolling,
-    drop-down menus, modals dialogs, etc.
-    
-  Plays nice with existing JavaScript
-  
-    Convert to up.compiler directives.
-  
-  Plays nice with existing styles
-  
-    Unoppinionated about style
-    Bootstrap users can include `up-bootstrap`.
-  
-  Plays nice with existing JS code
-
-    You can wire your existing JS code into the Unpoly page flow.
-
-  URLs are important
-  
-    In Unpoly every page or screen state has a URL which you can
-    bookmark and share. This also means you get all the SEO love from Google.
-
-  Server-side code should stay the same
-  
-    (Rewrite)
-
-  Lightweight
-  
-    Unpoly is 13 KB gzipped.
-    The only dependency is jQuery.
-
-  Both UJS and programmatic interfaces
-    
-    All Unpoly functionality is available as both unobtrusive behavior
-    (through HTML attributes like up-target) and JavaScript functions
-    for programmatic access and integration with your code.  
-  
-  
-
-
-
-
-
-
-
-
-
-.example
-  .example__column
-    .example__title
-      page.html
-    .example__asset
-      <%= ... %>
-  .example__column
-    .example__title
-      Demo
-    iframe.example__demo
-      
-    
-  
-
-
-
-Update a page fragment via AJAX:
-
-    <div class="story">
-      Story summary.
-      
-      <a href="full.html" up-target=".story">
-        Read full story
-      </a>
-    </div>
-    
-Animate a page transition:
-
-    <a href="/page/2" up-follow up-transition="move-right">Next page</a>
-
-    <div class="story">
-      Story summary.
-      
-      <a href="/stories/443/full" up-target=".story" up-transition="cross-fade">
-        Read full story
-      </a>
-    </div>
-
-    
-Infinite pagination:
-
-    <div class="stories">
-      <a href="/stories/1">Foo</a>
-      <a href="/stories/2">Bar</a>
-      <a href="/stories/3">Baz</a>
-    </div>
-
-    <a href="/pages/2" class="load-more" up-target=".stories:after, .load-more">
-      Load more
-    </a>
-    
-Open a link in a modal dialog:
-
-    <a href="/login" up-modal=".content">
-      Log in to continue
-    </a>
-    
-    
-    
-Custom tag:
-
-
-
-/examples/timestamp-tag/
-
-  page.html
-
-    <p>
-      The time is <timestamp />
-    </p>
-    
-  scripts.js
-    
-    up.compiler('timestamp', function($element) {
-      now = new Date();
-      $element.text(now);
-    });
-    
-    
-
-
-/examples/clock-tag/
-
-  page.html
-
-    <clock />
-    
-  scripts.js
-
-    up.compiler('clock', function($element) {
-
-      function update() {
-        var now = new Date();
-        $element.text(now);
-      }
-
-      setInterval(update, 1000);
-
-      return function() { clearInterval(update) };
-
-    });
-
-
-
-
-/examples/transition
-
-  story1.html
-  
-    <div class="story">
-
-      <h1>The first story</h1>
-
-      <a href="story2.html" up-transition="move-left">
-        Show next story
-      </a>
-    </div>  
-  
-  story2.html
-
-    <div class="story">
-    
-      <h1>The second story</h1>
-    
-      <a href="story1.html" up-transition="move-right">
-        Show previous story
-      </a>
-    </div>
-
-
-
-
-
-
-
-
-/examples/transition
-
-  summary.html
-  
-    <div class="story">
-      Story summary.
-      
-      <a href="full" up-target=".story" up-transition="cross-fade">
-        Read full story
-      </a>
-    </div>  
-  
-  full.html
-
-    <div class="story">
-      Full story here
-
-      <a href="summary" up-target=".story" up-transition="cross-fade">
-        Show summary
-      </a>
-    </div>
-    
-
-
-
-Example:
-
-  

data/design/ie11.txt

@@ -1,9 +0,0 @@
-Code we can remove once we drop IE11
-====================================
-
-- up.util.assign => Object.assign
-- up.util.toArray => Array.from
-- up.element.toggleClass can just be classList.toggleClass
-- we can switch to Babel without requiring Polyfills
-- we might want to parse URLs faster with URL
-

data/design/measure_import_node.js

@@ -1,330 +0,0 @@
-ITERATIONS = 5000;
-CHUNK_SIZE = 10;
-
-HTML = "<body>" + document.body.innerHTML + "</body>";
-
-QUEUE = [];
-
-function pokeQueue() {
-  var job;
-  if (job = QUEUE.shift()) {
-    job();
-    setTimeout(pokeQueue, 15);
-  }
-}
-
-function queue(fn) {
-  QUEUE.push(fn);
-}
-
-
-ESCAPE_HTML_ENTITY_MAP = {
-  "&": "&amp;",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': '&quot;'
-};
-
-/***
-Escapes the given string of HTML by replacing control chars with their HTML entities.
-
-@function up.util.escapeHtml
-@param {string} string
-  The text that should be escaped
-@experimental
- */
-escapeHtml = function(string) {
-  return string.replace(/[&<>"]/g, function(char) {
-    return ESCAPE_HTML_ENTITY_MAP[char];
-  });
-};
-
-
-
-function experiment(name, fn) {
-  performance.clearMarks();
-  performance.clearMeasures();
-
-  queue(function() {
-    // warm-up
-    for (var i = 0; i < 100; i++) {
-      fn();
-    }
-  })
-
-  var chunkCount = Math.floor(ITERATIONS / CHUNK_SIZE);
-
-  for (var i = 0; i < chunkCount; i++) {
-    queue(function() {
-      performance.mark(name + "-start");
-      for (var j = 0; j < CHUNK_SIZE; j++) {
-        fn();
-      }
-      performance.mark(name + "-end");
-      performance.measure(name, name + "-start", name + "-end");
-    })
-  }
-
-  queue(function() {
-    var entries = performance.getEntriesByName(name);
-    var durations = entries.map(function (e) {
-      return e.duration
-    });
-
-    var outlyerLength = Math.floor(chunkCount * 0.01);
-
-    durations = durations.slice(outlyerLength, durations.length - outlyerLength);
-
-    durations.sort(function (a, b,) {
-      return a - b
-    });
-
-    var times = {
-      minimum: durations[0],
-      maximum: durations[durations.length - 1],
-      median: durations[Math.floor(durations.length / 2)],
-      total: durations.reduce(function (total, num) {
-        return total + num
-      }),
-      setSize: durations.length
-    }
-
-    console.debug("Experiment %s: %o", name, times);
-  })
-}
-
-
-fixScripts = function(element) {
-  var fix, fixes, i, len, results;
-  fixes = [];
-  detectScriptFixes(element, fixes);
-  for (i = 0, len = fixes.length; i < len; i++) {
-    fix = fixes[i];
-    fix();
-  }
-};
-
-detectScriptFixes = function(element, fixes) {
-  var child, clone, i, len, ref, results;
-  if (element.tagName === 'NOSCRIPT') {
-    clone = document.createElement('noscript');
-    clone.textContent = element.innerHTML;
-    return fixes.push(function() {
-      return element.parentNode.replaceChild(clone, element);
-    });
-  } else if (element.tagName === 'SCRIPT') {
-    return fixes.push(function() {
-      return element.parentNode.removeChild(element);
-    });
-  } else {
-    ref = element.children;
-    results = [];
-    for (i = 0, len = ref.length; i < len; i++) {
-      child = ref[i];
-      results.push(detectScriptFixes(child, fixes));
-    }
-    return results;
-  }
-};
-
-function removeScripts(doc) {
-  doc.querySelectorAll('script').forEach(function(e) { e.remove() })
-}
-
-
-
-
-
-
-
-domParser = new DOMParser();
-
-
-experiment('PlainDOMParser', function() {
-  var doc = domParser.parseFromString(HTML, "text/html");
-  var body = doc.querySelector('body');
-  if (!body) {
-    throw "parsing failed";
-  }
-});
-
-experiment('CreateHTMLDocument', function() {
-  var doc = document.implementation.createHTMLDocument('')
-  doc.documentElement.innerHTML = HTML;
-  var body = doc.querySelector('body');
-  if (!body) {
-    throw "parsing failed";
-  }
-});
-
-
-
-/*
-experiment('DOMParserWithFixScripts', function() {
-  var doc = domParser.parseFromString(HTML, "text/html");
-  var body = doc.querySelector('body');
-  if (!body) {
-    throw "parsing failed";
-  }
-  fixScripts(body);
-});
-*/
-
-
-/*
-experiment('DOMParserWithImport', function() {
-  var doc = domParser.parseFromString(HTML, "text/html");
-  var body = doc.querySelector('body');
-  if (!body) {
-    throw "no body in imported";
-  }
-  var importedNode = document.importNode(body, true);
-});
-*/
-
-/*
-var noScriptPattern = /<noscript[^>]*>(.*?)<\/noscript>/i
-
-experiment('DOMParserWitSmartFixScripts', function() {
-  var requiresNoscriptFix = true;
-
-  var html = HTML;
-
-  if (requiresNoscriptFix) {
-    html = html.replace(noScriptPattern, function (match, content) {
-      return '<div class="up-noscript" data-html="' + escapeHtml(content) + '"></div>'
-    })
-  }
-
-  var doc = domParser.parseFromString(html, "text/html");
-
-  var body = doc.querySelector('body');
-  if (!body) {
-    throw "no body in imported";
-  }
-  removeScripts(body);
-
-  if (requiresNoscriptFix) {
-    var noscripts = body.querySelectorAll('.up-noscript');
-    noscripts.forEach(function(noscript) {
-      var html = noscript.getAttribute('data-html');
-      noscript.outerHTML = html;
-    })
-  }
-});
-
-
-
-
-
-
-experiment('DOMParserWithImportAndFixScripts', function() {
-  var doc = domParser.parseFromString(HTML, "text/html");
-  var body = doc.querySelector('body');
-  if (!body) {
-    throw "no body in imported";
-  }
-  var importedNode = document.importNode(body, true);
-  fixScripts(importedNode);
-});
-
-
-
-
-
-var noScriptPattern = /<noscript[^>]*>(.*?)<\/noscript>/i
-// var customElementPattern = /<[^!\->\s\/]+\-/;
-var customElementPattern = /<\w+-\w+/;
-
-experiment('DOMParserWithOnDemandImportAndFixScript', function() {
-  var requiresNoscriptFix = true;
-
-  var html = HTML;
-
-  if (requiresNoscriptFix) {
-    html = html.replace(noScriptPattern, function (match, content) {
-      return '<div class="up-noscript" data-html="' + escapeHtml(content) + '"></div>'
-    })
-  }
-
-  var doc = domParser.parseFromString(html, "text/html");
-
-  var body = doc.querySelector('body');
-  if (!body) {
-    throw "no body in imported";
-  }
-
-  var importedNode;
-
-  if (customElementPattern.test(html)) {
-    console.debug("importing because found custom element: ", customElementPattern.exec(html));
-    importedNode = document.importNode(body, true);
-  } else {
-    importedNode = body;
-  }
-
-  // removeScripts(importedNode);
-
-  if (requiresNoscriptFix) {
-    var noscripts = importedNode.querySelectorAll('.up-noscript');
-    noscripts.forEach(function(noscript) {
-      var html = noscript.getAttribute('data-html');
-      noscript.outerHTML = html;
-    })
-  }
-});
-
-
-
-experiment('DocumentFragmentInnerHTMLWithRemoveScripts', function() {
-
-  var doc = document.createDocumentFragment();
-  var htmlNode = document.createElement('html');
-  doc.appendChild(htmlNode);
-
-  htmlNode.innerHTML = HTML;
-  
-  var body = doc.querySelector('body');
-  if (!body) {
-    throw "no body in imported";
-  }
-  
-  removeScripts(body);
-});
-
-
-var htmlPattern = /<html[^>]*>(.*?)<\/html>/i;
-var bodyPattern = /<body[^>]*>/i;
-
-
-experiment('SmartInnerHTMLWithRemoveScripts', function() {
-
-  var doc = undefined;
-  
-  if (match = htmlPattern.exec(HTML)) {
-    var htmlNode = document.createElement('html');
-    htmlNode.innerHTML = match[1];
-    doc = htmlNode;
-    
-  } else if (bodyPattern.test(HTML)) {
-    var htmlNode = document.createElement('html');
-    htmlNode.innerHTML = HTML;
-    doc = htmlNode;
-  } else {
-    var divNode = document.createElement('div');
-    divNode.innerHTML = HTML;
-    doc = divNode;
-  }
-  
-  var body = doc.querySelector('body');
-  if (!body) {
-    throw "no body in imported";
-  }
-  
-  removeScripts(body);
-  
-});
-*/
-
-
-pokeQueue();