Enable image drop on panelfield

Kirby 2 Solved ✅
1

I am building a custom field; YAKME (Yet Another Kirby Markdown Editor).

This one is pretty cool, it has real time preview, side-by-side editing, wordcount, real time text-check / -correction, etc…

There’s one thing I can not get active; image drag / drop from the left sidebar.

Is there any classname or action I need to trigger / bind in order to realize this?

I thought I had to set ui-droppable or something, but I can’t figure out how to make this field support the drag and drop of images (images entered by hand do work, preview included).

4 Likes
2

Anyone?

…the output…

Pasted image707×928 91.3 KB

3

It’s hard to help here without the code…
Are you extending the textarea field?
Have you checked how other textarea plugins do it?

I’m really keen to help but feel like I’m wearing shackles behind an opaque screen a mile away from the actual issue :stuck_out_tongue:

4

I’ve checked these fields;

But I can not see any logic… the only thing those fields “share” is the ui-droppable class - which is not working when I add it to my field :slight_smile:

This is the code I use right now, but I don’t think it’s help-full… a field must be fired to “recognize” a drag/drop action (I think), but I can’t figure out how that is fired…

I will release the field very soon, so everyone can fork / change the code - where needed.


class YakmeField extends TextField {

  static public $assets = array(
    'css' => array(
      'yakme.css',
      'kirby.css'
    ),
    'js' => array(
      'yakme.js',
      'kirby.js'
    )
  );

  public function content() {

    $content = parent::content();

    $yakme_height = c::get('yakme_height', 320);
    $yakme_height = $yakme_height < 1 ? $yakme_height = 'auto' : $yakme_height . 'px';
    $yakme_height = '<style>.yakme_wrapper .CodeMirror, .yakme_wrapper .CodeMirror-scroll {min-height: ' . $yakme_height . ';height: ' . $yakme_height . '}</style>';

    return $yakme_height . $content;

  }

  public function input() {

    $input = parent::input();
    $input->tag('textarea');
    $input->removeAttr('type');
    $input->removeAttr('value');
    $input->html($this->value() ? htmlentities($this->value(), ENT_NOQUOTES, 'UTF-8') : false);
    $input->addClass('yakme_editor');
    $input->data('field','yakmefield');

    return $input;

  }
}

?>
1 Like
5

###Okay - I figured it out myself, I guess…

Kirby is using the default HTML 5 / drag and drop - I guess, which allows it to bind a droppable action to certain fields.

  yakme_field.parent().droppable({
    hoverClass: 'yakme_field_over',
    drop: function(e, ui) {
      var draggable = ui.draggable;
      yakme_text(index, draggable.data('text'));
    }
  });

var yakme_text = function(index, data) {

  var cm = $('.CodeMirror')[index].CodeMirror;
  var doc = cm.getDoc();
  var cursor = doc.getCursor();
  var line = doc.getLine(cursor.line);
  var pos = {
      line: cursor.line,
      ch: line.length - 1
  }

  doc.replaceRange(data, pos);

}

The example above, listens to every draggable item (e.g. the assets in the asset-list, sets a :hover class when hovering and a function when dropping a draggable item.

The yakme_field.parent() is the listener in this case…

Will update the YAKME Field - when done!

yakme_drag-and-drop.gif1680×1052 547 KB

YAKME - now with drag 'n drop…

2 Likes
6

Good job hunting down the issue and finding the solution !

7

Yeah - there were several approaches for this problem (taking a look at other plugins which encountered the same problem).

But I decided to stay close to the source (HTML 5 / drag and drop - I guess) so I could solve it with only 4 or 5 simple lines of code :slight_smile:

It just listens to the default draggable items - set by Kirby itself and parses the image data text when you drop it…

Thx!

- edit - I even had to read the manual at W3Schools - which everbody things is awefull :stuck_out_tongue:

1 Like