tadyjp/rendezvous

#post-form
  = form_for(@post, role: 'form') do |f|
    - if @post.errors.any?
      #error_explanation
        h2
          = pluralize(@post.errors.count, "error")
          |  prohibited this post from being saved:
        ul
          - @post.errors.full_messages.each do |msg|
            li= msg

    .row
      .col-xs-9
        .field
          .input-group
            span.input-group-addon= f.label :title
            = f.text_field :title, class: 'form-control mod-mdEditor-title'

        .field
          .input-group
            span.input-group-addon= f.label :tags
            = hidden_field :post, :tags, class: 'mod-mdEditor-tags', style: 'width:90%', value: @post.tags.map{ |_tag| _tag.name }.join(',')

      .col-xs-3
        p = f.submit class: 'btn btn-default js-disable-confirm-unload', id: 'save_button'
        p
          = f.check_box :is_draft
          = f.label :is_draft, " 下書き保存".html_safe
        p = f.date_select :specified_date

    .row
      .col-xs-6.editor-panel
        .panel.panel-default
          .panel-heading
            .btn-toolbar role="toolbar"
              .btn-group.btn-group-xs
                button.btn.btn-default.mod-mdEditor-btn-h1 type="button" title="Header level 1" H1
                button.btn.btn-default.mod-mdEditor-btn-h2 type="button" title="Header level 2" H2
                button.btn.btn-default.mod-mdEditor-btn-h3 type="button" title="Header level 3" H3
              .btn-group.btn-group-xs
                button.btn.btn-default.mod-mdEditor-btn-bold type="button" title="Text bold"
                  i.fa.fa-bold
                button.btn.btn-default.mod-mdEditor-btn-italic type="button" title="Text itelic"
                  i.fa.fa-italic
              .btn-group.btn-group-xs
                button.btn.btn-default.mod-mdEditor-btn-ol type="button" title="順序リスト"
                  i.fa.fa-list-ol
                button.btn.btn-default.mod-mdEditor-btn-ul type="button" title="リスト"
                  i.fa.fa-list-ul
                button.btn.btn-default.mod-mdEditor-btn-strikethrough type="button" title="打ち消し線"
                  i.fa.fa-strikethrough
              .btn-group.btn-group-xs
                button#uploadButton.btn.btn-default type="button" title="Upload"
                  | Upload
              .btn-group.btn-group-xs.pull-right.mode-editor
                button#uploadButton.btn.btn-default type="button"
                  i.fa.fa-angle-right
              .btn-group.btn-group-xs.pull-right.mode-split style="display:none"
                button#uploadButton.btn.btn-default type="button"
                  i.fa.fa-angle-left

          .panel-body.panel-body-nopadding style="position:relative"
            = f.text_area :body, class: 'mod-mdEditor-textarea mod-form-resizer-editor', placehoder: 'type your text....'

            #progress-wrapper style="display:none;position:absolute;bottom:0;z-index:1000;width:100%"
              .alert.alert-warning.fade.in style="margin-bottom:0"
                span.progress-title
                  | Uploading files...
                #progress style="height:20px;"
                  .progress-bar.progress-bar-success.progress-bar-striped.active role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"
                    | 0%

      .col-xs-6.preview-panel
        .panel.panel-default.preview-wrapper
          .panel-heading
            span Preview

          .panel-body.text-box.body.viewer.github.mod-mdEditor-preview.mod-form-resizer-preview

input#fileupload data-url="/apis/file_receiver" multiple="" name="files[]" style="display:none" type="file" /

- content_for :footer_js do
  javascript:
    // Bounce confirm.
    $.setConfirmUnload();

    // Mode change
    $('.mode-editor button').on('click', function(){
      $('.mode-editor').hide();
      $('.mode-split').show();
      $('.editor-panel').addClass('col-xs-12').removeClass('col-xs-6'); $('.preview-panel').hide();
    })
    $('.mode-split button').on('click', function(){
      $('.mode-split').hide();
      $('.mode-editor').show();
      $('.editor-panel').addClass('col-xs-6').removeClass('col-xs-12'); $('.preview-panel').show();
    })

    $('#post-form').mod_mdEditor({end_point: '/apis/markdown_preview'});

    $.mod_fileuploader({
      $input: $('#fileupload'),
      $textarea: $('.mod-mdEditor-textarea'),
      $progressWrapper: $('#progress-wrapper'),
      $progressBar: $('#progress .progress-bar')
    });

    // フォームサイズ調整
    $.mod_form_resizer({
      $editor: $('.mod-form-resizer-editor'),
      $preview: $('.mod-form-resizer-preview'),
      height_offset: 210
    })

    // Display upload dialog.
    $('#uploadButton').on('click', function(){
      $('input#fileupload').trigger('click');
    });

    // 下書き保存
    // TODO
    $('.btn-save-draft').on('click', function(e){
      e.preventDefault();
      var val = $('.mod-mdEditor-body').val();
      console.log(val);
    });

    // mention補完
    // TODO: mod-md-editorに入れる？
    $('textarea').textcomplete([
      { // html
        mentions: ['yuku_t'],
        match: /\B@([^\B]*)$/,
        search: function (term, callback) {
          $.getJSON('/apis/user_mention', { q: term })
            .done(function (resp) { callback(resp); })
            .fail(function ()     { callback([]);   });
        },
        index: 1,
        replace: function (mention) {
          return '@' + mention + ' ';
        }
      }
    ]).on({
      'textComplete:select': function (e, value) {
        console.log('textComplete:select ' + value);
      },
      'textComplete:show': function (e) {
        console.log('textComplete:show');
        $(this).data('autocompleting', true);
      },
      'textComplete:hide': function (e) {
        console.log('textComplete:hide');
        $(this).data('autocompleting', false);
      }
    });
    // .overlay([
    //   {
    //     match: /\B@\w+/g,
    //     css: {
    //       'background-color': '#d8dfea'
    //     }
    //   }
    // ]);


  css:
    .textcomplete-wrapper {
      width: 100%;
    }