red 4.1.0 → 4.1.1

data/lib/source/redshift/selectors.rb

@@ -0,0 +1,374 @@
+require 'browser'
+
+`
+Array.fromCollection = function(collection){
+  for (var i = 0, a = [], j = collection.length; i < j; i++){
+     a.push($E(collection[i]))
+   }
+   return a
+};
+// used in several places where element/selector comparison is used
+// tells whether an element matches another element or selector
+Element.prototype.match = function(selector){
+  if (!selector) return true;
+  var tagid = Selectors.Utils.parseTagAndID(selector);
+  var tag = tagid[0], id = tagid[1];
+  if (!Selectors.Filters.byID(this, id) || !Selectors.Filters.byTag(this, tag)) return false;
+  var parsed = Selectors.Utils.parseSelector(selector);
+  return (parsed) ? Selectors.Utils.filter(this, parsed, {}) : true;
+};
+
+// Provides polymorphic access to getElementById to Elements as well as documents, both of which
+// can be passed into Selectors.Utils.search as location for searching for subelements.
+Element.prototype.getElementById = function(id, nocash){
+  var el = this.ownerDocument.getElementById(id);
+  if (!el) return null;
+  for (var parent = el.parentNode; parent != this; parent = parent.parentNode){
+    if (!parent) return null;
+  }
+  return $E(el);
+},
+
+Element.Attributes = {
+  Props: {'html': 'innerHTML', 'class': 'className', 'for': 'htmlFor', 'text': (#{trident?}) ? 'innerText' : 'textContent'},
+  Bools: ['compact', 'nowrap', 'ismap', 'declare', 'noshade', 'checked', 'disabled', 'readonly', 'multiple', 'selected', 'noresize', 'defer'],
+  Camels: ['value', 'accessKey', 'cellPadding', 'cellSpacing', 'colSpan', 'frameBorder', 'maxLength', 'readOnly', 'rowSpan', 'tabIndex', 'useMap']
+};
+
+Element.prototype.getProperty = function(attribute){
+  var EA = Element.Attributes, key = EA.Props[attribute];
+  var value = (key) ? this[key] : this.getAttribute(attribute, 2);
+  return (EA.Bools[attribute]) ? !!value : (key) ? value : value || null;
+},
+
+String.prototype.contains = function(string, separator){
+  return (separator) ? (separator + this + separator).indexOf(separator + string + separator) > -1 : this.indexOf(string) > -1;
+};
+
+String.prototype.trim = function(){
+  return this.replace(/^\s+|\s+$/g, '');
+};
+
+var Selectors = {Cache: {nth: {}, parsed: {}}};
+
+Selectors.RegExps = {
+  id: (/#([\\w-]+)/),
+  tag: (/^(\\w+|\\*)/),
+  quick: (/^(\\w+|\\*)$/),
+  splitter: (/\\s*([+>~\\s])\\s*([a-zA-Z#.*:\\[])/g),
+  combined: (/\\.([\\w-]+)|\\[(\\w+)(?:([!*^$~|]?=)(["']?)([^\\4]*?)\\4)?\\]|:([\\w-]+)(?:\\(["']?(.*?)?["']?\\)|$)/g)
+};
+
+Selectors.Utils = {
+  // added to replace $uid
+  // uses internal Red.id
+  object_uid: function(item){
+    return item.__id__||(item.__id__=Red.id++)
+  },
+  
+  chk: function(item, uniques){
+    if (!uniques) return true;
+    var uid = Selectors.Utils.object_uid(item);
+    if (!uniques[uid]) return uniques[uid] = true;
+    return false;
+  },
+    
+  parseNthArgument: function(argument){
+    if (Selectors.Cache.nth[argument]) return Selectors.Cache.nth[argument];
+    var parsed = argument.match(/^([+-]?\\d*)?([a-z]+)?([+-]?\\d*)?$/);
+    if (!parsed) return false;
+    var inta = parseInt(parsed[1]);
+    var a = (inta || inta === 0) ? inta : 1;
+    var special = parsed[2] || false;
+    var b = parseInt(parsed[3]) || 0;
+    if (a != 0){
+      b--;
+      while (b < 1) b += a;
+      while (b >= a) b -= a;
+    } else {
+      a = b;
+      special = 'index';
+    }
+    switch (special){
+      case 'n': parsed = {a: a, b: b, special: 'n'}; break;
+      case 'odd': parsed = {a: 2, b: 0, special: 'n'}; break;
+      case 'even': parsed = {a: 2, b: 1, special: 'n'}; break;
+      case 'first': parsed = {a: 0, special: 'index'}; break;
+      case 'last': parsed = {special: 'last-child'}; break;
+      case 'only': parsed = {special: 'only-child'}; break;
+      default: parsed = {a: (a - 1), special: 'index'};
+    }
+    
+    return Selectors.Cache.nth[argument] = parsed;
+  },
+  
+  parseSelector: function(selector){
+    if (Selectors.Cache.parsed[selector]) return Selectors.Cache.parsed[selector];
+    var m, parsed = {classes: [], pseudos: [], attributes: []};
+    while ((m = Selectors.RegExps.combined.exec(selector))){
+      var cn = m[1], an = m[2], ao = m[3], av = m[5], pn = m[6], pa = m[7];
+      if (cn){
+        parsed.classes.push(cn);
+      } else if (pn){
+        var parser = Selectors.Pseudo[pn];
+        
+        if (parser) parsed.pseudos.push({parser: parser, argument: pa});
+        else parsed.attributes.push({name: pn, operator: '=', value: pa});
+      } else if (an){
+        parsed.attributes.push({name: an, operator: ao, value: av});
+      }
+    }
+    if (!parsed.classes.length) delete parsed.classes;
+    if (!parsed.attributes.length) delete parsed.attributes;
+    if (!parsed.pseudos.length) delete parsed.pseudos;
+    if (!parsed.classes && !parsed.attributes && !parsed.pseudos) parsed = null;
+    return Selectors.Cache.parsed[selector] = parsed;
+  },
+  
+  parseTagAndID: function(selector){
+    var tag = selector.match(Selectors.RegExps.tag);
+    var id = selector.match(Selectors.RegExps.id);
+    return [(tag) ? tag[1] : '*', (id) ? id[1] : false];
+  },
+  
+  filter: function(item, parsed, local){
+    var i;
+    if (parsed.classes){
+      for (i = parsed.classes.length; i--; i){
+        var cn = parsed.classes[i];
+        if (!Selectors.Filters.byClass(item, cn)) return false;
+      }
+    }
+    if (parsed.attributes){
+      for (i = parsed.attributes.length; i--; i){
+        var att = parsed.attributes[i];
+        if (!Selectors.Filters.byAttribute(item, att.name, att.operator, att.value)) return false;
+      }
+    }
+    if (parsed.pseudos){
+      for (i = parsed.pseudos.length; i--; i){
+        var psd = parsed.pseudos[i];
+        if (!Selectors.Filters.byPseudo(item, psd.parser, psd.argument, local)) return false;
+      }
+    }
+    return true;
+  },
+  
+  getByTagAndID: function(ctx, tag, id){
+    if (id){
+      var item = (ctx.getElementById) ? ctx.getElementById(id, true) : Element.getElementById(ctx, id, true);
+      return (item && Selectors.Filters.byTag(item, tag)) ? [item] : [];
+    } else {
+      return ctx.getElementsByTagName(tag);
+    }
+  },
+  
+  search: function(self, expression, local){
+    var splitters = [];
+    
+    var selectors = expression.trim().replace(Selectors.RegExps.splitter, function(m0, m1, m2){
+      splitters.push(m1);
+      return ':)' + m2;
+    }).split(':)');
+    
+    
+    var items, filtered, item;
+    for (var i = 0, l = selectors.length; i < l; i++){
+      var selector = selectors[i];
+      
+      if (i == 0 && Selectors.RegExps.quick.test(selector)){
+        items = self.getElementsByTagName(selector);
+        continue;
+      }
+            
+      var splitter = splitters[i - 1];
+      
+      var tagid = Selectors.Utils.parseTagAndID(selector);
+      var tag = tagid[0], id = tagid[1];
+      if (i == 0){
+        items = Selectors.Utils.getByTagAndID(self, tag, id);
+      } else {
+        var uniques = {}, found = [];
+        for (var j = 0, k = items.length; j < k; j++) found = Selectors.Getters[splitter](found, items[j], tag, id, uniques);
+        items = found;
+      }
+            
+      var parsed = Selectors.Utils.parseSelector(selector);
+      if (parsed){
+        filtered = [];
+        for (var m = 0, n = items.length; m < n; m++){
+          item = items[m];
+          if (Selectors.Utils.filter(item, parsed, local)) filtered.push(item);
+        }
+        items = filtered;
+      }
+      
+    }
+    return items;
+    
+  }
+  
+};
+
+Selectors.Getters = {
+  
+  ' ': function(found, self, tag, id, uniques){
+    var items = Selectors.Utils.getByTagAndID(self, tag, id);
+    for (var i = 0, l = items.length; i < l; i++){
+      var item = items[i];
+      if (Selectors.Utils.chk(item, uniques)) found.push(item);
+    }
+    return found;
+  },
+  
+  '>': function(found, self, tag, id, uniques){
+    var children = Selectors.Utils.getByTagAndID(self, tag, id);
+    for (var i = 0, l = children.length; i < l; i++){
+      var child = children[i];
+      if (child.parentNode == self && Selectors.Utils.chk(child, uniques)) found.push(child);
+    }
+    return found;
+  },
+  
+  '+': function(found, self, tag, id, uniques){
+    while ((self = self.nextSibling)){
+      if (self.nodeType == 1){
+        if (Selectors.Utils.chk(self, uniques) && Selectors.Filters.byTag(self, tag) && Selectors.Filters.byID(self, id)) found.push(self);
+        break;
+      }
+    }
+    return found;
+  },
+  
+  '~': function(found, self, tag, id, uniques){
+    
+    while ((self = self.nextSibling)){
+      if (self.nodeType == 1){
+        if (!Selectors.Utils.chk(self, uniques)) break;
+        if (Selectors.Filters.byTag(self, tag) && Selectors.Filters.byID(self, id)) found.push(self);
+      } 
+    }
+    return found;
+  }
+  
+};
+
+Selectors.Filters = {
+  
+  byTag: function(self, tag){
+    return (tag == '*' || (self.tagName && self.tagName.toLowerCase() == tag));
+  },
+  
+  byID: function(self, id){
+    return (!id || (self.id && self.id == id));
+  },
+  
+  byClass: function(self, klass){
+    return (self.className && self.className.contains(klass, ' '));
+  },
+  
+  byPseudo: function(self, parser, argument, local){
+    return parser.call(self, argument, local);
+  },
+  
+  byAttribute: function(self, name, operator, value){
+    var result = Element.prototype.getProperty.call(self, name);
+    if (!result) return false;
+    if (!operator || value == undefined) return true;
+    switch (operator){
+      case '=': return (result == value);
+      case '*=': return (result.contains(value));
+      case '^=': return (result.substr(0, value.length) == value);
+      case '$=': return (result.substr(result.length - value.length) == value);
+      case '!=': return (result != value);
+      case '~=': return result.contains(value, ' ');
+      case '|=': return result.contains(value, '-');
+    }
+    return false;
+  }
+  
+};
+
+Selectors.Pseudo = {
+  
+  // w3c pseudo selectors
+  
+  empty: function(){
+    return !(this.innerText || this.textContent || '').length;
+  },
+  
+  not: function(selector){
+    return !Element.match(this, selector);
+  },
+  
+  contains: function(text){
+    return (this.innerText || this.textContent || '').contains(text);
+  },
+  
+  'first-child': function(){
+    return Selectors.Pseudo.index.call(this, 0);
+  },
+  
+  'last-child': function(){
+    var element = this;
+    while ((element = element.nextSibling)){
+      if (element.nodeType == 1) return false;
+    }
+    return true;
+  },
+  
+  'only-child': function(){
+    var prev = this;
+    while ((prev = prev.previousSibling)){
+      if (prev.nodeType == 1) return false;
+    }
+    var next = this;
+    while ((next = next.nextSibling)){
+      if (next.nodeType == 1) return false;
+    }
+    return true;
+  },
+  
+  'nth-child': function(argument, local){
+    argument = (argument == undefined) ? 'n' : argument;
+    var parsed = Selectors.Utils.parseNthArgument(argument);
+    if (parsed.special != 'n') return Selectors.Pseudo[parsed.special].call(this, parsed.a, local);
+    var count = 0;
+    local.positions = local.positions || {};
+    var uid = Selectors.Utils.object_uid(this);
+    if (!local.positions[uid]){
+      var self = this;
+      while ((self = self.previousSibling)){        
+        if (self.nodeType != 1) continue;
+        count ++;
+        var position = local.positions[Selectors.Utils.object_uid(self)];
+        if (position != undefined){
+          count = position + count;
+          break;
+        }
+      }
+      local.positions[uid] = count;
+    }
+    return (local.positions[uid] % parsed.a == parsed.b);
+  },
+  
+  // custom pseudo selectors
+  
+  index: function(index){
+    var element = this, count = 0;
+    while ((element = element.previousSibling)){
+      if (element.nodeType == 1 && ++count > index) return false;
+    }
+    return (count == index);
+  },
+  
+  even: function(argument, local){
+    return Selectors.Pseudo['nth-child'].call(this, '2n+1', local);
+  },
+
+  odd: function(argument, local){
+    return Selectors.Pseudo['nth-child'].call(this, '2n', local);
+  }
+  
+};
+`

