magick_pen 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 5e8a29ab1a7402988822d6e68d017351539e316a76fe77470768e158e868e9fe
+  data.tar.gz: fa20ab13727f40e69dc9e63d257a35f0935ea5a68ebc1b40ac040c2f4d861045
+SHA512:
+  metadata.gz: 0e6d2318e7c958864f3dca9c077e627afd712397b3398977597cdf14741ee251df796b264a558ce106e6fed4a97d0e58c62ae0b93aa764ed37eaf7f1f7685268
+  data.tar.gz: d100c281eb352c4cf0a8cbf4e2add3851bab1b4bb6dce1b993bf5e3440ce4c8d85f846b14e9ad0adc9eca1447c1b515c148bba8c4c8d933d0e779447ac97ca37

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2021 Kazuo Matsunaga
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,155 @@
+# Magick Pen
+
+Magick Penは、Railsプロジェクトに組み込んで利用できるGemのプラグインです。 
+テンプレートファイル(.erbファイル)の任意の部分を <vue-magick-pen> 〜 </vue-magick-pen> で囲むだけで、Webページから直接変更ができるようになります。
+
+また、変更内容を履歴管理していますので、過去の内容に戻すことも簡単です。
+
+<img src="https://user-images.githubusercontent.com/2704723/117098232-dbe10400-ada8-11eb-8d50-e8dd87365a4b.gif"/>
+
+
+## Installation
+
+あなたのRailsプロジェクトの Gemfiie に magick_penを追加します。
+
+```ruby
+gem 'magick_pen'
+```
+
+bundleを更新して、Magick Penのインストールを実行します。
+
+```bash
+$ bundle
+$ rails g magick_pen:install  
+```
+
+## 準備
+
+ここでは、Rails Sprocketsを使ってアセットコンパイルして利用する方法を説明します。
+
+### app/assets/stylesheets/application.css
+
+nodeモジュールからmagick penのcssを読み込みます。
+
+```css
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ 
+ *= require "vue-magick-pen/dist/vue-magick-pen"  
+ */
+ ```
+
+### app/assets/javascript/application.js
+
+nodeモジュールからvue.jsと magick penのVueコンポーネントを読み込みます。
+
+
+```javascript
+/*
+
+//= require vue/dist/vue
+//= require vue-magick-pen/dist/vue-magick-pen.umd
+
+*/
+ ```
+
+
+### app/views/layouts/application.html.erb
+
+```html
+  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+```
+
+layouts/application.html.erb から application.jsと application.cssを読み込めば準備は完了です。
+
+# ページを作成する
+
+### app/views/xxxxx/index.html.erb
+
+任意のコントローラー、アクションを作成し、テンプレートファイルをマークアップします。
+
+```html
+<div id="magick-pen">
+    <h1>Title</h1>
+    <div>
+        <magick-pen pen-key="snippet-1">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+            Mauris pellentesque malesuada convallis.
+            Quisque condimentum ac odio ut congue. Integer ultrices a erat sed hendrerit.
+        </magick-pen>
+    </div>
+
+    <div>
+        <magick-pen pen-key="snippet-2">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Mauris pellentesque malesuada convallis.
+            Quisque condimentum ac odio ut congue. Integer ultrices a erat sed hendrerit.
+        </magick-pen>
+    </div>
+</div>
+
+<%= render partial: 'magick_pen/load', locals: { editable: true } %>
+
+```
+
+マークアップのルールは以下の通りです。
+- id="magick-pen" で 囲った部分が有効になります。この範囲内であれば、何か所でも Magick Pen を埋め込めます。
+- magick penを埋め込みたい部分を <vue-magick-pen> 〜 </vue-magick-pen> で囲みます。
+- この時、キーとなる文字列を pen-key属性に設定して下さい。
+- pen-key は (コントローラー名＋アクション名) のスコープでユニークとなるようにして下さい。別コントローラー、別アクションであれば、同じpen-keyでも別物として扱われます。
+- ページフッターやサイドバーなどサイト全体で共通に扱いたい部分でMagick Penを埋め込みたい場合は、pen-keyにプレフィックス 'g-' を付けて下さい (例：g-snippet-1)。
+- ファイルの最後に  <%= render partial: 'magick_pen/load', locals: { editable: true } %>  を記述します。
+- editableが falseであれば、何もなかったように普通にページが表示されます。trueであれば編集可能になります。ユーザー権限などに応じてeditableの値をコントロールして下さい。
+- id="magick-pen" の値を変更したい場合は、'magick_pen/load' の locals に、elementを渡すことができます。
+
+```html
+<div id="page">
+    :
+    :
+    :
+    
+</div>
+<%= render partial: 'magick_pen/load', locals: { editable: true, element: '#page" } %>
+```
+
+Magick Penは多言語対応になっていますので、ボタン名に日本語が表示されない場合は、config/application.rbに以下の設定をします。
+
+```ruby
+  class Application < Rails::Application
+    :
+    :    
+    I18n.available_locales = %i(ja en)
+    I18n.enforce_available_locales = true
+    I18n.default_locale = :ja
+  end
+```
+
+
+
+# デザインの適用
+
+FontAwesome 5 を導入することをお奨めします。FontAwesomeが利用できる環境であればそのままボタン等にアイコンが表示されます。
+
+Bootstrap 4、または、Bulma を適用した場合は、各CSSフレームワークのデザインに準じて表示されます。独自デザインを適用する場合は、CSSの調整が必要になります。
+
+gemバンドル内の magick_pen/app/models/magick_pen/snippet.rb を プロジェクトにコピーして適宜変更をして下さい。snippet.rbには、
+Magick Pen内で使用するボタンのクラス名やラベル名、アイコンのクラス名が定義されています。
+
+
+
+# サンプルプロジェクト
+
+[ こちら ]( https://github.com/kazuomatz/magick_pen_demo )にサンプルのRailsプロジェクトがあります。
+
+
+
+# 動作環境
+- Ruby 2.6 〜 3.0
+- Rails 6.0 / 6.1
+
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,18 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/controllers/magick_pen/snippets_controller.rb

@@ -0,0 +1,73 @@
+class MagickPen::SnippetsController < ApplicationController
+  protect_from_forgery
+
+  def update
+    begin
+      snippet = find_snippet(permitted_attr)
+      if snippet.nil?
+        snippet = MagickPen::Snippet.create!(permitted_attr)
+      else
+        snippet.update!(permitted_attr)
+      end
+      render json: {
+          status: 200,
+          snippet: {
+            pen_key: snippet.pen_key,
+            id: snippet.id,
+            versions:  (snippet.versions.order('id desc').map { |v| (v.event == "create" || v.event == "update") ? { id:v.id, date: v.created_at } : nil }).compact
+          }
+      }
+    rescue => e
+      render json: { status: 500, message: e.message }
+    end
+  end
+
+  def version
+    snippet = find_snippet(params)
+    if snippet.nil?
+      render json:  { status: 404 }
+      return
+    end
+    if params[:version_id].to_i == 0
+      content = snippet.content
+      render json: { status: 200, snippet: {pen_key: snippet.pen_key, id: snippet.id, content: content} }
+    else
+      version = snippet.versions.where(id: params[:version_id]).first
+      if version.present?
+        if version.event == 'update'
+          snippet = version.reify
+          content = snippet.content
+        else
+          content = snippet.original_content
+        end
+        render json: { status: 200, snippet: {pen_key: snippet.pen_key, id: snippet.id, content: content} }
+      else
+        render json: { status: 404 }
+      end
+    end
+  end
+
+  private
+
+  def permitted_attr
+    if @_permitted_attr
+      @_permitted_attr
+    else
+      @_permitted_attr =  params.require('magick_pen_snippet').permit(:pen_key, :action_name, :controller_name, :is_global, :content, :original_content)
+    end
+  end
+
+  def find_snippet(snippet_pram)
+    if snippet_pram.nil?
+      snippet_pram = params
+    end
+    snippet =  MagickPen::Snippet.where(pen_key:  snippet_pram[:pen_key])
+    if snippet_pram[:is_global].blank? || snippet_pram[:is_global].downcase == 'false'
+      snippet = snippet.where(controller_name: snippet_pram[:controller_name], action_name: snippet_pram[:action_name])
+    else
+      snippet = snippet.where(is_global: true)
+    end
+    snippet.first
+  end
+
+end

data/app/models/magick_pen/snippet.rb

@@ -0,0 +1,49 @@
+class MagickPen::Snippet < ApplicationRecord
+
+  has_paper_trail on: [:create, :update]
+  validates :pen_key, presence: true
+  validates_uniqueness_of :pen_key, conditions: -> { where(is_global: true) }
+  validates :action_name, presence: true, if:  ->  { is_global == false }
+  validates :controller_name, presence: true, if: -> { is_global == false }
+  validates_uniqueness_of :pen_key, scope:[ :action_name, :controller_name ], conditions: -> { where(is_global: false) }
+  validates :content, presence: true
+  validates :original_content, presence: true
+
+  class << self
+    def config
+      {
+          "date_format": "YYYY/MM/DD HH:mm",
+          "select": {
+              "class": "magick-pen-select",
+              "label": {
+                  "version": I18n.t('magick_pen.version'),
+                  "original": I18n.t('magick_pen.original'),
+                  "current": I18n.t('magick_pen.current'),
+              }
+          },
+          "buttons": {
+              "edit": {
+                  "class": "btn btn-primary btn-sm button is-primary is-small",
+                  "icon": "fas fa-edit",
+                  "label": I18n.t('magick_pen.buttons.edit')
+              },
+              "update": {
+                  "class": "btn btn-primary btn-sm button is-primary is-small",
+                  "icon": "fas fa-upload",
+                  "label":I18n.t('magick_pen.buttons.update')
+              },
+              "cancel": {
+                  "class": "btn btn-secondary btn-sm button is-light is-small",
+                  "icon": "fas fa-times",
+                  "label": I18n.t('magick_pen.buttons.cancel')
+              },
+              "preview": {
+                  "class": "btn btn-primary btn-sm button is-primary is-small",
+                  "icon": "fas fa-eye",
+                  "label": I18n.t('magick_pen.buttons.preview')
+              }
+          }
+      }
+    end
+  end
+end

data/app/views/magick_pen/_config.html.erb

@@ -0,0 +1,133 @@
+<%
+  snippets = MagickPen::Snippet.includes(:versions).where(
+    ["(controller_name = ? and action_name = ?) || is_global = true", params[:controller], params[:action]]
+  )
+  contents = snippets.map {|snippet|
+    {
+      id: snippet.id,
+      pen_key: snippet.pen_key,
+      content: snippet.content,
+      versions: snippet.versions.map do |version|
+        (version.event == "create" || version.event == "update") ? { id: version.id, date: version.created_at} : nil
+      end.compact
+    }
+  }
+%>
+
+<script>
+  if (!Object.assign) {
+    Object.defineProperty(Object, 'assign', {
+      enumerable: false,
+      configurable: true,
+      writable: true,
+      value: function(target) {
+        'use strict';
+        if (target === undefined || target === null) {
+          throw new TypeError('Cannot convert first argument to object');
+        }
+
+        var to = Object(target);
+        for (var i = 1; i < arguments.length; i++) {
+          var nextSource = arguments[i];
+          if (nextSource === undefined || nextSource === null) {
+            continue;
+          }
+          nextSource = Object(nextSource);
+
+          var keysArray = Object.keys(Object(nextSource));
+          for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
+            var nextKey = keysArray[nextIndex];
+            var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
+            if (desc !== undefined && desc.enumerable) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+        return to;
+      }
+    });
+  }
+  var magickPenConfig = Object.assign ({
+    controller: '<%= params[:controller] %>',
+    action: '<%= params[:action] %>',
+    snippets: <%= raw contents.to_json %>,
+    editable: <%= defined?(editable) ? editable : false %>,
+    updateSnippet: function (key, content, originalContent, completed) {
+      var xhr = new XMLHttpRequest();
+      xhr.open('POST', '<%= magick_pen_snippet_path %>', true)
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState !== 4 || xhr.status !== 200) {
+        }
+        else {
+          var data = JSON.parse(xhr.responseText)
+          if (data.status === 200) {
+            var b = false
+            for( var i = 0 ; i < this.snippets.length ; i ++ ) {
+              if (this.snippets[i].id === data.snippet.id) {
+                this.snippets[i].versions = data.snippet.versions
+                b = true
+                if(completed) {
+                  completed(data.snippet)
+                }
+                break
+              }
+            }
+            if (!b) {
+              this.snippets.push(data.snippet)
+              if(completed) {
+                completed(data.snippet)
+              }
+            }
+          }
+        }
+      }.bind(this);
+
+      var data = new FormData()
+      data.append('authenticity_token', '<%= magick_pen_snippet_path %>')
+      data.append('magick_pen_snippet[pen_key]', key)
+      data.append('magick_pen_snippet[content]', content)
+      if (originalContent) {
+        data.append('magick_pen_snippet[original_content]', originalContent)
+      }
+      if (key.slice(0,2) === 'g-') {
+        data.append('magick_pen_snippet[is_global]',true)
+      }
+      else {
+        data.append('magick_pen_snippet[action_name]',this.action)
+        data.append('magick_pen_snippet[controller_name]',this.controller)
+        data.append('magick_pen_snippet[is_global]',false)
+      }
+      xhr.send(data);
+    },
+
+    getVersion: function (key, versionId, completed) {
+      var xhr = new XMLHttpRequest();
+      var url = "<%= magick_pen_snippet_version_path %>"
+      url += "?pen_key=" + key
+      url += "&version_id=" + versionId
+      if (key.slice(0,2) === 'g-') {
+        url += "&is_global=true"
+      }
+      else {
+        url += "&action_name=" + this.action
+        url += "&controller_name=" + this.controller
+        url += "&is_global=false"
+      }
+      xhr.open('GET', url, true);
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState !== 4 || xhr.status !== 200) {
+
+        }
+        else {
+          var data = JSON.parse(xhr.responseText)
+          if (data.status === 200) {
+            if (completed) {
+              completed(data.snippet)
+            }
+          }
+        }
+      }.bind(this)
+      xhr.send()
+    }
+  }, <%= raw MagickPen::Snippet.config.to_json %> )
+</script>

