stories ossn

<div>
    <label><?php echo ossn_print('stories:title');?></label>
    <input type="text" name="title" multiple />
</div>
<div class="ossn-stories-add-button">
    <input type="file" name="images[]" multiple class="hidden" accept=".jpg,.png"/>

    <button type="button" id="ossn-stories-add-button-inner" class="btn btn-default btn-lg">
        <i class="fa fa-copy"></i> <?php echo ossn_print('photo:select'); ?>
    </button>
    <div class="images"><i class="fa fa-image"></i> <span class="count">0</span></div>
</div>

<?php if(!ossn_is_xhr()){ ?>
<div>
    <input type="submit" value="<?php echo ossn_print('save');?>" class="btn btn-success" />
</div>
<?php } else { ?>
    <input type="submit" id="stories-add-submit" value="<?php echo ossn_print('save');?>" class="btn btn-success hidden" />
<?php } ?>

<script>
$(document).ready(function() {
    // When the add button is clicked, trigger the file input
    $('#ossn-stories-add-button-inner').click(function(e){
        e.preventDefault();
        $('input[type="file"][name="images[]"]').click();
    });

    // Handle file input change event
    $('input[type="file"][name="images[]"]').change(function(){
        // Update the displayed file count
        updateImageCount(this.files.length);
    });

    // Drag and Drop Events
    $('.ossn-stories-add-button').on({
        'dragover dragenter': function(e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).css('border', '3px dashed #009688'); // Highlight to indicate drop is possible
        },
        'dragleave': function(e) {
            $(this).css('border', '3px dashed #eee'); // Reset border when drag leaves
        },
        'drop': function(e) {
            e.preventDefault();
            $(this).css('border', '3px dashed #eee'); // Reset border on drop
            var files = e.originalEvent.dataTransfer.files; // Get dropped files
            var count = 0;
            // Filter files to only include .jpg and .png
            for (var i = 0; i < files.length; i++) {
                if (files[i].type === "image/jpeg" || files[i].type === "image/png") {
                    count++;
                }
            }
            updateImageCount(count); // Update the count of selected files
            // Note: You need to separately upload the files via AJAX or submit a form because direct assignment to input:file is not possible.
        }
    });

    // Function to update the displayed count of selected files
    function updateImageCount(count) {
        $('.images .count').text(count); // Display how many files were selected or dropped
    }
});
</script>


<style>
.ossn-stories-add-button{
    padding: 20px;
    text-align: center;
    border: 3px dashed #eee;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative; /* Voor drag & drop */
    overflow: hidden; /* Zorg ervoor dat niets buiten dit element gaat */
}
.ossn-stories-add-button .hidden {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}
</style>