HubSpot/Drop Hiding on resize

by bmh_ca

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgithub.com/HubSpot/drop/master/css/drop-theme-arrows-bounce-dark.css">
<link rel="stylesheet" href="https://rawgithub.com/HubSpot/drop/master/css/drop-theme-arrows-bounce.css">
<script src="https://rawgithub.com/HubSpot/tether/8f9df7e6e01dac3e57c80bcd880e4931660e8967/tether.js"></script>
<script src="https://rawgithub.com/HubSpot/drop/master/js/drop.js"></script>
<script id='X' type='text/x-script'>
    <div class='list-group'>
        <div class='list-group-item'>Item 1</div>
        <div class='list-group-item'>Item 2</div>
        <div class='list-group-item'>Item 3</div>
        <div class='list-group-item'>Item 4</div>
        <div class='list-group-item'>Item 5</div>
        <div class='list-group-item'>Item 6</div>
        <div class='list-group-item'>Item 7</div>
        <div class='list-group-item'>Item 8</div>
        <div class='list-group-item'>Item 9</div>
        <div class='list-group-item'>Item 10</div>
        <div class='list-group-item'>Item 11</div>
    </div>
</script>

<button type='button' class='btn btn-primary btn-lg' id='Y'>
    Drop!
</button>
<button type='button' class='btn btn-default' id='Z'>
    Reset
</button>

CSS

#Y {
    margin: 50px;
    margin-top: 300px;
    padding: 20px 80px;
}

body {
    height: 2000px;    
}

JavaScript

DROP_THEME = "drop-theme-arrows-bounce"

target = $("#Y")
template = $("#X")

drop = new Drop({
      target: target.get(0),
      classes: DROP_THEME,
      content: template.html(),
      position: "top center",
      openOn: null,
})

target.on("click", function () {
    $(drop.dropContent).find(".list-group-item").last().remove()
    drop.tether.position()
    return false // preventDefault; stopPropagation
})

$("#Z").on("click", function () {
    $(drop.dropContent).find(".list-group").html(template.html())
    drop.tether.position()
    return false
});

drop.open()