data/app/views/magick_pen/_load.html.erb

@@ -0,0 +1,7 @@
+<%= render partial: 'magick_pen/config', locals: { editable: editable } %>
+<script>
+  Vue.prototype.$magickPenConfig = magickPenConfig
+  new Vue({
+    el: '<%=  defined?(element) ? element : '#magick-pen' %>',
+  })
+</script>

data/config/locales/en.yml

@@ -0,0 +1,10 @@
+en:
+  magick_pen:
+    buttons:
+      edit: Edit
+      update: Update
+      preview: Preview
+      cancel: Cancel
+    version: Versions
+    original: Original
+    current: Current

data/config/locales/ja.yml

@@ -0,0 +1,10 @@
+ja:
+  magick_pen:
+    buttons:
+      edit: 編集
+      update: 更新
+      preview: 確認
+      cancel: 取消
+    original: オリジナル
+    current: 最新
+    version: バージョン

data/config/routes.rb

@@ -0,0 +1,8 @@
+Rails.application.routes.draw do
+
+  namespace :magick_pen do
+    post 'snippet', to: 'snippets#update'
+    get 'snippet/version', to: 'snippets#version'
+  end
+
+end

data/db/migrate/20210430221213_create_snippets_magick_pen.rb

@@ -0,0 +1,15 @@
+class CreateSnippetsMagickPen < ActiveRecord::Migration[6.0]
+  def change
+    create_table :magick_pen_snippets do |t|
+      t.string :pen_key, comment: 'key'
+      t.string :controller_name
+      t.string :action_name
+      t.boolean :is_global, default: false, comment: 'for Global Snippet'
+      t.text :content, comment: 'content html / limit: 4294967295 If necessary'
+      t.text :original_content, comment: 'Original content html / limit: 4294967295 If necessary'
+      t.timestamps
+    end
+    add_index :magick_pen_snippets, :pen_key
+    add_index :magick_pen_snippets, [:pen_key, :controller_name, :action_name], name: 'key_controller_action'
+  end
+end