data/lib/source/redshift/situated.rb

@@ -0,0 +1,328 @@
+require 'element'
+require 'window'
+
+# Classes mixing in <tt>Situated</tt> and its submodules gain the ability
+# to provide locational and dimensional data about their visual DOM 
+# representation within the browser.
+#
+module Situated
+  `window.styleString=function(el,prop){if(el.currentStyle){return el.currentStyle[prop.replace(/[_-]\\D/g, function(match){return match.charAt(1).toUpperCase();})];};var computed=document.defaultView.getComputedStyle(el,null);return(computed?computed.getPropertyValue([prop.replace(/[A-Z]/g, function(match){return('-'+match.charAt(0).toLowerCase());})]):null);}`
+  module PositionAndSize
+    
+    # call-seq:
+    #   situated.height -> integer
+    # returns the height of the _situated_ in pixels as an integer.
+    # height is the amount of vertical space the content requires
+    # plus top padding, bottom padding, top border, and bottom border, if any
+    #
+    #
+    # For example,
+    # situated = Document['#situated']
+    # where _situated_ is an element whose content is 200px tall 
+    # with a top padding of 20px, bottom padding of 10px
+    # and a top border of 1px
+    # 
+    # situated.height #=> 231 (200 + 20 + 10 + 1)
+    #
+    def height
+      self.size[:y]
+    end
+    
+    # call-seq:
+    #   situated.width -> integer
+    # returns the width of the _situated_ in pixels as an integer 
+    # width is the amount of horizontal space the content requires
+    # plus left padding, right padding, left border, and right border, if any
+    #
+    # For example,
+    # situated = Document['#situated']
+    # where _situated_ is an element whose content is 200px wide 
+    # with a left padding of 20px, right padding of 10px
+    # and a left border of 1px
+    # 
+    # situated.width #=> 231 (200 + 20 + 10 + 1)
+    #
+    def width
+      self.size[:x]
+    end
+    
+    def scroll_top
+      self.scroll[:y]
+    end
+    
+    def scroll_left
+      self.scroll[:x]
+    end
+    
+    def scroll_height
+      self.scroll_size[:y]
+    end
+    
+    def scroll_width
+      self.scroll_size[:x]
+    end
+    
+    def top
+      self.position[:x]
+    end
+    
+    def left
+      self.position[:y]
+    end
+  end
+  
+  module Element
+    include PositionAndSize
+    
+    def size
+      return self.window.size if self.is_body?
+      return {:x => `#{self}.__native__.offsetWidth`, :y => `#{self}.__native__.offsetHeight`}
+    end
+    
+    # call-seq:
+    #   situated.scroll -> hash
+    # returns a hash containing keys <tt>:x<tt> and <tt>:y<tt> representing the 
+    # the distance that a _situated_ has been scrolled
+    # originating at the top left corner of the _situated_
+    # 
+    # For example if a _situated_ has been scrolled 10px left and 5px down
+    # situated.scroll #=> {:x => 10, :y => 5}
+    def scroll
+      return self.window.scroll if self.is_body? 
+      return {:x => `#{self}.__native__.scrollLeft`, :y => `#{self}.__native__.scrollTop`}
+    end
+    
+    def scrolls
+      `var element = this.__native__, position = {x : 0, y : 0};
+      while (element && !c$Situated.c$Utilities.m$is_body_bool(element)){
+        position.x += element.scrollLeft;
+        position.y += element.scrollTop;
+        element = element.parentNode;
+      }`
+      return {:x => `position.x`, :y => `position.y`}
+    end
+    
+    # call-seq:
+    #   situated.scroll_size -> hash
+    # returns a hash containing keys <tt>:x<tt> and <tt>:y<tt> representing the 
+    # the size that a _situated_ included potential scrollable area.
+    #
+    # For example if a _situated_ has been a visible width of 100px and visible height of 50px
+    # and 100 additional pixels of horizontal unseen content that can be scrolled to uncover
+    #  
+    # situated.scroll_size #=> {:x => 200, :y => 50}
+    #
+    def scroll_size
+      return self.window.scroll_size if self.is_body?
+      return {:x => `#{self}.__native__.scrollWidth`, :y => `#{self}.__native__.scrollHeight`}
+    end
+    
+    # call-seq:
+    #   situated.scroll_to(x,y) -> situated
+    # 
+    # Scrolls the _situated_ to the position referenced by the coordinates <tt>x</tt> and <tt>y</tt>
+    # which are pixel dimensions measured from the top left corner of hte _situated_
+    #
+    # Will scroll to the limit of one dimension if a cooridnate for that dimension
+    # is larger than the size element
+    #
+    # No scrolling in a direction will occur if scrolling in that direction would have no effect.
+    #
+    # Examples:
+    #
+    # Given a _situated_ that is 200px wide and 500px long and has
+    # only 150px of horizontal dimension visible at any time and 
+    # only 200px of vertical dimension visible at any time
+    #
+    # situated.scroll_to(10,10)
+    # will scroll the visible area 10 pixels from the left and 10pixels from the top
+    # 
+    # scroll.scroll_to(200,0) will scroll the _situated_ to the maximum left scrolling possible
+    # and return the _situated_ to the original height position.
+    #
+    def scroll_to(x,y)
+      if self.is_body?
+        self.window.scroll_to(x, y)
+      else
+        `this.__native__.scrollLeft = x`
+        `this.__native__.scrollTop  = y`
+      end
+      return self
+    end
+    
+    # call-seq:
+    #   situated.offset_parent -> element
+    #
+    # returns the parent element that provides the visual offset from
+    # the top left corner of the viewport
+    # 
+    # This is typically the closest statically position element or <tt>body</tt>
+    def offset_parent
+      element = self
+      return nil if element.is_body?
+      
+      # All engines except trident have a native offsetParent property
+      `var e = #{element}.__native__.offsetParent`
+      return `$E(#{element}.__native__.offsetParent)` unless trident?
+      
+      # For trident we walk the DOM until we have a static positioned element or reach the body
+      while ((element = `$E(#{element}.__native__.parentNode)`) && !element.is_body?) do 
+        return element unless element.styles[:position] == 'static'
+      end
+      
+      return nil
+    end
+    
+    def offsets
+      `var native = this.__native__`
+      if trident?
+        `var bound = native.getBoundingClientRect()`
+        `var html  = this.m$document.__native__.documentElement`
+        return {
+          :x => `bound.left + html.scrollLeft - html.clientLeft`,
+          :y => `bound.top  + html.scrollTop  - html.clientTop`
+        }
+      end
+
+      `var position = {x: 0, y: 0}`
+      return {:x => `position.x`, :y => `position.y`} if self.is_body?
+      `
+      
+      element = native
+      while (element && !c$Situated.c$Utilities.m$is_body_bool(element)){
+        position.x += element.offsetLeft;
+        position.y += element.offsetTop;
+
+        if (#{gecko?}){
+          if (!c$Situated.c$Utilities.m$border_box(element)){
+            position.x += c$Situated.c$Utilities.m$left_border(element);
+            position.y += c$Situated.c$Utilities.m$top_border(element);
+          }
+          var parent = element.parentNode;
+          if (parent && window.styleString(parent, 'overflow') != 'visible'){
+            position.x += c$Situated.c$Utilities.m$left_border(parent);
+            position.y += c$Situated.c$Utilities.m$top_border(parent);
+          }
+        } else if (element != this && #{webkit?}){
+          position.x += c$Situated.c$Utilities.m$left_border(element);
+          position.y += c$Situated.c$Utilities.m$top_border(element);
+        }
+
+        element = element.offsetParent;
+      }
+      
+      if (#{gecko?} && !c$Situated.c$Utilities.m$border_box(native)){
+        position.x -= c$Situated.c$Utilities.m$left_border(native);
+        position.y -= c$Situated.c$Utilities.m$top_border(native);
+      }
+      `
+      return {:x => `position.x`, :y => `position.y`}
+    end
+        
+    def position_at(x,y)
+      native = `this.__native__`
+      h = {:left => x - Situated::Utilities.styleNumber(native, `'margin-left'`), :top => y - Situated::Utilities.styleNumber(native, `'margin-top'`), :position => 'absolute'}
+      self.set_styles(h)
+    end
+    
+    def position(relative_to = nil)
+      # if (isBody(this)) return {x: 0, y: 0};
+      offset = self.offsets
+      scroll = self.scrolls
+      position = {:x => offset[:x] - scroll[:x], :y => offset[:y] - scroll[:y]}
+      relative_position = {:x => 0, :y => 0}
+      # relativePosition = (relative_to && (relative_to = $(relative_to)) ? relative_to.position : {x: 0, y: 0};
+     a = {:x => position[:x] - relative_position[:x], :y => position[:y] - relative_position[:y]}
+    end
+  end
+    
+  module Viewport
+    include PositionAndSize
+    
+    def size
+      win = self.window
+      return {:x => `#{win}.__native__.innerWidth`, :y => `#{win}.__native__.innerHeight`} if (presto? || webkit?)
+      doc = Situated::Utilities.native_compat_element(self)
+      return {:x => `#{doc}.__native__.clientWidth`, :y => `#{doc}.__native__.clientHeight`}
+    end
+    
+    def scroll
+      win = self.window
+      doc = Situated::Utilities.native_compat_element(self)
+      return {:x => `#{win}.__native__.pageXOffset` || `#{doc}.__native__.scrollLeft`, :y => `#{win}.__native__pageYOffset` || `#{doc}.__native__.scrollTop`}
+    end
+    
+    def scroll_size
+      doc = Situated::Utilities.native_compat_element(self)
+      min = self.size
+      return {:x => `Math.max(#{doc}.__native__.scrollWidth, #{min[:x]})`, :y => `Math.max(#{doc}.__native__.scrollHeight,#{ min[:y]})`}
+    end
+    
+    # call-seq:
+    #   viewport.position -> hash
+    # returns the position of the viewport, which is always {:x => 0, :y => 0} 
+    #
+    def position
+      return {:x => 0, :y => 0}
+    end
+    
+    # call-seq:
+    #   viewport.position -> hash
+    # returns the coordinates of the viewport in pixesl as integers 
+    # within a hash with the keys
+    # :top
+    # :left
+    # :bottom
+    # :right
+    # :height
+    # :width
+    #
+    # For example, a _viewport_ that is 500px wide and 800px tall will return
+    # viewport.coordinates
+    # {:top     => 0,
+    #  :left    => 0,
+    #  :bottom  => 800,
+    #  :right   => 500,
+    #  :height  => 800,
+    #  :width   => 500 }
+    #
+    def coordinates
+      size = self.size
+      return {:top => 0, :left => 0, :bottom => size[:y], :right => size[:x], :height => size[:y], :width => size[:x]}
+    end
+  end
+
+  module Utilities
+    def self.is_body?(element)
+      `(/^(?:body|html)$/i).test(element.tagName)`
+    end
+    
+    def self.styleNumber(native_element, style)
+      `parseInt(window.styleString(native_element, style)) || 0`
+    end
+  
+    def self.border_box(element)
+      `window.styleString(element, '-moz-box-sizing') == 'border-box'`
+    end
+
+    def self.top_border(element)
+      `c$Situated.c$Utilities.m$styleNumber(element, 'border-top-width')`
+    end
+
+    def self.left_border(element)
+      `c$Situated.c$Utilities.m$styleNumber(element, 'border-left-width')`
+    end
+    
+    def self.native_compat_element(element)
+      `var doc = #{element.document}.__native__`
+      `$E((!doc.compatMode || doc.compatMode == 'CSS1Compat') ? doc.html : doc.body)`
+    end
+  end
+end
+
+class Element
+  include Situated::Element
+end
+
+Document.extend(Situated::Viewport)
+Window.extend(Situated::Viewport)