Skip to content

Commit

Permalink
use node and webpack
Browse files Browse the repository at this point in the history
  • Loading branch information
rutan committed Oct 7, 2015
1 parent a97330b commit 8959219
Show file tree
Hide file tree
Showing 18 changed files with 389 additions and 10,133 deletions.
2 changes: 2 additions & 0 deletions .buildpacks
@@ -0,0 +1,2 @@
https://github.com/heroku/heroku-buildpack-nodejs.git
https://github.com/heroku/heroku-buildpack-ruby.git
3 changes: 3 additions & 0 deletions .gitignore
Expand Up @@ -3,6 +3,9 @@
.rbenv-version
.ruby-version
/public/attachment_files
/public/assets
/vendor/assets/javascripts/bundle.*
node_modules

# Created by https://www.gitignore.io

Expand Down
1 change: 1 addition & 0 deletions Gemfile
Expand Up @@ -51,5 +51,6 @@ group :development, :test do
gem 'quiet_assets'
gem 'annotate'
gem 'fakes3'
gem 'foreman'
end

3 changes: 3 additions & 0 deletions Gemfile.lock
Expand Up @@ -164,6 +164,8 @@ GEM
ffi (1.9.10)
font-awesome-sass (4.3.2.1)
sass (~> 3.2)
foreman (0.78.0)
thor (~> 0.19.1)
formatador (0.2.5)
gemoji (2.1.0)
globalid (0.3.5)
Expand Down Expand Up @@ -508,6 +510,7 @@ DEPENDENCIES
faker
fakes3
font-awesome-sass
foreman
gemoji
html-pipeline-nico_link
ikazuchi
Expand Down
3 changes: 3 additions & 0 deletions Procfile.dev
@@ -0,0 +1,3 @@
web: bundle exec rails s -b 0.0.0.0
webpack: npm run watch

7 changes: 6 additions & 1 deletion app.json
Expand Up @@ -87,5 +87,10 @@
},
"scripts": {
"postdeploy": "bundle exec rake db:create db:migrate"
}
},
"buildpacks": [
{
"url": "https://github.com/ddollar/heroku-buildpack-multi.git"
}
]
}
269 changes: 1 addition & 268 deletions app/assets/javascripts/application.js
@@ -1,271 +1,4 @@
//= require jquery
//= require jquery_ujs
//= require uikit.min
//= require vue
//= require_self

