stackEdit.transMode.preview.js

stackEdit.transMode.preview.js

(function(userCustom, document, localStorage) {

    userCustom.onReady = function() {

        var styles = [];
        styles.push('.trans-mode{width:50%!important;margin:0!important;}');
        styles.push('p,h1,h2,h3,h4,h5,h6,li{position:relative;}');
        styles.push('.trans-mode .zh{display:block;position:absolute;top:0;right:0;width:98%;margin-right: -100%;font-size:0.8em;font-family:"微软雅黑"}');
        styles.push('.trans-mode pre,.trans-mode blockquote{width: 200%;}');
        styles.push('.trans-mode blockquote p{width: 46%;}');
        styles.push('.trans-mode blockquote .zh{margin-right: -110%;}');

        $('<style/>').html(styles.join('')).appendTo('head');
    }



    userCustom.onCreatePreviewButton = function() {

        var previewContents = $('#preview-contents');

        var button = $('<button class="btn btn-success" title="Trans Mode">TM</button>');

        function switchTransMode() {
            if (localStorage.getItem('stackEdit.isTransMode') == 1) {
                // open trans mode 
                previewContents.addClass('trans-mode');
                button.addClass('active');
            } else {
                // close trans mode
                previewContents.removeClass('trans-mode');
                button.removeClass('active');
            }
        }

        button.click(function() {
            localStorage.setItem('stackEdit.isTransMode', ((localStorage.getItem('stackEdit.isTransMode') == 1) ? 0 : 1));
            switchTransMode();
        });

        // trans mode init
        switchTransMode();

        return button[0];
    };


    userCustom.onAceCreated = function(aceEditor) {

        // show line number
        aceEditor.renderer.setShowGutter(true);


        require(['mousetrap'], function(mousetrap) {

            var zhTag = ['<span class="zh">', '</span>', 'type trans content here'];


            function switchTag(aceEditor, tag) {
                var selectionRange, selectionString, isEmpty, warperSelectionRange, warperSelectionString, isWraper, cursorPosition;

                selectionRange = aceEditor.getSelectionRange();
                selectionString = aceEditor.session.getTextRange(selectionRange);

                isEmpty = (selectionString.length === 0) || (selectionString == tag[2]);


                warperSelectionRange = selectionRange.clone();
                warperSelectionRange.start.column = warperSelectionRange.start.column - tag[0].length;

                if (warperSelectionRange.start.column < 0) {
                    isWraper = false;
                } else {
                    warperSelectionRange.end.column = warperSelectionRange.end.column + tag[1].length;
                    warperSelectionString = aceEditor.session.getTextRange(warperSelectionRange);
                    isWraper = (warperSelectionString.match(new RegExp(['(', tag[0], ').*(', tag[1], ')'].join(''))) !== null);
                }

                if (isWraper) {
                    if (isEmpty) {
                        selectionString = '';
                    }
                    aceEditor.session.doc.replace(warperSelectionRange, selectionString);

                } else {

                    if (isEmpty) {
                        selectionString = tag[2];
                    }
                    aceEditor.session.doc.replace(selectionRange, tag[0] + selectionString + tag[1]);
                }



                cursorPosition = aceEditor.getCursorPosition();
                selectionRange.start.column = cursorPosition.column - selectionString.length - (isWraper ? 0 : tag[1].length);
                selectionRange.end.column = cursorPosition.column - (isWraper ? 0 : tag[1].length);
                aceEditor.selection.setSelectionRange(selectionRange);



            }

            mousetrap.bind('ctrl+1', function() {
                // add or remove '<span class="zh"></span>' you can change the shortcut
                switchTag(aceEditor, zhTag);
            });
        });
    }


})(userCustom, document, window.localStorage);