Page tree
Skip to end of metadata
Go to start of metadata

Allows sending feedback messages for your users.

Purpose

This feature allows for your users sending feedback messages to your admin panels. You can browse feedback messages in Newscoop backend (example.com/admin/feedback).

Usage

For implementation we will need two javascript librares (+jquery):

Html

<div style="display:none">
    <div id="feedback-form">
      <!-- show only for logged in users -->
      {{ if $gimme->user->logged_in }}
        <div class="popup-form">
        <form method="POST" id="feedback-form-form" action="/feedback/save">
            <h2><span>Feedback</span></h2>
            <fieldset>
                <ul>
                    <li>
                        <select class="topic" style="min-width: 200px;">
                            <option value="First topic">First topic</option>
                            <option value="Second topic">Second topic</option>
                        </select>
                    </li>
                    <li>
                        <label>Subject</label>
                        <input type="text" id="feedback-subject" name="subject">
                    </li>
                    <li>
                        <label>Message<i>*</i></label>
                        <textarea cols="" rows="" id="feedback-content" name="content"></textarea>
                    </li>
                    <li class="input-file red">
                        <div class="show-value"></div>
                        <input type="file" class="upload" />
                    </li>
                    <li>
                        <small><i>*</i>Required</small></p>
                    </li>
                    <li class="top-line">
                        <div class="file-holder"></div>
                        <input type="submit" class="submit" value="Submit">
                    </li>
                </ul>
            </fieldset>
        </form>
        </div>
    {{ else }}
    <h2>Only for logged in users</h2>
    <p style="text-align: center; font-size: 15px; font-weight: bold; padding-top: 10px;">Login <a href="{{ $view->url(['controller' => 'auth', 'action' =>'index'], 'default') }}">here</a></p>
    {{ /if }}
    </div>
</div>

And somewhere in page link for showing it.

<a href="#" class="show-feedback-form">Show Feedback</a>

Javascript

$(document).ready(function(){
    $('a.show-feedback-form').live('click', function(e){
        e.preventDefault();
        $.fancybox({
            'content' : $("#feedback-form").html(),
            'onComplete' : function(upcoming, current) {
                $('#fancybox-content .input-file').attr('id', 'plupload-container');
                $('#fancybox-content .input-file .upload').attr('id', 'plupload-choose-file');
                var uploader = new plupload.Uploader({
                    runtimes : 'html5,flash,silverlight',
                    browse_button : 'plupload-choose-file',
                    container : 'plupload-container',
                    max_file_size : '10mb',
                    url : '{{ $view->baseUrl("/feedback/upload/?format=json") }}',
                    flash_swf_url : '{{ $view->baseUrl("/js/plupload/js/plupload.flash.swf") }}',
                    silverlight_xap_url : '{{ $view->baseUrl("/js/plupload/js/plupload.silverlight.xap") }}',
                    filters : [
                        {title : "Image files", extensions : "jpg,gif,png,JPG,GIF,PNG"},
                        {title : "Pdf files", extensions : "pdf"}
                    ]
                });

                uploader.bind('Init', function(up) {
                    var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
                    if (is_firefox) {
                        uploader.refresh();
                    }
                });

                uploader.init();

                uploader.bind('FilesAdded', function(up, files) {
                    $('#fancybox-content form#feedback-form-form div.show-value').html('Uploading...');
                    up.start();

                    up.refresh(); // Reposition Flash/Silverlight
                });

                uploader.bind('FileUploaded', function(up, file, info) {
                    $('#fancybox-content form#feedback-form-form div.show-value').html('Uploaded!');
                    var response = $.parseJSON(info['response'])['response'].split("_");
                    $('#fancybox-content form#feedback-form-form .file-holder').html('<input type="hidden" id="feedback-attachment-id" name="attachment_id" /><input type="hidden" id="feedback-attachment-type" name="attachment_type" />')
                    $('#fancybox-content form#feedback-form-form input#feedback-attachment-type').val(response[0]);
                    $('#fancybox-content form#feedback-form-form input#feedback-attachment-id').val(response[1]);

                    up.refresh();
                });
            }
        });
    });
    $('form#feedback-form-form').live('submit', function(e) {
        e.preventDefault();
        var form = this;

        {{ dynamic }}
        var data = {
            f_feedback_url: String(document.location),
            f_feedback_subject: $('input#feedback-subject', form).val(),
            f_feedback_content: $('textarea#feedback-content', form).val(),
            f_language: '{{ $gimme->language->number }}',
            f_section: '{{ $gimme->section->id }}',
            f_article: '{{ $gimme->article->number }}',
            f_publication: '{{ $gimme->publication->identifier }}',
        };
        {{ /dynamic }}

        if ($('#fancybox-content form#feedback-form-form input#feedback-attachment-type').val() == 'image') {
            data['image_id'] = $('#fancybox-content form#feedback-form-form input#feedback-attachment-id').val();
        } else {
            data['document_id'] = $('#fancybox-content form#feedback-form-form input#feedback-attachment-id').val();
        }

        $.ajax({
            type: 'POST',
            url: '{{ $view->baseUrl("/feedback/save/?format=json") }}',
            data: data,
            dataType: 'json',
            success: function(data) {
                var message;
                $.fancybox({
                    'content' : '<h2 style="text-align:center;"><span>Response</span></h2><h2 style="text-align:center;">'+ data['response'] +'<h2>'
                });
            }
        });
    });
});
  • No labels