[Client] LS to JS and some Clean up ✌️

This commit is contained in:
syuilo 2017-02-13 07:39:54 +09:00
parent 448fc31888
commit 96cd073bda
10 changed files with 49 additions and 118 deletions

View File

@ -4,7 +4,7 @@
const riot = require('riot'); const riot = require('riot');
require('velocity-animate'); require('velocity-animate');
const api = require('./common/scripts/api.ls'); const api = require('./common/scripts/api');
const signout = require('./common/scripts/signout.ls'); const signout = require('./common/scripts/signout.ls');
const generateDefaultUserdata = require('./common/scripts/generate-default-userdata.ls'); const generateDefaultUserdata = require('./common/scripts/generate-default-userdata.ls');
const mixins = require('./common/mixins.ls'); const mixins = require('./common/mixins.ls');

View File

@ -6,7 +6,7 @@ module.exports = (me) ~>
(require './scripts/i.ls') me (require './scripts/i.ls') me
riot.mixin \api do riot.mixin \api do
api: (require './scripts/api.ls').bind null i api: (require './scripts/api').bind null i
riot.mixin \cropper do riot.mixin \cropper do
Cropper: require \cropperjs Cropper: require \cropperjs

View File

@ -0,0 +1,44 @@
/**
* API Request
*/
let spinner = null;
let pending = 0;
/**
* Send a request to API
* @param {string|Object} i Credential
* @param {string} endpoint Endpoint
* @param {Object} [data={}] Data
* @return {Promise<Object>} Response
*/
module.exports = (i, endpoint, data = {}) => {
if (++pending === 1) {
spinner = document.createElement('div');
spinner.setAttribute('id', 'wait');
document.body.appendChild(spinner);
}
// Append the credential
if (i != null) data.i = typeof i === 'object' ? i.token : i;
return new Promise((resolve, reject) => {
// Send request
fetch(endpoint.indexOf('://') > -1 ? endpoint : `${CONFIG.api.url}/${endpoint}`, {
method: 'POST',
body: JSON.stringify(data),
credentials: endpoint === 'signin' ? 'include' : 'omit'
}).then(res => {
if (--pending === 0) spinner.parentNode.removeChild(spinner);
if (res.status === 200) {
res.json().then(resolve);
} else if (res.status === 204) {
resolve();
} else {
res.json().then(err => {
reject(err.error);
});
}
}).catch(reject);
});
};

View File

@ -1,51 +0,0 @@
riot = require \riot
spinner = null
pending = 0
net = riot.observable!
riot.mixin \net do
net: net
module.exports = (i, endpoint, data = {}) ->
if ++pending == 1
spinner := document.create-element \div
..set-attribute \id \wait
document.body.append-child spinner
if i? and typeof i == \object then i = i.token
# append user token when signed in
if i? then data.i = i
opts =
method: \POST
body: JSON.stringify data
if endpoint == \signin
opts.credentials = \include
ep = if (endpoint.index-of '://') > -1
then endpoint
else "#{CONFIG.api.url}/#{endpoint}"
new Promise (resolve, reject) ->
timer = set-timeout ->
net.trigger \detected-slow-network
, 5000ms
fetch ep, opts
.then (res) ->
clear-timeout timer
if --pending == 0
spinner.parent-node.remove-child spinner
if res.status == 200
res.json!.then resolve
else if res.status == 204
resolve!
else
res.json!.then (err) ->
reject err.error
.catch reject

View File

@ -3,7 +3,7 @@
riot = require 'riot' riot = require 'riot'
dialog = require './dialog.ls' dialog = require './dialog.ls'
api = require '../../common/scripts/api.ls' api = require '../../common/scripts/api'
module.exports = (I, cb, file = null) ~> module.exports = (I, cb, file = null) ~>

View File

@ -3,7 +3,7 @@
riot = require 'riot' riot = require 'riot'
dialog = require './dialog.ls' dialog = require './dialog.ls'
api = require '../../common/scripts/api.ls' api = require '../../common/scripts/api'
module.exports = (I, cb, file = null) ~> module.exports = (I, cb, file = null) ~>

View File

@ -3,7 +3,7 @@
riot = require 'riot' riot = require 'riot'
dialog = require './dialog.ls' dialog = require './dialog.ls'
api = require '../../common/scripts/api.ls' api = require '../../common/scripts/api'
module.exports = (I, cb, file = null) ~> module.exports = (I, cb, file = null) ~>

View File

@ -1,60 +0,0 @@
<mk-detect-slow-internet-connection-notice><i><i class="fa fa-exclamation"></i></i>
<div>
<p>インターネット回線が遅いようです。</p>
</div>
<style type="stylus">
:scope
display block
pointer-events none
position fixed
z-index 16384
top 64px
right 16px
margin 0
padding 0
width 298px
font-size 0.9em
background #fff
box-shadow 0 1px 4px rgba(0, 0, 0, 0.25)
opacity 0
> i
display block
width 48px
line-height 48px
margin-right 0.25em
text-align center
color $theme-color-foreground
font-size 1.5em
background $theme-color
> div
display block
position absolute
top 0
left 48px
margin 0
width 250px
height 48px
color #666
> p
display block
margin 0
padding 8px
</style>
<script>
@mixin \net
@net.on \detected-slow-network ~>
Velocity @root, {
opacity: 1
} 200ms \linear
set-timeout ~>
Velocity @root, {
opacity: 0
} 200ms \linear
, 10000ms
</script>
</mk-detect-slow-internet-connection-notice>

View File

@ -7,7 +7,6 @@
</main> </main>
<div class="right" ref="right"></div> <div class="right" ref="right"></div>
</div> </div>
<mk-detect-slow-internet-connection-notice></mk-detect-slow-internet-connection-notice>
<style type="stylus"> <style type="stylus">
:scope :scope
display block display block

View File

@ -54,7 +54,6 @@ require('./following-setuper.tag');
require('./ellipsis-icon.tag'); require('./ellipsis-icon.tag');
require('./ui.tag'); require('./ui.tag');
require('./home.tag'); require('./home.tag');
require('./detect-slow-internet-connection-notice.tag');
require('./user-header.tag'); require('./user-header.tag');
require('./user-profile.tag'); require('./user-profile.tag');
require('./user-timeline.tag'); require('./user-timeline.tag');