Add method to disable event

[wize-wiz]

Like in #9, I too was searching for a solution to disable the event when editing a resource.

E.g. I have a news resource where the title generates a slug, but on edit this slug should not be changed. Now I could simply do an if/else if the request is an update or not, and just replace the Slug field with a disabled text field, but easier would be if I could just add a method like disableEvents($disable = true) with a default set to true.

I don't know what you (@drobee) think about this idea, but I did a quick edit and came with this solution.

src/Slug.php

// constructor
public function __construct(...) {
  ...   
  $this->disableEvents(false); // default to false
  ...
}

// method
public function disableEvents(bool $disable = true) {
  // I choose `meta` because somehow setOptions() sets a boolean to string "1" instead of `true`.
  return $this->withMeta(['disableEvents' => $disable]);
}

resources/js/components/Slug/FormField.vue

Changed the mounted method for a return if event should not be used.

    mounted() {
        // return if event should be disabled
        if(this.field.disableEvents) {
            return;
        }
        const eventType = this.field.options.event || 'keyup';
        Nova.$on('field-update-' + eventType + '-' + this.field.name, ({value}) => {
          this.generateSlug(value);
    },

I could make PR if you agree.

---

Another thing, I also added a delay for the generate slug request.

src/Slug.php

// added eventDelay to default options
protected $options = [
    'event' => 'keyup',
    'eventDelay' => 200
];

// method
public function eventDelay(int $delay) {
  return $this->setOption('eventDelay', $delay);
}

Mounted function with delay

// return if event disabled
if(this.field.disableEvents) {
    return;
}
this.eventDelayTimeout = null;
const eventType = this.field.options.event || 'keyup';
Nova.$on('field-update-' + eventType + '-' + this.field.name, ({value}) => {
    // clear timeout if any
    if(this.eventDelayTimeout !== null) { clearTimeout(this.eventDelayTimeout); }
    // delay generation of slug
    this.eventDelayTimeout = setTimeout((function() {
        this.generateSlug(value)
    }).bind(this), this.options.eventDelay);
})

[bernhardh]

In the meanwhile, you could do it the dirty way - see https://github.com/drobee/nova-sluggable/issues/9#issuecomment-603823117

[drobee]

@wize-wiz I'm sorry I've been neglecting this repo. I like your idea, it's simple yet effective. Would you still like to make a PR with this? I'd be grateful!

[wize-wiz]

@wize-wiz I'm sorry I've been neglecting this repo. I like your idea, it's simple yet effective. Would you still like to make a PR with this? I'd be grateful!

@drobee I'll do 👍