this.Potmum = (function (Potmum) {

Potmum.createArtcleEditor = function (element) {
return new Vue({
el: element,
data: {
id: null,
title: '',
tags: [],
body: '',
preview_html: '',
publish_type: 'public_item',
tagFocus: false,
sendingFlag: false
},
computed: {
bodyField: {
get: function () {
return this.$data.body
},
set: function (text) {
this.$data.body = text;
if (this._previewID) clearTimeout(this._previewID);
var self = this;
this._previewID = setTimeout(function () {
self._previewID = null;
self.preview();
}, 500);
}
}
},
ready: function () {
this.leftAlertFlag = false;
this.$data.id = $(this.$el).data('id');
this.$data.tags = $(this.$el).data('tags').split(/\s/).filter(function (n) {
return ('' + n).length > 0;
});
this.$data.publish_type = $(this.$el).data('publish_type');
},
methods: {
onRemoveTag: function (e, content) {
this.editStart();
e.preventDefault();
var i = this.$data.tags.indexOf(content);
if (i != -1) {
this.$data.tags.$remove(i);
}
},
onBlurTag: function (e) {
e.preventDefault();
var target = $(e.target);
target.val(target.val() + ' ');
this.onInputTag(e);
},
onInputTag: function (e) {
this.editStart();
this.$data.tagFocus = true;
var target = $(e.target);
var contents = target.val().split(/\s| /);
if (contents.length > 1) {
for (var i = 0; i < contents.length - 1; ++i) {
if (contents[i].length > 0 && this.$data.tags.length < 5 && this.$data.tags.indexOf(contents[i]) == -1) {
this.$data.tags.push(contents[i]);
}
}
target.val('');
} else {
target.css('width', (3 + target.val().length * 2) + 'em');
}
},
onRemoveLastTag: function (e) {
this.editStart();
var target = $(e.target);
if (this.$data.tags.length > 0 && target.val() == '') {
this.$data.tags.$remove(this.$data.tags.length - 1);
}
},
onClickTagForm: function (e) {
e.preventDefault();
$(this.$el).find('.js-tag-field').focus();
},
onClickSetSaveMode: function (e, mode) {
e.preventDefault();
this.$data.publish_type = mode;
},
preview: function () {
this.editStart();
var self = this;
$.ajax({
url: this.$data.id ? '../preview.json' : '../items/preview.json',
type: 'post',
data: {
body: this.$data.body
},
success: function (resp) {
self.$data.preview_html = resp.data.markdown_html;
}
});
},
onClickSubmit: function (e) {
e.preventDefault();

// validation
if (this.$data.title.length < 1 || this.$data.title.length > 64) {
alert('タイトルを1〜64文字で入力してください。');
return;
}
if (this.$data.body.length < 1 || this.$data.body.length > 100000) {
alert('本文を1〜100000文字で入力してください。');
return;
}

// send
var self = this;
self.$data.sendingFlag = true;
$.ajax({
url: this.$data.id ? '../' + this.$data.id + '.json' : '../items.json',
type: this.$data.id ? 'put' : 'post',
data: {
title: this.$data.title,
tags_text: this.$data.tags.join(' '),
body: this.$data.body,
publish_type: this.$data.publish_type
},
success: function (resp) {
$(window).off('beforeunload');
if (self.$data.publish_type != 'draft_item') {
location.href = resp.data.url;
} else {
location.href = (self.$data.id ? '../' : '') + '../drafts';
}
},
error: function (e) {
console.error(e);
self.$data.sendingFlag = false;
alert('エラーしたよ');
}
});
},
onChangePictureFile: function (e) {
if (e.target.files.length == 0) return;
var formData = new FormData();
formData.append('file', e.target.files[0]);
var self = this;
$.ajax({
url: '/attachment_files.json',
method: 'post',
dataType: 'json',
data: formData,
processData: false,
contentType: false,
success: function (resp) {
var textarea = $(self.$el).find('.js-textarea')[0];
var n = textarea.selectionEnd;
var str = "\n![img](" + resp.data.url + ")\n";
self.bodyField = self.bodyField.slice(0, n) + str + self.bodyField.slice(n);
},
error: function (err) {
console.error(err);
alert('エラーしたよ');
}
});
},
editStart: function () {
if (!this.leftAlertFlag) {
this.leftAlertFlag = true;
$(window).on('beforeunload', function () {
return "このままページを移動すると編集内容が保存されません。";
});
}
}
}
});
};

Potmum.createCommentForm = function (element) {
if ($(element).length == 0) return;
return new Vue({
el: element,
data: {
body: '',
url: '',
modePreview: false,
preview_html: ''
},
ready: function () {
this.$data.url = $(this.$el).data('url');
},
methods: {
changeToForm: function (e) {
e.preventDefault();
this.$data.modePreview = false;
},
changeToPreview: function (e) {
e.preventDefault();
if (this.$data.modePreview) return;
this.$data.modePreview = true;
var self = this;
$.ajax({
url: '/comments/preview.json',
type: 'post',
data: {
body: this.$data.body
},
success: function (resp) {
self.$data.preview_html = resp.data.markdown_html;
},
error: function (e) {
console.error(e);
self.$data.preview_html = 'エラーが発生しました';
}
});
},
onSubmit: function (e) {
e.preventDefault();
$.ajax({
url: this.$data.url,
type: 'post',
data: {
body: this.$data.body
},
success: function (resp) {
location.href = resp.data.url;
location.reload();
},
error: function (e) {
console.error(e);
alert('エラーが発生しました');
}
});
}
}
});
};

Potmum.createStockButton = function (element) {
if ($(element).length == 0) return;
return new Vue({
el: element,
data: {
url: '',
stocked: false
},
ready: function () {
this.$data.url = $(this.$el).data('url');
this.$data.stocked = parseInt($(this.$el).data('stocked')) != 0;
},
methods: {
onClick: function (e) {
e.preventDefault();
this.$data.stocked = !this.$data.stocked;
$.ajax({
url: this.$data.url,
type: 'put',
data: {
stocked: this.$data.stocked ? 1 : 0
}
});
}
}
});
};

return Potmum;
})(this.Potmum || {});
//= require bundle.js
3 changes: 0 additions & 3 deletions app/views/articles/_form.html.slim
Expand Up @@ -66,6 +66,3 @@


- content_for(:full_mode) { 'on' }
- content_for(:local_js) do
javascript:
var editor = Potmum.createArtcleEditor('.js-article-editor');
5 changes: 0 additions & 5 deletions app/views/articles/show.html.slim
Expand Up @@ -121,10 +121,5 @@
= cache "article-index--#{@article.id}--#{@article.updated_at}" do
== @article_d.newest_revision.markdown_toc_html

- content_for(:local_js) do
javascript:
var commentForm = Potmum.createCommentForm('.js-comment-form');
var stockButton = Potmum.createStockButton('.js-stock-button');
- content_for(:title) do
== @article.title
2 changes: 0 additions & 2 deletions app/views/layouts/application.html.slim
Expand Up @@ -64,5 +64,3 @@ html
= javascript_include_tag 'application'
javascript:
$(".uk-alert").uk('alert');
- if content_for?(:local_js)
= yield(:local_js)
6 changes: 0 additions & 6 deletions app/views/lobbies/redirector.html.slim
Expand Up @@ -5,9 +5,3 @@
p.uk-text-center.uk-text-large.wrap
a#js-redirect-url href=@url
= @url

- content_for(:local_js) do
javascript:
setTimeout(function () {
location.href = $('#js-redirect-url').attr('href');
}, 3000);
36 changes: 36 additions & 0 deletions frontend/index.js
@@ -0,0 +1,36 @@

(function () {
const page = require('page');
const articleController = require('./pages/article');

// new edit
page('/@:name/items/new', function () {
articleController.newAction();
});

// edit
page('/@:name/items/:article_id/edit', function () {
articleController.editAction();
});

// show
page('/@:name/items/:article_id', function () {
articleController.showAction();
});

// redirector
page('/redirect', function () {
let url = $('#js-redirect-url').attr('href');
if (url) {
setTimeout(() => {
location.href = url;
}, 3000);
}
});

// simple use
page({
popstate: false,
click: false
})
})();

0 comments on commit 8959219

Please sign in to comment.