lutim/templates/index.html.ep

% # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
% my $scheme = (defined(config('https')) && config('https')) ? 'https' : 'http';
<div class="messages">
% if (max_delay != 0) {
    <div class="alert alert-warning text-center">
        <button type="button" class="close jsonly" data-dismiss="alert" aria-hidden="true">&times;</button>
        <strong><%=l('max_delay', max_delay) %></strong>
    </div>
% }
% if ($self->config->{always_encrypt}) {
    <p><%=l 'always_encrypt' %></p>
% }
% if (defined(flash('short'))) {
    <div class="alert alert-success">
        <strong><%= flash('filename') %></strong>
        <ul class="no-bullet">
            <li><i class="icon icon-eye" title="<%=l 'view-link' %>"></i> <%= link_to url_for('/')->base->scheme($scheme)->to_abs.'/'.flash('short') => begin %><%= url_for('/')->base->scheme($scheme)->to_abs.'/'.flash('short') %><%= end %></li>
            <li><i class="icon icon-download" title="<%=l 'download-link' %>"></i> <%= link_to url_for('/')->base->scheme($scheme)->to_abs.'/'.flash('short').'?dl' => begin %><%= url_for('/')->base->scheme($scheme)->to_abs.'/'.flash('short').'?dl' %><%= end %></li>
            <li><i class="icon icon-touiteur" title="<%=l 'twitter-link' %>"></i> <%= link_to url_for('/')->base->scheme($scheme)->to_abs.'/'.flash('short').'?t' => begin %><%= url_for('/')->base->scheme($scheme)->to_abs.'/'.flash('short').'?t' %><%= end %></li>
        </ul>
    </div>
% }
% if (defined(flash('msg'))) {
    <div class="alert alert-danger">
        <strong><%=l 'some-bad' %></strong><br>
        <%= flash('filename') %> <%= flash('msg') %>
    </div>
% }
</div>

<noscript>
    <form class="form" role="form" method="POST" action="<%== url_for('add') %>" enctype="multipart/form-data">
    <div class="form-group form-inline">
        <select name="delete-day" class="form-control">
            % for my $delay (qw/0 1 7 30 365/) {
                <option value="<%= $delay %>" <%== is_selected($delay) %>><%=l "delay_$delay" %></option>
            % }
        </select>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="first-view"> <%=l 'delete-first' %>
            </label>
            <label class="always-encrypt">
                <input type="checkbox" name="crypt"> <%=l 'crypt_image' %>
            </label>
        </div>
    </div>
    <div class="form-group">
        <label for="lutim-file"><%=l 'upload_image' %></label>
        <input type="file" name="file" id="lutim-file">
    </div>
    <div class="form-group">
        <label for="lutim-file-url"><%=l 'upload_image_url' %></label>
        <input type="url" name="lutim-file-url" placeholder="<%=l 'image_url' %>">
        <p class="help-block"><%=l 'image-only' %></p>
    </div>
    <%= submit_button l('go'), class => 'btn btn-default btn-primary', id => 'submitbutton' %>
</form>
</noscript>

<!-- D&D Zone-->
<div class="jsonly">
    <div class="form-group form-inline">
        <select id="delete-day" class="form-control">
            % for my $delay (qw/0 1 7 30 365/) {
                <option value="<%= $delay %>" <%== is_selected($delay) %>><%=l "delay_$delay" %></option>
            % }
        </select>
        <div class="checkbox">
            <label>
                <input type="checkbox" id="first-view"> <%=l 'delete-first' %>
            </label>
            <label class="always-encrypt">
                <input type="checkbox" id="crypt"> <%=l 'crypt_image' %>
            </label>
        </div>
    </div>
    <div id="drag-and-drop-zone" class="uploader">
        <div><%=l 'drag-n-drop' %></div>
        <div class="or"><%=l 'or' %></div>
        <div class="browser">
            <label>
                <span><%=l 'file-browser' %></span>
                <input type="file" name="files[]" multiple="multiple" title='<%=l 'file-browser' %>'>
            </label>
        </div>
    </div>
    <p class="help-block"><%=l 'image-only' %></p>
    <form class="form-horizontal" role="form" method="POST" action="<%== url_for('add') %>">
        <div class="form-group">
            <span class="col-sm-3"><span class="hidden-spin" style="font-size:200%; display:none;" > <i class="icon-spinner animate-spin pull-right"></i></span><label for="lutim-file-url" class="control-label pull-right"><%=l 'upload_image_url' %></label></span>
            <div class="col-sm-9">
                <input type="url" name="file-url" class="form-control" id="lutim-file-url" placeholder="<%=l 'image_url' %>">
            </div>
        </div>
        <a href="#" class="btn btn-default btn-primary pull-right" id="file-url-button"><%=l 'go' %></a>
    </form>
