magick_pen 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +56 -16
- data/app/models/magick_pen/config.rb +41 -0
- data/app/models/magick_pen/snippet.rb +12 -45
- data/lib/generators/magick_pen/install_generator.rb +8 -0
- data/lib/magick_pen/version.rb +1 -1
- metadata +4 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 32614dd059b38a9b63ee71f8391bf21ad1837229cb1a79c5d83ba2b096eb5403
|
|
4
|
+
data.tar.gz: 370cbce68f3ca3b3b018c90d55fa00bff353bb04806870f3e14b427d4b7e91b8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 38c47aa9006a5c72788ce31152a6aed7f4f9a601b8186fb88fdebe89223c5d51997062ef57671697121f42e9f9cf843711744fd57e2d75850772700260e14a35
|
|
7
|
+
data.tar.gz: ce52ad0fa26bae252f8c60b9a76f5f072dfcf2c4944f3f483dad0e3b24c797175c0a83ba1dcf78f9f01b335f26ceb48288e37b2f127ce1cf51cd7e8cdc118e5a
|
data/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# Magick Pen
|
|
2
2
|
|
|
3
3
|
Magick Penは、Railsプロジェクトに組み込んで利用できるGemのプラグインです。
|
|
4
|
-
テンプレートファイル(.erbファイル)の任意の部分を
|
|
4
|
+
テンプレートファイル(.erbファイル)の任意の部分を ```<vue-magick-pen> 〜 </vue-magick-pen>``` で囲むだけで、Webページから直接変更ができるようになります。
|
|
5
5
|
|
|
6
6
|
また、変更内容を履歴管理していますので、過去の内容に戻すことも簡単です。
|
|
7
7
|
|
|
@@ -27,7 +27,7 @@ $ rails g magick_pen:install --with-migrate
|
|
|
27
27
|
|
|
28
28
|
ここでは、Rails Sprocketsを使ってアセットコンパイルして利用する方法を説明します。
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
#### app/assets/stylesheets/application.css
|
|
31
31
|
|
|
32
32
|
nodeモジュールからmagick penのcssを読み込みます。
|
|
33
33
|
|
|
@@ -41,7 +41,7 @@ nodeモジュールからmagick penのcssを読み込みます。
|
|
|
41
41
|
*/
|
|
42
42
|
```
|
|
43
43
|
|
|
44
|
-
|
|
44
|
+
#### app/assets/javascript/application.js
|
|
45
45
|
|
|
46
46
|
nodeモジュールからvue.jsと magick penのVueコンポーネントを読み込みます。
|
|
47
47
|
|
|
@@ -56,7 +56,7 @@ nodeモジュールからvue.jsと magick penのVueコンポーネントを読
|
|
|
56
56
|
```
|
|
57
57
|
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
#### app/views/layouts/application.html.erb
|
|
60
60
|
|
|
61
61
|
```html
|
|
62
62
|
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
|
|
@@ -67,7 +67,7 @@ layouts/application.html.erb から application.jsと application.cssを読み
|
|
|
67
67
|
|
|
68
68
|
# ページを作成する
|
|
69
69
|
|
|
70
|
-
|
|
70
|
+
#### app/views/xxxxx/index.html.erb
|
|
71
71
|
|
|
72
72
|
任意のコントローラー、アクションを作成し、テンプレートファイルをマークアップします。
|
|
73
73
|
|
|
@@ -97,20 +97,17 @@ layouts/application.html.erb から application.jsと application.cssを読み
|
|
|
97
97
|
|
|
98
98
|
マークアップのルールは以下の通りです。
|
|
99
99
|
- id="magick-pen" で 囲った部分が有効になります。この範囲内であれば、何か所でも Magick Pen を埋め込めます。
|
|
100
|
-
-
|
|
100
|
+
- Magick Penを埋め込みたい部分を ```<vue-magick-pen> 〜 </vue-magick-pen>``` で囲みます。
|
|
101
101
|
- この時、キーとなる文字列を pen-key属性に設定して下さい。
|
|
102
102
|
- pen-key は (コントローラー名＋アクション名) のスコープでユニークとなるようにして下さい。別コントローラー、別アクションであれば、同じpen-keyでも別物として扱われます。
|
|
103
|
-
-
|
|
104
|
-
- ファイルの最後に
|
|
103
|
+
- ページフッターやサイドバーなどサイト全体で共通に扱いたい部分にMagick Penを埋め込みたい場合は、pen-keyにプレフィックス 'g-' を付けて下さい (例：g-snippet-1)。
|
|
104
|
+
- ファイルの最後に ```<%= render partial: 'magick_pen/load', locals: { editable: true } %>``` を記述します。
|
|
105
105
|
- editableが falseであれば、何もなかったように普通にページが表示されます。trueであれば編集可能になります。ユーザー権限などに応じてeditableの値をコントロールして下さい。
|
|
106
106
|
- id="magick-pen" の値を変更したい場合は、'magick_pen/load' の locals に、elementを渡すことができます。
|
|
107
107
|
|
|
108
108
|
```html
|
|
109
109
|
<div id="page">
|
|
110
|
-
|
|
111
|
-
:
|
|
112
|
-
:
|
|
113
|
-
|
|
110
|
+
<!- your markup -->
|
|
114
111
|
</div>
|
|
115
112
|
<%= render partial: 'magick_pen/load', locals: { editable: true, element: '#page" } %>
|
|
116
113
|
```
|
|
@@ -131,13 +128,56 @@ Magick Penは多言語対応になっていますので、ボタン名に日本
|
|
|
131
128
|
|
|
132
129
|
# デザインの適用
|
|
133
130
|
|
|
134
|
-
FontAwesome 5 を導入することをお奨めします。FontAwesomeが利用できる環境であればそのままボタン等にアイコンが表示されます。
|
|
131
|
+
[FontAwesome 5](https://fontawesome.com) を導入することをお奨めします。FontAwesomeが利用できる環境であればそのままボタン等にアイコンが表示されます。
|
|
135
132
|
|
|
136
|
-
Bootstrap 4、または、Bulma
|
|
133
|
+
[Bootstrap 4](https://getbootstrap.com/docs/4.6/getting-started/introduction/) 、または、[Bulma](https://bulma.io) を採用している場合は、各CSSフレームワークのデザインに準じて表示されます。独自デザインを適用する場合はCSSの調整が必要になります。
|
|
137
134
|
|
|
138
|
-
|
|
139
|
-
Magick Pen内で使用するボタンのクラス名やラベル名、アイコンのクラス名が定義されています。
|
|
135
|
+
デザインを修正するには、app/magick_pen/config.rb を適宜変更をして下さい。config.rbには、 Magick Pen内で使用するボタンのクラス名やラベル名、アイコンのクラス名が定義されています。
|
|
140
136
|
|
|
137
|
+
```ruby
|
|
138
|
+
module MagickPen
|
|
139
|
+
class Config
|
|
140
|
+
def self.default
|
|
141
|
+
{
|
|
142
|
+
date_format: "YYYY/MM/DD HH:mm",
|
|
143
|
+
select: {
|
|
144
|
+
class: "magick-pen-select",
|
|
145
|
+
label: {
|
|
146
|
+
version: I18n.t('magick_pen.version'),
|
|
147
|
+
original: I18n.t('magick_pen.original'),
|
|
148
|
+
current: I18n.t('magick_pen.current'),
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
buttons: {
|
|
152
|
+
# Button Class - compatible width Bootstrap and Bulma)
|
|
153
|
+
# Icon Class - compatible with Fontawesome 5
|
|
154
|
+
edit: {
|
|
155
|
+
class: "btn btn-primary btn-sm button is-primary is-small",
|
|
156
|
+
icon: "fas fa-edit",
|
|
157
|
+
label: I18n.t('magick_pen.buttons.edit')
|
|
158
|
+
},
|
|
159
|
+
update: {
|
|
160
|
+
class: "btn btn-primary btn-sm button is-primary is-small",
|
|
161
|
+
icon: "fas fa-upload",
|
|
162
|
+
label:I18n.t('magick_pen.buttons.update')
|
|
163
|
+
},
|
|
164
|
+
cancel: {
|
|
165
|
+
class: "btn btn-secondary btn-sm button is-light is-small",
|
|
166
|
+
icon: "fas fa-times",
|
|
167
|
+
label: I18n.t('magick_pen.buttons.cancel')
|
|
168
|
+
},
|
|
169
|
+
preview: {
|
|
170
|
+
class: "btn btn-primary btn-sm button is-primary is-small",
|
|
171
|
+
icon: "fas fa-eye",
|
|
172
|
+
label: I18n.t('magick_pen.buttons.preview')
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
end
|
|
177
|
+
end
|
|
178
|
+
end
|
|
179
|
+
|
|
180
|
+
```
|
|
141
181
|
|
|
142
182
|
|
|
143
183
|
# サンプルプロジェクト
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
module MagickPen
|
|
2
|
+
class Config
|
|
3
|
+
def self.default
|
|
4
|
+
{
|
|
5
|
+
date_format: "YYYY/MM/DD HH:mm",
|
|
6
|
+
select: {
|
|
7
|
+
class: "magick-pen-select",
|
|
8
|
+
label: {
|
|
9
|
+
version: I18n.t('magick_pen.version'),
|
|
10
|
+
original: I18n.t('magick_pen.original'),
|
|
11
|
+
current: I18n.t('magick_pen.current'),
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
buttons: {
|
|
15
|
+
# Button Class - compatible width Bootstrap and Bulma)
|
|
16
|
+
# Icon Class - compatible with Fontawesome 5
|
|
17
|
+
edit: {
|
|
18
|
+
class: "btn btn-primary btn-sm button is-primary is-small",
|
|
19
|
+
icon: "fas fa-edit",
|
|
20
|
+
label: I18n.t('magick_pen.buttons.edit')
|
|
21
|
+
},
|
|
22
|
+
update: {
|
|
23
|
+
class: "btn btn-primary btn-sm button is-primary is-small",
|
|
24
|
+
icon: "fas fa-upload",
|
|
25
|
+
label:I18n.t('magick_pen.buttons.update')
|
|
26
|
+
},
|
|
27
|
+
cancel: {
|
|
28
|
+
class: "btn btn-secondary btn-sm button is-light is-small",
|
|
29
|
+
icon: "fas fa-times",
|
|
30
|
+
label: I18n.t('magick_pen.buttons.cancel')
|
|
31
|
+
},
|
|
32
|
+
preview: {
|
|
33
|
+
class: "btn btn-primary btn-sm button is-primary is-small",
|
|
34
|
+
icon: "fas fa-eye",
|
|
35
|
+
label: I18n.t('magick_pen.buttons.preview')
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
end
|
|
40
|
+
end
|
|
41
|
+
end
|
|
@@ -1,49 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
module MagickPen
|
|
2
|
+
class Snippet < ApplicationRecord
|
|
3
|
+
has_paper_trail on: [:create, :update]
|
|
4
|
+
validates :pen_key, presence: true
|
|
5
|
+
validates_uniqueness_of :pen_key, conditions: -> { where(is_global: true) }
|
|
6
|
+
validates :action_name, presence: true, if: -> { is_global == false }
|
|
7
|
+
validates :controller_name, presence: true, if: -> { is_global == false }
|
|
8
|
+
validates_uniqueness_of :pen_key, scope:[ :action_name, :controller_name ], conditions: -> { where(is_global: false) }
|
|
9
|
+
validates :content, presence: true
|
|
10
|
+
validates :original_content, presence: true
|
|
2
11
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
validates_uniqueness_of :pen_key, conditions: -> { where(is_global: true) }
|
|
6
|
-
validates :action_name, presence: true, if: -> { is_global == false }
|
|
7
|
-
validates :controller_name, presence: true, if: -> { is_global == false }
|
|
8
|
-
validates_uniqueness_of :pen_key, scope:[ :action_name, :controller_name ], conditions: -> { where(is_global: false) }
|
|
9
|
-
validates :content, presence: true
|
|
10
|
-
validates :original_content, presence: true
|
|
11
|
-
|
|
12
|
-
class << self
|
|
13
|
-
def config
|
|
14
|
-
{
|
|
15
|
-
"date_format": "YYYY/MM/DD HH:mm",
|
|
16
|
-
"select": {
|
|
17
|
-
"class": "magick-pen-select",
|
|
18
|
-
"label": {
|
|
19
|
-
"version": I18n.t('magick_pen.version'),
|
|
20
|
-
"original": I18n.t('magick_pen.original'),
|
|
21
|
-
"current": I18n.t('magick_pen.current'),
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
"buttons": {
|
|
25
|
-
"edit": {
|
|
26
|
-
"class": "btn btn-primary btn-sm button is-primary is-small",
|
|
27
|
-
"icon": "fas fa-edit",
|
|
28
|
-
"label": I18n.t('magick_pen.buttons.edit')
|
|
29
|
-
},
|
|
30
|
-
"update": {
|
|
31
|
-
"class": "btn btn-primary btn-sm button is-primary is-small",
|
|
32
|
-
"icon": "fas fa-upload",
|
|
33
|
-
"label":I18n.t('magick_pen.buttons.update')
|
|
34
|
-
},
|
|
35
|
-
"cancel": {
|
|
36
|
-
"class": "btn btn-secondary btn-sm button is-light is-small",
|
|
37
|
-
"icon": "fas fa-times",
|
|
38
|
-
"label": I18n.t('magick_pen.buttons.cancel')
|
|
39
|
-
},
|
|
40
|
-
"preview": {
|
|
41
|
-
"class": "btn btn-primary btn-sm button is-primary is-small",
|
|
42
|
-
"icon": "fas fa-eye",
|
|
43
|
-
"label": I18n.t('magick_pen.buttons.preview')
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}
|
|
12
|
+
def self.config
|
|
13
|
+
Config.default
|
|
47
14
|
end
|
|
48
15
|
end
|
|
49
16
|
end
|
|
@@ -2,6 +2,9 @@ require "rails/generators"
|
|
|
2
2
|
|
|
3
3
|
module MagickPen
|
|
4
4
|
class InstallGenerator < Rails::Generators::Base
|
|
5
|
+
|
|
6
|
+
source_root File.expand_path('../../../../app/models/magick_pen', __FILE__)
|
|
7
|
+
|
|
5
8
|
class_option "with-migrate", type: :boolean
|
|
6
9
|
|
|
7
10
|
def start
|
|
@@ -23,6 +26,11 @@ module MagickPen
|
|
|
23
26
|
end
|
|
24
27
|
end
|
|
25
28
|
|
|
29
|
+
def copy_config
|
|
30
|
+
file = File.join(Rails.root,'app','models','magick_pen', 'config.rb')
|
|
31
|
+
template 'config.rb', file
|
|
32
|
+
end
|
|
33
|
+
|
|
26
34
|
def run_migrations
|
|
27
35
|
return unless options["with-migrate"]
|
|
28
36
|
puts "Running rake db:migrate"
|
data/lib/magick_pen/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: magick_pen
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Kazuo Matsunaga
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2021-05-
|
|
11
|
+
date: 2021-05-06 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -55,6 +55,7 @@ files:
|
|
|
55
55
|
- README.md
|
|
56
56
|
- Rakefile
|
|
57
57
|
- app/controllers/magick_pen/snippets_controller.rb
|
|
58
|
+
- app/models/magick_pen/config.rb
|
|
58
59
|
- app/models/magick_pen/snippet.rb
|
|
59
60
|
- app/views/magick_pen/_config.html.erb
|
|
60
61
|
- app/views/magick_pen/_load.html.erb
|
|
@@ -82,7 +83,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
82
83
|
requirements:
|
|
83
84
|
- - ">="
|
|
84
85
|
- !ruby/object:Gem::Version
|
|
85
|
-
version: '
|
|
86
|
+
version: '2.6'
|
|
86
87
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
87
88
|
requirements:
|
|
88
89
|
- - ">="
|