data/lib/generators/magick_pen/install_generator.rb

@@ -0,0 +1,42 @@
+require "rails/generators"
+
+module MagickPen
+  class InstallGenerator < Rails::Generators::Base
+    class_option "with-migrate", type: :boolean
+
+    def start
+      puts "Start installing Magick Pen..."
+      puts "*" * 80 + "\n"
+    end
+
+    def check_paper_trail
+      puts "Paper Trail Install...."
+      Dir.chdir(Rails.root) do
+        `bundle exec rails generate paper_trail:install`
+      end
+    end
+
+    def install_migrations
+      puts "Copying over Magick Pen migrations..."
+      Dir.chdir(Rails.root) do
+        `bundle exec rake magick_pen_engine:install:migrations`
+      end
+    end
+
+    def run_migrations
+      return unless options["with-migrate"]
+      puts "Running rake db:migrate"
+      `bundle exec rake db:migrate`
+    end
+
+    def install_npm
+      puts "Running npm install vue_magick_pen"
+      `npm install vue-magick-pen`
+    end
+
+    def finished
+      puts "\n" + ("*" * 80)
+      puts "Done! Magick Pen has been successfully installed."
+    end
+  end
+end

data/lib/magick_pen.rb

@@ -0,0 +1,8 @@
+require "magick_pen/version"
+require "magick_pen/engine"
+require 'paper_trail'
+module MagickPen
+  def self.table_name_prefix
+    'magick_pen_'
+  end
+end

