From 9da02c8fab5488781fdcfa484f38f6f9f454f0ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Sun, 3 May 2015 17:44:26 +0000 Subject: [PATCH 1/3] Add fetch shim to project. --- bower.json | 3 +- src/js/init/vue.js | 4 +- src/js/main.js | 11 +- src/js/vendor/fetch.js | 324 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 335 insertions(+), 7 deletions(-) create mode 100644 src/js/vendor/fetch.js diff --git a/bower.json b/bower.json index c24720a..4a056e1 100644 --- a/bower.json +++ b/bower.json @@ -18,7 +18,8 @@ "modernizr": "~2.8.3", "html5-polyfills": "*", "underscore": "~1.7.0", - "vue": "~0.11.5" + "vue": "~0.11.5", + "fetch": "~0.7.0" }, "overrides": { "jquery": { diff --git a/src/js/init/vue.js b/src/js/init/vue.js index d87f760..ac2563f 100644 --- a/src/js/init/vue.js +++ b/src/js/init/vue.js @@ -1,6 +1,6 @@ -define(['domReady', 'vue', 'sidebar'], function(domReady, Vue, sidebar) { +define(['domReady', 'vue', 'sidebar', 'fetch'], function(domReady, Vue, sidebar, fetch) { var init = function(data) { - Vue.filter('defaultIcon', function(value){ + Vue.filter('defaultIcon', function(value) { // Returns a default icon if no value is given return value || 'cube'; }); diff --git a/src/js/main.js b/src/js/main.js index aa0a572..c46eba2 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -24,6 +24,8 @@ modernizr: 'vendor/modernizr', vue: 'vendor/vue', + fetch: 'vendor/fetch', + sidebar: 'kolibri/koli-sidebar', smoothscroll: 'kolibri/koli-smoothscroll', cssTranslate: 'kolibri/koli-css-translate', @@ -37,10 +39,11 @@ }, shim: { - jquery: { exports: '$' }, - jqEasing: { deps: ['jquery'] }, - underscore: { exports: '_' }, - modernizr: { exports: 'Modernizr' }, + jquery: {exports: '$'}, + jqEasing: {deps: ['jquery']}, + underscore: {exports: '_'}, + modernizr: {exports: 'Modernizr'}, + fetch: {exports: 'fetch'}, } }); diff --git a/src/js/vendor/fetch.js b/src/js/vendor/fetch.js new file mode 100644 index 0000000..c1cab8e --- /dev/null +++ b/src/js/vendor/fetch.js @@ -0,0 +1,324 @@ +(function() { + 'use strict'; + + if (self.fetch) { + return + } + + function Headers(headers) { + this.map = {} + + var self = this + if (headers instanceof Headers) { + headers.forEach(function(name, values) { + values.forEach(function(value) { + self.append(name, value) + }) + }) + + } else if (headers) { + Object.getOwnPropertyNames(headers).forEach(function(name) { + self.append(name, headers[name]) + }) + } + } + + Headers.prototype.append = function(name, value) { + name = name.toLowerCase() + var list = this.map[name] + if (!list) { + list = [] + this.map[name] = list + } + list.push(value) + } + + Headers.prototype['delete'] = function(name) { + delete this.map[name.toLowerCase()] + } + + Headers.prototype.get = function(name) { + var values = this.map[name.toLowerCase()] + return values ? values[0] : null + } + + Headers.prototype.getAll = function(name) { + return this.map[name.toLowerCase()] || [] + } + + Headers.prototype.has = function(name) { + return this.map.hasOwnProperty(name.toLowerCase()) + } + + Headers.prototype.set = function(name, value) { + this.map[name.toLowerCase()] = [value] + } + + // Instead of iterable for now. + Headers.prototype.forEach = function(callback) { + var self = this + Object.getOwnPropertyNames(this.map).forEach(function(name) { + callback(name, self.map[name]) + }) + } + + function consumed(body) { + if (body.bodyUsed) { + return Promise.reject(new TypeError('Already read')) + } + body.bodyUsed = true + } + + function fileReaderReady(reader) { + return new Promise(function(resolve, reject) { + reader.onload = function() { + resolve(reader.result) + } + reader.onerror = function() { + reject(reader.error) + } + }) + } + + function readBlobAsArrayBuffer(blob) { + var reader = new FileReader() + reader.readAsArrayBuffer(blob) + return fileReaderReady(reader) + } + + function readBlobAsText(blob) { + var reader = new FileReader() + reader.readAsText(blob) + return fileReaderReady(reader) + } + + var support = { + blob: 'FileReader' in self && 'Blob' in self && (function() { + try { + new Blob(); + return true + } catch(e) { + return false + } + })(), + formData: 'FormData' in self + } + + function Body() { + this.bodyUsed = false + + if (support.blob) { + this._initBody = function(body) { + this._bodyInit = body + if (typeof body === 'string') { + this._bodyText = body + } else if (support.blob && Blob.prototype.isPrototypeOf(body)) { + this._bodyBlob = body + } else if (support.formData && FormData.prototype.isPrototypeOf(body)) { + this._bodyFormData = body + } else if (!body) { + this._bodyText = '' + } else { + throw new Error('unsupported BodyInit type') + } + } + + this.blob = function() { + var rejected = consumed(this) + if (rejected) { + return rejected + } + + if (this._bodyBlob) { + return Promise.resolve(this._bodyBlob) + } else if (this._bodyFormData) { + throw new Error('could not read FormData body as blob') + } else { + return Promise.resolve(new Blob([this._bodyText])) + } + } + + this.arrayBuffer = function() { + return this.blob().then(readBlobAsArrayBuffer) + } + + this.text = function() { + var rejected = consumed(this) + if (rejected) { + return rejected + } + + if (this._bodyBlob) { + return readBlobAsText(this._bodyBlob) + } else if (this._bodyFormData) { + throw new Error('could not read FormData body as text') + } else { + return Promise.resolve(this._bodyText) + } + } + } else { + this._initBody = function(body) { + this._bodyInit = body + if (typeof body === 'string') { + this._bodyText = body + } else if (support.formData && FormData.prototype.isPrototypeOf(body)) { + this._bodyFormData = body + } else if (!body) { + this._bodyText = '' + } else { + throw new Error('unsupported BodyInit type') + } + } + + this.text = function() { + var rejected = consumed(this) + return rejected ? rejected : Promise.resolve(this._bodyText) + } + } + + if (support.formData) { + this.formData = function() { + return this.text().then(decode) + } + } + + this.json = function() { + return this.text().then(JSON.parse) + } + + return this + } + + // HTTP methods whose capitalization should be normalized + var methods = ['DELETE', 'GET', 'HEAD', 'OPTIONS', 'POST', 'PUT'] + + function normalizeMethod(method) { + var upcased = method.toUpperCase() + return (methods.indexOf(upcased) > -1) ? upcased : method + } + + function Request(url, options) { + options = options || {} + this.url = url + + this.credentials = options.credentials || 'omit' + this.headers = new Headers(options.headers) + this.method = normalizeMethod(options.method || 'GET') + this.mode = options.mode || null + this.referrer = null + + if ((this.method === 'GET' || this.method === 'HEAD') && options.body) { + throw new TypeError('Body not allowed for GET or HEAD requests') + } + this._initBody(options.body) + } + + function decode(body) { + var form = new FormData() + body.trim().split('&').forEach(function(bytes) { + if (bytes) { + var split = bytes.split('=') + var name = split.shift().replace(/\+/g, ' ') + var value = split.join('=').replace(/\+/g, ' ') + form.append(decodeURIComponent(name), decodeURIComponent(value)) + } + }) + return form + } + + function headers(xhr) { + var head = new Headers() + var pairs = xhr.getAllResponseHeaders().trim().split('\n') + pairs.forEach(function(header) { + var split = header.trim().split(':') + var key = split.shift().trim() + var value = split.join(':').trim() + head.append(key, value) + }) + return head + } + + Request.prototype.fetch = function() { + var self = this + + return new Promise(function(resolve, reject) { + var xhr = new XMLHttpRequest() + if (self.credentials === 'cors') { + xhr.withCredentials = true; + } + + function responseURL() { + if ('responseURL' in xhr) { + return xhr.responseURL + } + + // Avoid security warnings on getResponseHeader when not allowed by CORS + if (/^X-Request-URL:/m.test(xhr.getAllResponseHeaders())) { + return xhr.getResponseHeader('X-Request-URL') + } + + return; + } + + xhr.onload = function() { + var status = (xhr.status === 1223) ? 204 : xhr.status + if (status < 100 || status > 599) { + reject(new TypeError('Network request failed')) + return + } + var options = { + status: status, + statusText: xhr.statusText, + headers: headers(xhr), + url: responseURL() + } + var body = 'response' in xhr ? xhr.response : xhr.responseText; + resolve(new Response(body, options)) + } + + xhr.onerror = function() { + reject(new TypeError('Network request failed')) + } + + xhr.open(self.method, self.url, true) + if ('responseType' in xhr && support.blob) { + xhr.responseType = 'blob' + } + + self.headers.forEach(function(name, values) { + values.forEach(function(value) { + xhr.setRequestHeader(name, value) + }) + }) + + xhr.send(typeof self._bodyInit === 'undefined' ? null : self._bodyInit) + }) + } + + Body.call(Request.prototype) + + function Response(bodyInit, options) { + if (!options) { + options = {} + } + + this._initBody(bodyInit) + this.type = 'default' + this.url = null + this.status = options.status + this.statusText = options.statusText + this.headers = options.headers + this.url = options.url || '' + } + + Body.call(Response.prototype) + + self.Headers = Headers; + self.Request = Request; + self.Response = Response; + + self.fetch = function (url, options) { + return new Request(url, options).fetch() + } + self.fetch.polyfill = true +})(); From 4f8c8e5391f2d5fee3688b933bc5bf1cdf81b6af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Sun, 3 May 2015 17:44:51 +0000 Subject: [PATCH 2/3] Fetch data about usage and display on the page. --- src/js/init/vue.js | 24 ++++++++++++++++++++++-- src/js/main.js | 1 - src/views/home/_users.jade | 8 ++++++++ src/views/index.jade | 1 + src/views/shared/_footer.jade | 5 ++--- 5 files changed, 33 insertions(+), 6 deletions(-) create mode 100644 src/views/home/_users.jade diff --git a/src/js/init/vue.js b/src/js/init/vue.js index ac2563f..4427df1 100644 --- a/src/js/init/vue.js +++ b/src/js/init/vue.js @@ -15,7 +15,27 @@ define(['domReady', 'vue', 'sidebar', 'fetch'], function(domReady, Vue, sidebar, }); }; - domReady(function(){ + var initUsers = function(data) { + new Vue({ + el: '#users', + data: { + title: 'People using APIS.is', + users: data.users + } + }); + }; + + domReady(function() { + fetch('http://beta.apis.is/meta/users/') + .then(function(response) { + return response.json(); + }).then(function(json) { + initUsers(json); + }).catch(function(err) { + // TODO: Error handling! ;) + console.error(err); + }); + var data = []; var request = new XMLHttpRequest(); request.open('GET', 'http://beta.apis.is/docs.json', true); @@ -35,4 +55,4 @@ define(['domReady', 'vue', 'sidebar', 'fetch'], function(domReady, Vue, sidebar, request.send(); }); -}); \ No newline at end of file +}); diff --git a/src/js/main.js b/src/js/main.js index c46eba2..192863c 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,4 +1,3 @@ - (function() { require.config({ baseUrl: '/js', diff --git a/src/views/home/_users.jade b/src/views/home/_users.jade new file mode 100644 index 0000000..f33e558 --- /dev/null +++ b/src/views/home/_users.jade @@ -0,0 +1,8 @@ +section.section.dark(scrolltrigger)#users + article: row + column: .text-center + h2 {{ title }} + template(v-repeat="users") + column.large-6.medium-10.medium-centered + h3 {{name}} + p {{description}} diff --git a/src/views/index.jade b/src/views/index.jade index f64ea84..6ba9344 100644 --- a/src/views/index.jade +++ b/src/views/index.jade @@ -7,3 +7,4 @@ block content include home/_about include home/_endpoints + include home/_users diff --git a/src/views/shared/_footer.jade b/src/views/shared/_footer.jade index 5e0e00d..c562a47 100644 --- a/src/views/shared/_footer.jade +++ b/src/views/shared/_footer.jade @@ -1,4 +1,3 @@ - -footer: section.dark +footer: section.light row: column.medium-10.large-8.col-centered - box: p.text-large Would you like to suggest a new endpoint to be implemented?
Don't hesitate to contact us, or contribute to our github repo. + box: p.text-large Would you like to suggest a new endpoint to be implemented?
Don't hesitate to contact us, or contribute to our github repo. From d52291383e1484a5ef0b5770e45356e4ce1cf380 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Sun, 3 May 2015 20:13:09 +0000 Subject: [PATCH 3/3] Change the title from People to Projects --- src/js/init/vue.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/init/vue.js b/src/js/init/vue.js index 4427df1..8f13fb3 100644 --- a/src/js/init/vue.js +++ b/src/js/init/vue.js @@ -19,7 +19,7 @@ define(['domReady', 'vue', 'sidebar', 'fetch'], function(domReady, Vue, sidebar, new Vue({ el: '#users', data: { - title: 'People using APIS.is', + title: 'Projects using APIS.is', users: data.users } });