Auto update when the select DOM is changed

[Humni]

This is a fairly large modification. This allows people to $.append("option") and $.remove("option") from the select input, and have the image-picker automatically update. This avoids people directly editing the image-picker through js and improves functionality.

How it works: By default, the auto updating is set to false. To enable set auto_update: true

To auto update the image picker, simple append or remove the options from the select which the image picker is bound to.

• This update also supports groups

[rvera]

Thanks for doing this, there seems to be an issue though.

• Remove an element (eg, the first one)
• The last element of the remaining elements doesn't get highlighted when clicking on it

Let me take a look if I can fix this before introducing your change.

[Humni]

No worries, I will have a play around as well to resolve those issues.

[Humni]

@rvera I have resolved several issues with this pull request and remerged in master to bring it up to date.

Adding and removing elements now works reliably. The remove function no longer relies on the image source and relies on the option value. It is a must that the option values are set for the auto-updating to work. Notes on the docs will be needed for this.

The highlighting bug also was resolved, there is a browser-based 'feature; that when you remove the first element from the select options, the browser automatically selects the next one. Because if this I recalled the sync to keep the highlighting in sync. Overall it just means it defaults to selecting the next item when removing the first item only.

Below is the code I used for testing this, might be useful for the docs:

<select id="image-picker" class="image-picker show-html">
  <option data-img-src="http://via.placeholder.com/350x350" data-img-class="first" data-img-alt="Page 1" value="1">  Page 1  </option>
  <option data-img-src="http://via.placeholder.com/350x350" data-img-alt="Page 2" value="2">  Page 2  </option>
  <option data-img-src="http://via.placeholder.com/350x350" data-img-alt="Page 3" value="3">  Page 3  </option>
  <option data-img-src="http://via.placeholder.com/350x350" data-img-alt="Page 4" value="4">  Page 4  </option>
  <option data-img-src="http://via.placeholder.com/350x350" data-img-alt="Page 5" value="5">  Page 5  </option>
  <option data-img-src="http://via.placeholder.com/350x350" data-img-alt="Page 6" value="6">  Page 6  </option>
  <option data-img-src="http://via.placeholder.com/350x350" data-img-alt="Page 7" value="7">  Page 7  </option>
  <option data-img-src="http://via.placeholder.com/350x350" data-img-alt="Page 8" value="8">  Page 8  </option>
  <option data-img-src="http://via.placeholder.com/350x350" data-img-alt="Page 9" value="9">  Page 9  </option>
  <option data-img-src="http://via.placeholder.com/350x350" data-img-alt="Page 10" value="10"> Page 10 </option>
  <option data-img-src="http://via.placeholder.com/350x350" data-img-alt="Page 11" value="11"> Page 11 </option>
  <option data-img-src="http://via.placeholder.com/350x350" data-img-alt="Page 12" data-img-class="last" value="12"> Page 12 </option>
</select>
<button onclick="addImage();" type="button">Add</button>
<button onclick="removeImage();" type="button">Remove</button>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="http://localhost/git/image-picker/image-picker/image-picker.min.js"></script>

<script>
$("select").imagepicker({
    auto_update : true
});

let val = 12;
function addImage(){
    val ++;

    let $option = $('<option />', {
            text: "An Image",
            "data-img-src" : "http://via.placeholder.com/350x350",
            "data-alt" : "Alt text",
            value: val
        });

    $("#image-picker").append($option)
}

function removeImage(){
    $("option","#image-picker").first().remove();
}
</script>