cloudcmd/lib/client/edit.js

var CloudCmd, Util, DOM, CloudFunc, ace, DiffProto, diff_match_patch;
(function(CloudCmd, Util, DOM, CloudFunc) {
    'use strict';
    
    CloudCmd.Edit = EditProto;
        
    function EditProto(CallBack) {
        var Name        = 'Edit',
            Loading     = false,
            DIR         = CloudCmd.LIBDIRCLIENT + 'edit/',
            LIBDIR      = CloudCmd.LIBDIR,
            Info        = DOM.CurrentInfo,
            Value,
            Edit        = this,
            Diff,
            Ace,
            Session,
            Modelist,
            Msg,
            Dialog      = DOM.Dialog,
            Key         = CloudCmd.Key,
            Images      = DOM.Images,
            Element;
            
       function init() {
            Loading   = true;
            Util.loadOnLoad([
                Edit.show,
                load,
                CloudCmd.View
            ]);
        }
        
        this.show                       = function(pValue) {
            var lMode, htmlMode, cssMode,
                lName       = Info.name,
                isDir       = Info.isDir,
                lExt        = Info.ext;
            
            if (!Loading) {
                Images.showLoad();
                
                if (!Element) {
                    Element         = DOM.anyload({
                        name        : 'div',
                        style   :
                            'width      : 100%;'    +
                            'height     : 100%;'    +
                            'font       : 16px "Droid Sans Mono";' +
                            'position: absolute;',
                        not_append : true
                    });
                  
                  initAce();
                }
                
                if (isDir)
                    lMode = Modelist.modesByName.json.mode;
                else
                    lMode = Modelist.getModeForPath(lName).mode;
                
                htmlMode  = Modelist.modesByName.html.mode;
                cssMode   = Modelist.modesByName.css.mode;
                
                Session.setMode(lMode);
                
                if (lMode === htmlMode || lMode === cssMode)
                    DOM.jsload(DIR + 'emmet.js', function() {
                        var Emmet = ace.require("ace/ext/emmet");
                        
                        Emmet.setCore(window.emmet);
                        Ace.setOption("enableEmmet", true);
                    });
                
                if (Util.isString(pValue)) {
                    Ace.setValue(pValue);
                    CloudCmd.View.show(Element, focus);
                    Key.unsetBind();
                } else
                    Info.getData({
                        success    : function(pData) {
                            var lValue = '';
                            
                            if (pData)
                                lValue = pData.data;
                            
                            Value = lValue;
                            Ace.setValue(lValue);
                            CloudCmd.View.show(Element, focus);
                        }
                    });
            }
        };
        
        this.hide                       =  function() {
            CloudCmd.View.hide();
        };
        
        this.goToLine                   = function() {
            var msg     = 'Enter line number:',
                cursor  = Ace.selection.getCursor(),
                number  = cursor.row + 1,
                line    = Dialog.prompt(msg, number);
            
            number      = line - 0;
            
            if (number)
                Ace.gotoLine(number);
        };
        
        function focus() {
            Ace.focus();
            Ace.clearSelection();
            Ace.moveCursorTo(0, 0);
        }
        
        function initAce() {
            Ace     = ace.edit(Element);
            Session = Ace.getSession();
            
            Ace.setTheme('ace/theme/tomorrow_night_blue');
            
            Ace.setShowPrintMargin(false);
            Ace.setShowInvisibles(true);
            Session.setUseSoftTabs(true);
            
            Ace.commands.addCommand({
                name    : 'hide',
                bindKey : { win: 'Esc',  mac: 'Esc' },
                exec    : function () {
                    Edit.hide();
                }
            });
            
            Ace.commands.addCommand({
                name    : 'goToLine',
                bindKey : { win: 'Ctrl-G',  mac: 'Command-G' },
                exec    : function () {
                    Edit.goToLine();
                }
            });
            
            Ace.commands.addCommand({
                name    : 'save',
                bindKey : { win: 'Ctrl-S',  mac: 'Command-S' },
                exec    : save
            });
            
            ace.require('ace/ext/language_tools');
            Modelist = ace.require('ace/ext/modelist');
            
            Ace.setOptions({
                enableBasicAutocompletion   : true,
                enableSnippets              : true
            });
        }
        
        function save () {
            var lPath       = Info.path,
                lValue      = Ace.getValue();
            
            CloudCmd.getConfig(function(config) {
                var isDiff = config.diff;
                
                Util.ifExec(!isDiff, function(patch) {
                    var query,
                        isAllowed   = DOM.Storage.isAllowed();
                    
                    Value           = lValue;
                    
                    Util.ifExec(!isAllowed, function() {
                            DOM.RESTful.save(lPath,  lValue, onSave, query);
                        }, function(callback) {
                            DOM.checkStorageHash(lPath, function(error, equal) {
                                var isString    = Util.isString(patch),
                                    lessLength  = patch.length < lValue.length;
                                
                                if (!error) {
                                    if (equal && isString && patch.length && lessLength) {
                                        lValue  = patch;
                                        query   = '?patch';
                                    }
                                    
                                    callback();
                                }
                            });
                    });
                    
                }, function(callback) {
                    diff(lValue, callback);
                });
            });
        }
        
        function diff(pNewValue, pCallBack) {
            var libs            = [
                    LIBDIR + 'diff/diff-match-patch.js',
                    LIBDIR + 'diff.js'
                ],
                url             = CloudFunc.getJoinURL(libs);
            
            DOM.jsload(url, function() {
                var patch, 
                    isAllowed   = DOM.Storage.isAllowed();
                
                if (!Diff)
                    Diff        = new DiffProto(diff_match_patch);
                
                Util.ifExec(!isAllowed, function() {
                    patch       = Diff.createPatch(Value, pNewValue);
                    Util.exec(pCallBack, patch);
                }, function(callback) {
                    var path = Info.path;
                    
                    DOM.getDataFromStorage(path, function(data) {
                        if (data)
                            Value   = data;
                        
                        callback();
                    });
                });
            });
        }
        
        function load(pCallBack) {
            Util.time(Name + ' load');
            
            var lFiles  = [
                DIR + 'theme-tomorrow_night_blue.js',
                DIR + 'ext-language_tools.js',
                DIR + 'ext-searchbox.js',
                DIR + 'ext-modelist.js',
                DIR + 'ext-emmet.js'
            ],
                lAce    = DIR + 'ace.js',
                lURL    = CloudFunc.getJoinURL(lFiles);
            
            
            DOM.anyLoadOnLoad([lURL, lAce], function() {
                Util.timeEnd(Name + ' load');
                Loading = false;
                Util.exec(pCallBack);
            });
        }
        
      
        
        function onSave(text) {
            var ret,
                isError = Util.isContainStrAtBegin(text, 'error'),
                path    = Info.path,
                msg     = '\nShould I save file anyway?';
                
            if (!isError) {
                Edit.showMessage(text);
                DOM.saveDataToStorage(path, Value);
            } else {
                ret     = Dialog.confirm(text + msg);
                
                if (ret)
                    DOM.RESTful.save(path, Value, onSave);
            }
        }
        
        this.showMessage    = function(text) {
            var parent, 
                TWO_SECONDS = 2000;
            
            if (!Msg) {
                DOM.cssSet({
                    id      : 'msg-css',
                    inner   : '#view .msg {'        +
                                'z-index'           + ': 1;'                    +
                                'background-color'  + ': #7285B7;'              +
                                'color'             + ': #D1F1A9;'              +
                                'position'          + ': fixed;'                +
                                'left'              + ': 40%;'                  +
                                'top'               + ': 25px;'                 +
                                'padding'           + ': 5px;'                  +
                                'opacity'           + ': 0.9;'                  +
                                'transition'        + ': ease 0.5s;'            +
                            '}'
                });
                parent  = Element;
                
                Msg     = DOM.anyload({
                    name        : 'div',
                    className   : 'msg',
                    parent      : parent
                });
            }
            
            Msg.innerHTML = text;
            DOM.show(Msg);
            setTimeout(Util.retExec(DOM.hide, Msg), 2000);
        };
        
        init();
    }
    
})(CloudCmd, Util, DOM, CloudFunc);