gistfile1.js

var TouchEditor  = Class.create();

TouchEditor.prototype = {

    initialize : function(element) {
        this.element = $(element);
        this.article_id = Element.readAttribute(element, 'article_id');
        this.fragments = [];
        var fragments = $$('.fragment');
        fragments.each(this.setup_fragment.bind(this));
    },

    setup_fragment : function(element) {
        f = new TouchEditor_Fragment(element, this);
        this.fragments[f.seq] = f;
    },

    process : function(resp) {
        if(resp['delete']) {
           Element.remove(this.fragments[resp['delete']].container);
        }
        var r = resp['replace'];
        var old = this.fragments[r[0]];
        Element.replace(old.container, r[1]['new_content']);
        var new_fragments = r[1]['html_ids'].collect(function(i){return $(i)});
        new_fragments.each(this.setup_fragment.bind(this));
    } 
}

var TouchEditor_FragmentControls = Class.create();

TouchEditor_FragmentControls.prototype = {
    initialize : function(parent_container, fragment) {
        this.fragment = fragment;
        var bar = this.container = new Element('div', {class: 'controls'});

        var edit = new Element('div', { class: 'button edit' });
        edit.innerHTML = "изменить";
        Event.observe(edit, 'click', fragment.go_edit_mode.bindAsEventListener(fragment), false);

        Element.insert(bar, edit);
        
        var save = new Element('div', { class: 'button save' });
        save.innerHTML = "сохранить";
        Event.observe(save, 'click', fragment.save_and_go_view_mode.bindAsEventListener(fragment), false);
        Element.insert(bar, save);

        Element.insert(parent_container,{ top: this.container });
    }
}

var TouchEditor_FragmentEditBox = Class.create();

TouchEditor_FragmentEditBox.prototype = {

    initialize : function(parent_container, fragment) {
        this.fragment = fragment;

        this.container = new Element('div', {class: 'editbox', style:'display:none;'});

        this.textarea = new Element('textarea');
        new TextareaAutogrow(this.textarea);
        Element.insert(this.container, this.textarea );

        Element.insert(parent_container, { top: this.container } );
    },

    show : function(text) {
        this.textarea.value = text;
        this.container.show();
        this.textarea.grow();
    },

    hide : function() {
        this.container.hide();
    },

    serialize : function() {
        return Object.toQueryString({content: this.textarea.value});
    }
}

var TouchEditor_Fragment = Class.create();

TouchEditor_Fragment.prototype = {

    initialize : function(container, editor) {
        this.editor = editor;
        this.container = container;
        this.container.addClassName('fragment_view_mode');

        this.seq = Element.readAttribute(container, 'seq');
        this.content = container.select('.rendered_content').first();

        this.editbox = new TouchEditor_FragmentEditBox(container, this);
        this.controls = new TouchEditor_FragmentControls(container, this);

        var loader = new Element('img', {src:"/images/ajax-loader.gif", class:'loader'})
        Element.insert(container, {top: loader});

        this.fragment_path = '/articles/'+this.editor.article_id + '/fragments/'+this.seq+'.json'; 
    },

    go_edit_mode : function(ev) {
        new Ajax.Request(this.fragment_path, { method: 'get',
            
            onSuccess: (function(resp) {
                var result = resp.responseJSON;
                this.editbox.show(result['textile']);
                this.content.hide();
                this.show_edit_mode();
            }).bind(this),
            
            onLoading: (function(){
                this.show_busy_mode();
            }).bind(this)
        });
    },

    save_and_go_view_mode : function(ev) {
        new Ajax.Request(this.fragment_path, { method: 'put',
            
            onSuccess: (function(resp) {
                var result = resp.responseJSON;
                //this.content.innerHTML = result['rendered_content'];
                this.editor.process(result);
                //this.editbox.hide();
                //this.content.show();
                //this.show_view_mode();
            }).bind(this),

            onLoading: (function(){
                this.show_busy_mode();
            }).bind(this),

            parameters: this.editbox.serialize()
        });
    },

    set_seq : function(value) {
        this.seq = value;
        Element.writeAttribute(container, {seq:value});
    },
    
    show_edit_mode : function() {
        var c = this.container;
        c.removeClassName('fragment_view_mode');
        c.removeClassName('fragment_busy_mode');
        c.addClassName('fragment_edit_mode');
    },

    show_busy_mode : function() {
        var c = this.container;
        c.removeClassName('fragment_view_mode');
        c.removeClassName('fragment_edit_mode');
        c.addClassName('fragment_busy_mode');
    },

    show_view_mode : function() {
        var c = this.container;
        c.removeClassName('fragment_edit_mode');
        c.removeClassName('fragment_busy_mode');
        c.addClassName('fragment_view_mode');
    },
}