polymer-core-rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d8ab38fab2c83f97291656051c8c092f1e05f209
+  data.tar.gz: a10b18a7c53033229d875972202804cd7ef739ec
+SHA512:
+  metadata.gz: 42fc7297fb1ec577553f93de7ae5717df59217f625eefea3223e19238f809940fbfd4439b476b1a202ac985e13c40a248daf686dee8a67d1777bcfd4efbc6070
+  data.tar.gz: d6074a1dbfc640e1aa072c2ef79dafeec1767480f1da1aa14f33cf850db7d5b6686ed1ef9472f48a536e861e213e9d80aa77401b3c40a1c2dd478d956aa87399

data/README.md

@@ -0,0 +1,82 @@
+# PolymerCoreRails
+
+Polymer Core elements are a set of utility elements including general-purpose UI elements (such as icons, layout elements,
+and toolbars), as well as non-UI elements providing features like AJAX, signaling and storage.
+
+Polymer-core-rails gem brings polymer core web components into your Rails project.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'polymer-core-rails'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install polymer-core-rails
+
+## Getting started
+
+In order to use Polymer core elements you need to have
+`polymer` installed in your project. Use [polymer-rails](https://github.com/alchapone/polymer-core-rails) gem for adding `polymer` to your Rails application.
+
+```ruby
+gem 'polymer-rails'
+gem 'polymer-core-rails'
+```
+
+After runnign `bundle install` require needed core elements into your `application.html` manifest file.
+
+    //= require polymer/polymer
+    //= require core-ajax/core-ajax
+    //= require core-input/core-intut
+    .....
+    //= require core-tooltip/core-tooltip
+
+Each component should be required only once. Thus if you've already required component that has dependencies, you don't need
+to explicitly require any of dependencies, otherwise it will raise exception.
+
+## Available elements
+
+* [core-ajax](http://www.polymer-project.org/docs/elements/core-elements.html#core-ajax)
+* [core-animated-pages](http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages)
+* [core-animation](http://www.polymer-project.org/docs/elements/core-elements.html#core-animation)
+* [core-collapse](http://www.polymer-project.org/docs/elements/core-elements.html#core-collapse)
+* [core-drag-drop](http://www.polymer-project.org/docs/elements/core-elements.html#core-drag-drop)
+* [core-drawer-panel](http://www.polymer-project.org/docs/elements/core-elements.html#core-drawer-panel)
+* [core-field](http://www.polymer-project.org/docs/elements/core-elements.html#core-field)
+* [core-header-panel](http://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel)
+* [core-icon](http://www.polymer-project.org/docs/elements/core-elements.html#core-icon)
+* [core-icon-button](http://www.polymer-project.org/docs/elements/core-elements.html#core-icon-button)
+* [core-input](http://www.polymer-project.org/docs/elements/core-elements.html#core-input)
+* [core-list](http://www.polymer-project.org/docs/elements/core-elements.html#core-list)
+* [core-localstorage](http://www.polymer-project.org/docs/elements/core-elements.html#core-localstorage)
+* [core-media-query](http://www.polymer-project.org/docs/elements/core-elements.html#core-media-query)
+* [core-meta](http://www.polymer-project.org/docs/elements/core-elements.html#core-meta)
+* [core-overlay](http://www.polymer-project.org/docs/elements/core-elements.html#core-overlay)
+* [core-pages](http://www.polymer-project.org/docs/elements/core-elements.html#core-pages)
+* [core-range](http://www.polymer-project.org/docs/elements/core-elements.html#core-range)
+* [core-scroll-header-panel](http://www.polymer-project.org/docs/elements/core-elements.html#core-scroll-header-panel)
+* [core-selection](http://www.polymer-project.org/docs/elements/core-elements.html#core-selection)
+* [core-selector](http://www.polymer-project.org/docs/elements/core-elements.html#core-selector)
+* [core-shared-lib](http://www.polymer-project.org/docs/elements/core-elements.html#core-shared-lib)
+* [core-signals](http://www.polymer-project.org/docs/elements/core-elements.html#core-signals)
+* [core-splitter](http://www.polymer-project.org/docs/elements/core-elements.html#core-splitter)
+* [core-style](http://www.polymer-project.org/docs/elements/core-elements.html#core-style)
+* [core-toolbar](http://www.polymer-project.org/docs/elements/core-elements.html#core-toolbar)
+* [core-tooltip](http://www.polymer-project.org/docs/elements/core-elements.html#core-tooltip)
+
+
+## Contributing
+
+1. Fork it ( https://github.com/[my-github-username]/polymer_core_rails/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+

data/app/assets/components/core-ajax/core-ajax.html.erb

@@ -0,0 +1,320 @@
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!--
+@group Polymer Core Elements
+
+The `core-ajax` element exposes `XMLHttpRequest` functionality.
+
+    <core-ajax
+        auto
+        url="http://gdata.youtube.com/feeds/api/videos/"
+        params='{"alt":"json", "q":"chrome"}'
+        handleAs="json"
+        on-core-response="{{handleResponse}}"></core-ajax>
+
+With `auto` set to `true`, the element performs a request whenever
+its `url` or `params` properties are changed.
+
+Note: The `params` attribute must be double quoted JSON.
+
+You can trigger a request explicitly by calling `go` on the
+element.
+
+@element core-ajax
+@status beta
+@homepage github.io
+-->
+<%= html_import_tag "core-ajax/core-xhr" %>
+<polymer-element name="core-ajax" attributes="url handleAs auto params response method headers body contentType withCredentials">
+<script>
+
+  Polymer('core-ajax', {
+    /**
+     * Fired when a response is received.
+     *
+     * @event core-response
+     */
+
+    /**
+     * Fired when an error is received.
+     *
+     * @event core-error
+     */
+
+    /**
+     * Fired whenever a response or an error is received.
+     *
+     * @event core-complete
+     */
+
+    /**
+     * The URL target of the request.
+     *
+     * @attribute url
+     * @type string
+     * @default ''
+     */
+    url: '',
+
+    /**
+     * Specifies what data to store in the `response` property, and
+     * to deliver as `event.response` in `response` events.
+     *
+     * One of:
+     *
+     *    `text`: uses `XHR.responseText`.
+     *
+     *    `xml`: uses `XHR.responseXML`.
+     *
+     *    `json`: uses `XHR.responseText` parsed as JSON.
+     *
+     *    `arraybuffer`: uses `XHR.response`.
+     *
+     *    `blob`: uses `XHR.response`.
+     *
+     *    `document`: uses `XHR.response`.
+     *
+     * @attribute handleAs
+     * @type string
+     * @default 'text'
+     */
+    handleAs: '',
+
+    /**
+     * If true, automatically performs an Ajax request when either `url` or `params` changes.
+     *
+     * @attribute auto
+     * @type boolean
+     * @default false
+     */
+    auto: false,
+
+    /**
+     * Parameters to send to the specified URL, as JSON.
+     *
+     * @attribute params
+     * @type string (JSON)
+     * @default ''
+     */
+    params: '',
+
+    /**
+     * Returns the response object.
+     *
+     * @attribute response
+     * @type Object
+     * @default null
+     */
+    response: null,
+
+    /**
+     * The HTTP method to use such as 'GET', 'POST', 'PUT', or 'DELETE'.
+     * Default is 'GET'.
+     *
+     * @attribute method
+     * @type string
+     * @default ''
+     */
+    method: '',
+
+    /**
+     * HTTP request headers to send.
+     *
+     * Example:
+     *
+     *     <core-ajax
+     *         auto
+     *         url="http://somesite.com"
+     *         headers='{"X-Requested-With": "XMLHttpRequest"}'
+     *         handleAs="json"
+     *         on-core-response="{{handleResponse}}"></core-ajax>
+     *
+     * @attribute headers
+     * @type Object
+     * @default null
+     */
+    headers: null,
+
+    /**
+     * Optional raw body content to send when method === "POST".
+     *
+     * Example:
+     *
+     *     <core-ajax method="POST" auto url="http://somesite.com"
+     *         body='{"foo":1, "bar":2}'>
+     *     </core-ajax>
+     *
+     * @attribute body
+     * @type Object
+     * @default null
+     */
+    body: null,
+
+    /**
+     * Content type to use when sending data.
+     *
+     * @attribute contentType
+     * @type string
+     * @default 'application/x-www-form-urlencoded'
+     */
+    contentType: 'application/x-www-form-urlencoded',
+
+    /**
+     * Set the withCredentials flag on the request.
+     *
+     * @attribute withCredentials
+     * @type boolean
+     * @default false
+     */
+    withCredentials: false,
+
+    /**
+     * Additional properties to send to core-xhr.
+     *
+     * Can be set to an object containing default properties
+     * to send as arguments to the `core-xhr.request()` method
+     * which implements the low-level communication.
+     *
+     * @property xhrArgs
+     * @type Object
+     * @default null
+     */
+    xhrArgs: null,
+
+    ready: function() {
+      this.xhr = document.createElement('core-xhr');
+    },
+
+    receive: function(response, xhr) {
+      if (this.isSuccess(xhr)) {
+        this.processResponse(xhr);
+      } else {
+        this.error(xhr);
+      }
+      this.complete(xhr);
+    },
+
+    isSuccess: function(xhr) {
+      var status = xhr.status || 0;
+      return !status || (status >= 200 && status < 300);
+    },
+
+    processResponse: function(xhr) {
+      var response = this.evalResponse(xhr);
+      this.response = response;
+      this.fire('core-response', {response: response, xhr: xhr});
+    },
+
+    error: function(xhr) {
+      var response = xhr.status + ': ' + xhr.responseText;
+      this.fire('core-error', {response: response, xhr: xhr});
+    },
+
+    complete: function(xhr) {
+      this.fire('core-complete', {response: xhr.status, xhr: xhr});
+    },
+
+    evalResponse: function(xhr) {
+      return this[(this.handleAs || 'text') + 'Handler'](xhr);
+    },
+
+    xmlHandler: function(xhr) {
+      return xhr.responseXML;
+    },
+
+    textHandler: function(xhr) {
+      return xhr.responseText;
+    },
+
+    jsonHandler: function(xhr) {
+      var r = xhr.responseText;
+      try {
+        return JSON.parse(r);
+      } catch (x) {
+        return r;
+      }
+    },
+
+    documentHandler: function(xhr) {
+      return xhr.response;
+    },
+
+    blobHandler: function(xhr) {
+      return xhr.response;
+    },
+
+    arraybufferHandler: function(xhr) {
+      return xhr.response;
+    },
+
+    urlChanged: function() {
+      if (!this.handleAs) {
+        var ext = String(this.url).split('.').pop();
+        switch (ext) {
+          case 'json':
+            this.handleAs = 'json';
+            break;
+        }
+      }
+      this.autoGo();
+    },
+
+    paramsChanged: function() {
+      this.autoGo();
+    },
+
+    autoChanged: function() {
+      this.autoGo();
+    },
+
+    // TODO(sorvell): multiple side-effects could call autoGo
+    // during one micro-task, use a job to have only one action
+    // occur
+    autoGo: function() {
+      if (this.auto) {
+        this.goJob = this.job(this.goJob, this.go, 0);
+      }
+    },
+
+    /**
+     * Performs an Ajax request to the specified URL.
+     *
+     * @method go
+     */
+    go: function() {
+      var args = this.xhrArgs || {};
+      // TODO(sjmiles): we may want XHR to default to POST if body is set
+      args.body = this.body || args.body;
+      args.params = this.params || args.params;
+      if (args.params && typeof(args.params) == 'string') {
+        args.params = JSON.parse(args.params);
+      }
+      args.headers = this.headers || args.headers || {};
+      if (args.headers && typeof(args.headers) == 'string') {
+        args.headers = JSON.parse(args.headers);
+      }
+      if (this.contentType) {
+        args.headers['content-type'] = this.contentType;
+      }
+      if (this.handleAs === 'arraybuffer' || this.handleAs === 'blob' ||
+          this.handleAs === 'document') {
+        args.responseType = this.handleAs;
+      }
+      args.withCredentials = this.withCredentials;
+      args.callback = this.receive.bind(this);
+      args.url = this.url;
+      args.method = this.method;
+      return args.url && this.xhr.request(args);
+    }
+
+  });
+
+</script>
+</polymer-element>

data/app/assets/components/core-ajax/core-xhr.html.erb

@@ -0,0 +1,112 @@
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!--
+/**
+ * @group Polymer Core Elements
+ *
+ * core-xhr can be used to perform XMLHttpRequests.
+ *
+ *     <core-xhr id="xhr"></core-xhr>
+ *     ...
+ *     this.$.xhr.request({url: url, params: params, callback: callback});
+ *
+ * @element core-xhr
+ */
+-->
+<polymer-element name="core-xhr" hidden>
+
+  <script>
+
+    Polymer('core-xhr', {
+
+      /**
+       * Sends a HTTP request to the server and returns the XHR object.
+       *
+       * @method request
+       * @param {Object} inOptions
+       *    @param {String} inOptions.url The url to which the request is sent.
+       *    @param {String} inOptions.method The HTTP method to use, default is GET.
+       *    @param {boolean} inOptions.sync By default, all requests are sent asynchronously. To send synchronous requests, set to true.
+       *    @param {Object} inOptions.params Data to be sent to the server.
+       *    @param {Object} inOptions.body The content for the request body for POST method.
+       *    @param {Object} inOptions.headers HTTP request headers.
+       *    @param {String} inOptions.responseType The response type. Default is 'text'.
+       *    @param {boolean} inOptions.withCredentials Whether or not to send credentials on the request. Default is false.
+       *    @param {Object} inOptions.callback Called when request is completed.
+       * @returns {Object} XHR object.
+       */
+      request: function(options) {
+        var xhr = new XMLHttpRequest();
+        var url = options.url;
+        var method = options.method || 'GET';
+        var async = !options.sync;
+        //
+        var params = this.toQueryString(options.params);
+        if (params && method == 'GET') {
+          url += (url.indexOf('?') > 0 ? '&' : '?') + params;
+        }
+        var xhrParams = this.isBodyMethod(method) ? (options.body || params) : null;
+        //
+        xhr.open(method, url, async);
+        if (options.responseType) {
+          xhr.responseType = options.responseType;
+        }
+        if (options.withCredentials) {
+          xhr.withCredentials = true;
+        }
+        this.makeReadyStateHandler(xhr, options.callback);
+        this.setRequestHeaders(xhr, options.headers);
+        xhr.send(xhrParams);
+        if (!async) {
+          xhr.onreadystatechange(xhr);
+        }
+        return xhr;
+      },
+
+      toQueryString: function(params) {
+        var r = [];
+        for (var n in params) {
+          var v = params[n];
+          n = encodeURIComponent(n);
+          r.push(v == null ? n : (n + '=' + encodeURIComponent(v)));
+        }
+        return r.join('&');
+      },
+
+      isBodyMethod: function(method) {
+        return this.bodyMethods[(method || '').toUpperCase()];
+      },
+
+      bodyMethods: {
+        POST: 1,
+        PUT: 1,
+        DELETE: 1
+      },
+
+      makeReadyStateHandler: function(xhr, callback) {
+        xhr.onreadystatechange = function() {
+          if (xhr.readyState == 4) {
+            callback && callback.call(null, xhr.response, xhr);
+          }
+        };
+      },
+
+      setRequestHeaders: function(xhr, headers) {
+        if (headers) {
+          for (var name in headers) {
+            xhr.setRequestHeader(name, headers[name]);
+          }
+        }
+      }
+
+    });
+
+  </script>
+
+</polymer-element>

data/app/assets/components/core-animated-pages/core-animated-pages.css

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+  position: relative;
+}
+
+polyfill-next-selector { content: ':host > *'; }
+::content > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+polyfill-next-selector { content: ':host > *:not(.core-selected):not([animate])'; }
+::content > *:not(.core-selected):not([animate]) {
+  display: none !important;
+}