</div>
<!-- /D&D Zone -->

%= javascript 'js/dmuploader.min.js'
%= javascript begin
    function link(url, dl) {
        if (dl !== '') {
            url = url+'?'+dl;
        }
        return '<a href="<%== url_for('index')->base->scheme($scheme)->to_abs() %>/'+url+'"><%== url_for('index')->base->scheme($scheme)->to_abs() %>/'+url+'</a>';
    }
    function message(success, msg) {
        if(success) {
            return '<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><strong>'
                +msg.filename
                +'</strong><ul class="no-bullet"><li><i class="icon icon-eye" title="<%=l 'view-link' %>"></i> '
                +link(msg.short, '')
                +'</a></li><li><i class="icon icon-download" title="<%=l 'download-link' %>"></i> '
                +link(msg.short, 'dl')
                +'</a></li><li><i class="icon icon-touiteur" title="<%=l 'twitter-link' %>"></i> '
                +link(msg.short, 't')
                +'</li></div>';
        } else {
            return '<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><strong><%=l 'some-bad' %></strong><br>'
                +msg.filename
                +"<br>"
                +msg.msg
                +'</div>';
        }
    }
    function bindddz(firstview, deleteday) {
        $('#drag-and-drop-zone').dmUploader({
            url: '<%== url_for('add') %>',
            dataType: 'json',
            allowedTypes: 'image/*',
            maxFileSize: <%= $max_file_size %>,
            onNewFile: function(id, file){
                $(".messages").append('<div id="'+id+'-div">'+file.name+'<br><div class="progress"><div id="'+id+'"class="progress-bar progress-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"><span id="'+id+'-text" class="pull-left" style="padding-left: 10px;"> 0%</span></div></div></div>');
            },
            onUploadProgress: function(id, percent){
                var percentStr = ' '+percent+'%';
                $('#'+id).prop('aria-valuenow', percent);
                $('#'+id).prop('style', 'width: '+percent+'%;');
                $('#'+id+'-text').html(percentStr);

            },
            onUploadSuccess: function(id, data){
                $('#'+id+'-div').remove();
                $(".messages").append(message(data.success, data.msg));
            },
            onUploadError: function(id, message){
                $(".messages").append(message(false, ''));
            },
            onFileSizeError: function(file){
                $(".messages").append(message(false, { filename: file.name, msg: '<%= l('file_too_big', $max_file_size) %>'}));
            }
        });
    }

    function upload_url() {
        var val = $("#lutim-file-url").val();
        if (val !== undefined && val !== "") {
            $("#lutim-file-url").prop('disabled', 'disabled');
            $(".hidden-spin").css('display', 'block');
            console.log(val);
            $.ajax({
                url  : '<%== url_for('add') %>',
                type : "POST",
                data : {
                    'lutim-file-url' : val,
                    'format'         : 'json',
                    'first-view'     : ($("#first-view").prop('checked')) ? 1 : 0,
                    'crypt'          : ($("#crypt").prop('checked')) ? 1 : 0,
                    'delete-day'     : $("#delete-day").val()
                },
                success: function(data) {
                    $(".messages").append(message(data.success, data.msg));
                    if (data.success) {
                        $("#lutim-file-url").val('');
                    }
                },
                error: function() {
                    $(".messages").append(message(false, ''));
                },
                complete: function() {
                    $("#lutim-file-url").prop('disabled', '');
                    $(".hidden-spin").css('display', 'none');
                }
            });
        } else {
            console.log("fhdsjnf");
        }
    }

    $('document').ready(function() {
        var firstview = ($("#first-view").prop('checked')) ? 1 : 0;
        var deleteday = ($("#delete-day").prop('checked')) ? 1 : 0;

        bindddz(firstview, deleteday);

        $("#file-url-button").on("click", upload_url);
    });
% end