data/lib/magick_pen/engine.rb

@@ -0,0 +1,4 @@
+module MagickPen
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/magick_pen/version.rb

@@ -0,0 +1,3 @@
+module MagickPen
+  VERSION = '0.1.0'
+end

data/lib/tasks/magick_pen_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :magick_pen do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,96 @@
+--- !ruby/object:Gem::Specification
+name: magick_pen
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Kazuo Matsunaga
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2021-05-05 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6.2'
+- !ruby/object:Gem::Dependency
+  name: paper_trail
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: The part of the erb file enclosed in <vue-magick-pen> tags can be edited.
+email:
+- kazuomatz@lifecode.jp
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/controllers/magick_pen/snippets_controller.rb
+- app/models/magick_pen/snippet.rb
+- app/views/magick_pen/_config.html.erb
+- app/views/magick_pen/_load.html.erb
+- config/locales/en.yml
+- config/locales/ja.yml
+- config/routes.rb
+- db/migrate/20210430221213_create_snippets_magick_pen.rb
+- lib/generators/magick_pen/install_generator.rb
+- lib/magick_pen.rb
+- lib/magick_pen/engine.rb
+- lib/magick_pen/version.rb
+- lib/tasks/magick_pen_tasks.rake
+homepage: https://github.com/kazuomatz/magick_pen
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/kazuomatz/magick_pen
+  source_code_uri: https://github.com/kazuomatz/magick_pen
+  changelog_uri: https://github.com/kazuomatz/magick_pen
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.3
+signing_key: 
+specification_version: 4
+summary: Plug-in that allows you to edit a Web page to direct.
+test_files: []