unpoly-rails 1.0.3 → 2.0.0.pre.rc2

data/design/animation-ghosting.txt

@@ -1,72 +0,0 @@
-animate($element)
-
-  gar nix, ghosting macht NUR transition
-  
-  ($old und $new muss anders gehandelt werden)
-
-transition($old, $new)
-
-  1. $old.css(display: none)
-  
-  2. $new in den DOM setzen
-  
-  3. $new ausmessen
-  
-  4. ghost von $new erstellen
-     DOM kopieren
-     mit position: fixed
-     mit ausmessen des originals
-       left, top setzen
-       right, bottom löschen
-       width, height setzen
-       margin löschen
-
-  5. $new.css(display: none)
-  
-  6. $old.css(display: previousDisplay)
-        
-  7. ghost von $old erstellen
-  
-  8. $old.css(opacity: 0) // damit es den platz wegnimmt
-          
-  9. transition($oldGhost, $newGhost)
-  
-  10. $old löschen
-      $oldGhost löschen
-      $newGhost löschen
-  
-  11. $new.css(display: previousDisplay)
-  
-  
-was löst das, was nicht?
-========================
-
-- die teile müssen nicht mehr absolut gestellt werden
-- old muss immer noch absolut gehen :(
- 
-
-  
-    
-
-
-
-  1. Ich kopiere $old zu $ghost
-
-  2. Ich setze die opacity von $old auf 0
-
-  3. Ich setze $ghost auf die Größe von $old
-    mit position: fixed
-    mit ausmessen des originals
-      left, top setzen
-      right, bottom löschen
-      width, height setzen
-      margin löschen
-      
-  ???????????
-
-  4. ich gebe $ghost an die animation
-
-  5. nach der animation
-    setze ich $opacity von $element auf 1
-    lösche ich $ghost
-

data/design/design.txt

@@ -1,34 +0,0 @@
-Gedanke 1
----------
-- Immer die ganze Seite rendern ist langsam
-  - Optimierung nicht möglich: Layout überspringen wenn up-Request
-  - Optimierung nicht möglich: Manche Bereiche nicht rendern wenn up-Request
-  - Optimierung nicht möglich: Manche Bereiche nur für bestimmte X-Up-Selectors rendern
-- Das alles nur, um beim Back-Button sofort das HTML anzeigen zu können?
-- Sogar Turbolinks macht das nur Opt-In
-- Ich kann genauso gut bei popstate den aktuellen State replacen
-- Später: Opportunistisch cachen. Wann immer ich einen vollen Page-Load (mit/ohne Layout) sehe => cachen
-
-Gedanke 2
----------
-- Das mit dem up.app und up.page checkt kein Mensch
-- In der Praxis wird es so sein, dass wichtige page-Handler nicht mehr in der Seite stehen
-- Ich brauche auch noch Code, um <script>-Tags auszuführen
-- Die Unterscheidung mache ich ja nur, um installierte Callbacks wieder wegzuräumen
-- Was ich eigentlich bräuchte, wäre ein Weg, installierte Callbacks geregelt lozuwerden
-
-     z. B.
-
-     up.compiler('.note_form', function($element) {
-
-      var timer = setTimeout(...)
-
-      function uninstall() {
-        clearInterval(timer);
-      }
-
-      return uninstall;
-
-     });
-
-- Vor dem Ersetzen eines Elements kann ich dann die uninstall-Funktion aufrufen.

data/design/draft.html.erb

@@ -1,48 +0,0 @@
-GUT:
-
-<a href="/terms" up-modal=".main" up-modal-style="right">
-
-<a href="/terms" up-on-click="up.modal.open(this, '.main', { style: 'right' })">
-
-<a href="/terms" onclick="up.modal.open(this, '.main', { style: 'right' }); return false">
-
-
-WEIRD:
-
-<a href="/terms" up-target=".main" up-presentation="modal/right">
-
-<a href="/terms" up-target=".main" up-modal up-modal-presentation="right">
-
-<a href="/terms" up-target="@modal(.main)" up-presentation="modal/right">
-
-
-
-<a href="/sites" up-popup=".main" up-popup-anchor="bottom" up-history="push">
-
-
-<!-- cards/edit.html.erb -->
-
-<%= form_for @card do |form| %>
-
-  = form.label :title
-  = form.text_field :title
-
-  <div class="modifiers">
-    ....
-    <%= link_to 'Edit modifiers', edit_card_meta_path(@card), 'up-modal' => '.meta_form' %>
-  </div>
-
-<% end %>
-
-
-<!-- cards/meta/edit.html.erb -->
-
-<%= form_for @card, html: { class: 'meta_form', 'up-target' => '.modifiers' } do |form| %>
-
-   ...
-
-<% end %>
-
-
-
-<a href="close" up-close-modal>X</a>

data/design/draft.rb

@@ -1,9 +0,0 @@
-
-
-
-
-
-
-
-
-<a href="/terms" up-modal=".main">

data/design/es6.js

@@ -1,32 +0,0 @@
-// note we can also import/export in CS2
-
-// fragment.js
-
-function replace() {
-}
-
-function extract()  {
-}
-
-function three() {
-}
-
-export default { one, two }
-
-
-
-// unpoly.js
-
-import fragment from './fragment'
-import modal from './modal'
-import form from './form'
-
-up = { fragment, modal, form }
-
-// Add shorthand functions
-up.replace = up.fragment.replace
-up.submit = up.form.submit
-
-window.up = up
-
-export default up

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
-