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..8f13fb3 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'; }); @@ -15,7 +15,27 @@ define(['domReady', 'vue', 'sidebar'], function(domReady, Vue, sidebar) { }); }; - domReady(function(){ + var initUsers = function(data) { + new Vue({ + el: '#users', + data: { + title: 'Projects 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'], 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 aa0a572..192863c 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,4 +1,3 @@ - (function() { require.config({ baseUrl: '/js', @@ -24,6 +23,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 +38,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 +})(); 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.