unpoly-rails 0.20.0

data/design/draft.html.erb

@@ -0,0 +1,48 @@
+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

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

data/design/ghost-debugging.txt

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,236 @@
+
+
+
+  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/dist/unpoly-bootstrap3.css

@@ -0,0 +1,5 @@
+.up-modal-dialog {
+  display: block; }
+
+.up-modal-content {
+  padding: 0; }

data/dist/unpoly-bootstrap3.js

@@ -0,0 +1,28 @@
+(function() {
+  up.form.config.validateTargets.unshift('.form-group:has(&)');
+
+}).call(this);
+(function() {
+  up.layout.config.fixedTop.push('.navbar-fixed-top');
+
+  up.layout.config.fixedBottom.push('.navbar-fixed-bottom');
+
+  up.layout.config.anchoredRight.push('.navbar-fixed-top');
+
+  up.layout.config.anchoredRight.push('.navbar-fixed-bottom');
+
+  up.layout.config.anchoredRight.push('.footer');
+
+}).call(this);
+(function() {
+  up.modal.config.template = "<div class=\"up-modal\">\n  <div class=\"up-modal-dialog modal-dialog\">\n    <div class=\"up-modal-content modal-content\"></div>\n  </div>\n</div>";
+
+}).call(this);
+(function() {
+  up.navigation.config.currentClasses.push('active');
+
+}).call(this);
+(function() {
+
+
+}).call(this);