Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="//pulipulichen.github.io/blogger/posts/2016/12/semantic/semantic.min.css">
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<script src="//pulipulichen.github.io/blogger/posts/2016/12/semantic/semantic.min.js"></script>

<!-- ------------------------------------ -->

<form class="file-process-framework ui form">

<h1 class="ui horizontal divider header">
  Input
</h1>

    <div class="ui top attached tabular menu">
      <div class="active item" data-tab="textarea">Textarea</div>
      <div class="item" data-tab="file">File</div>
    </div>

<!-- --------------------------------- -->

<div class="ui bottom attached active tab segment" data-tab="textarea">
  <div class="field">
    <label for="input_mode_textarea">Paste text here: </label>
    <textarea class="input-mode textarea" id="input_mode_textarea" onfocus="this.select()">第一回	甄士隱夢幻識通靈  賈雨村風塵懷閨秀

  此開卷第一回也。作者自云因曾歷過一翻夢幻之後,故將真事隱去
,而借「通靈」之說撰此「石頭記」一書也;故曰「甄士隱」云云。
但書中所記何事何人?自又云:「今風塵碌碌,一事無成,忽念及當
日所有之女子,一一細考較去,覺其行止見識皆出于我之上,何我
堂堂鬚眉,誠不若彼裙釵;我實愧則有餘,悔亦無益,真大無可如
何之日也!當此日,欲將已往所賴天恩祖德,錦衣紈褲之時,飫甘
厭肥之日,背父兄教育之恩,負師友規談之德,以致今日一技無成,
半生潦倒之罪,編述一集,以告天下;知我之罪固不免,然閨閣
中本自歷歷有人,萬不可因我之不肖,自護其短,一併使其泯滅也。
雖今日茅椽蓬牖,瓦灶繩床,並不足妨我襟懷;況那晨風夕月階柳庭
花,更覺得潤人筆墨;我雖不學無文,又何妨用假語村言,敷衍
出一段故事來,亦可使閨閣昭傳,復可悅世之目,破人愁悶,不亦宜
乎。故曰「賈雨村」云云。更於篇中凡用「夢」用「幻」等字,是
提醒閱者眼目,亦是此書本旨 。

  列位看官!你道此書從何而來?說起根由雖近荒唐,細按頗有趣味
。原來女媧氏煉石補天之時,於大荒山無稽崖煉成高十二丈
,見方廿四丈頑石三萬六千五百零一塊,女媧氏只用了三萬六千五
百塊,單單剩下一塊未用,棄在青埂峰下。誰知此石自經鍛煉之
後,靈性已通,自去自來,可大可小;因見眾石俱得補天,獨自己無
才,不堪入選,遂自怨自嘆,日夜悲哀。

  一日,正當嗟悼之際,俄見一僧一道,遠遠而來,生得氣宇不凡,
丰神迥異,來至石下,席地坐談。見這一塊鮮明瑩潔的石頭,且又縮
成扇墜一般,可佩可拿;那僧托于掌上,笑道:「形體倒也是個寶物
了,只是沒有實在的好處,須得在鐫上幾個字,使人一見便知你是件
奇物,然後攜你到那昌明隆盛之邦、詩禮簪纓之族、花柳繁華之地、
溫柔富貴之鄉去安身樂業。」石頭聽了喜不能禁,乃問:「不知可鐫
何字,攜到何方?望乞明示。」那僧笑道:「你且莫問,日後自然明
白。」說畢,便袖了那石,同那道人飄然而去,竟不知投奔何方何舍
。後來不知過了幾世幾劫,因有個空空道人訪道求仙,忽從這大荒山
無稽崖青埂峰下經過,忽見一大石上,字跡分明,編述歷歷;空空道
人乃從頭一看,原來是無才補天、幻形入世、蒙茫茫大士渺渺真人攜
入紅塵、歷盡一番離合悲歡,炎涼世態的一段故事。後面有一首偈云
:

	無才可去補蒼天,枉入紅塵若許年;此係生前身後事,請誰
記取作奇傳?</textarea>
  </div>
  <!--
  <div class="field">
      <button type="button" class="ui primary button process-textarea">Submit</button>
  </div>
  -->
    
</div>

<!-- --------------------------------- -->

<div class="ui bottom attached tab segment" data-tab="file">
  <div class="field">
      <label for="files">Please select a TXT file in UTF8 encoding: </label>
    </div>
    <div class="field">
      <input class="myfile" name="files[]" id="files" multiple="" type="file" />
      <div class="ui pointing inverted blue large basic label">
        <a href="http://blog.pulipuli.info/2016/12/utf-8notepad-how-to-convert-plain-text.html" target="notepad" style="display: block">How to Convert TXT file to UTF8 encoding?</a>
      </div>
    </div>

  
  <div class="inline field">
    <input type="checkbox" name="autodownload" id="autodownload" />
    <label for="autodownload">Download Processed File Automatically</label>
  </div>


  </div>
</div>
  

    <!-- -------------------------------------- -->
    
  <div class="field">
    <div class="loading hide"><img src="//dl.dropboxusercontent.com/u/717137/2016/loading.gif" /></div>
  </div>
  
    </div>
  
  <!-- -------------------------------------- -->
  
  <div class="display-result" style="display: none;">
  <!-- <div class="display-result"> -->
  
    <h2 class="ui horizontal divider header">
      Result
    </h2>
    <div class="field">
      <button type="button" class="fluid ui large right labeled icon green button download-file">
        <i class="right download icon"></i>
        DOWNLOAD
      </button>
    </div>

    <div class="field">
      <label for="filename">File Name: </label>
      <input type="text" onfocus="this.select()" id="filename" class="filename" style="width: calc(100% - 15em)" />
    </div>
    
    <div class="field">
      <label for="preview">
        Result Preview: 
        <div class="ui  pointing below  medium blue basic label encoding" style="margin-left: 1em">
          Get error encoding text? <a href="http://blog.pulipuli.info/2016/12/utf-8notepad-how-to-convert-plain-text.html" target="notepad" >Try to Convert TXT file to UTF8 encoding?</a>
        </div>
      </label>
        
      <textarea id="preview" class="preview" onfocus="this.select();"></textarea>
    </div>
  
  </div>
</form>
              
            
!

CSS

              
                body {
  padding: 1em !important; 
}
.file-process-framework .loading.hide {
  display:none;
}

.file-process-framework label,
.file-process-framework .download-file {
  display: block;
}

.file-process-framework .input-mode label {
  display: inline;
}

/*
.file-process-framework .download-file {
  font-size: 2em;
  width: 90%;
}
*/

.file-process-framework textarea.preview {
  display: block;
  width: 90%;
  height: calc(100vh - 200px);
}

              
            
!

JS

              
                var _process_file = function(_input, _callback) {
    
    var _result = "";
    
    // 先拆開斷行
    var _lines = _input.split("\n");
    
    var _min_indent = null;
    var _lines2 = [];

    for (var _l in _lines) {
        var _line = _lines[_l];
        
        if (_line.trim() === "") {
            continue;
        }
        _lines2.push(_line);
        
        var _indent = 0;
        for (var _i = 0; _i < _line.length; _i++) {
            if (_line.substr(_i, 1) !== "") {
                _indent = _i;
                break;
            }
        }
        
        if (_min_indent === null 
            || _indent < _min_indent) {
            _min_indent = _indent;
        }
    }
    
    // 計算出所有文章的開頭縮排空格數了
    
    for (var _l in _lines2) {
        var _line = _lines2[_l];
        
        // 刪除多餘空白
        _line = _line.substr(_min_indent, _line.length);
        
        if (_line.substr(0, 1) === " ") {
            _result = _result + "\n\n";
        }
        _result = _result + _line.trim();
        
    }
    
    _result = _result.trim();
    
    //console.log(_input);
    //setTimeout(function () {
        if (typeof(_callback) === "function") {
            _callback(_result);
        }
    //}, 1000);
        
};

var _output_filename_surffix="_output";


// -------------------------------------

var _load_file = function(evt) {
    //console.log(1);
    if(!window.FileReader) return; // Browser is not compatible

    var _panel = $(".file-process-framework");
    
    _panel.find(".loading").removeClass("hide");

    var reader = new FileReader();
    var _result;

    var _file_name = evt.target.files[0].name;
    
    reader.onload = function(evt) {
        if(evt.target.readyState != 2) return;
        if(evt.target.error) {
            alert('Error while reading file');
            return;
        }

        //filecontent = evt.target.result;

        //document.forms['myform'].elements['text'].value = evt.target.result;
        _result =  evt.target.result;

        _process_file(_result, function (_result) {
            _panel.find(".preview").val(_result);
            _panel.find(".filename").val(_file_name);
                        
            $(".file-process-framework .myfile").val("");
            $(".file-process-framework .loading").addClass("hide");
            _panel.find(".display-result").show();
            _panel.find(".display-result .encoding").show();

            var _auto_download = (_panel.find('[name="autodownload"]:checked').length === 1);
            if (_auto_download === true) {
                _panel.find(".download-file").click();
            }
            
            //_download_file(_result, _file_name, "txt");
        })
    };

    var _pos = _file_name.lastIndexOf(".");
    _file_name = _file_name.substr(0, _pos)
        + _output_filename_surffix
        + _file_name.substring(_pos, _file_name.length);

    //console.log(_file_name);

    reader.readAsText(evt.target.files[0]);
};

var _load_textarea = function(evt) {
    var _panel = $(".file-process-framework");
    
    // --------------------------

    var _result = _panel.find(".input-mode.textarea").val();
    if (_result.trim() === "") {
        return;
    }

    // ---------------------------
    
    _panel.find(".loading").removeClass("hide");

    // ---------------------------
    var d = new Date();
    var utc = d.getTime() - (d.getTimezoneOffset() * 60000);
  
    var local = new Date(utc);
    var _file_name = local.toJSON().slice(0,19).replace(/:/g, "-");
    _file_name = "output_" + _file_name + ".txt";

    // ---------------------------

    _process_file(_result, function (_result) {
        _panel.find(".preview").val(_result);
        _panel.find(".filename").val(_file_name);

        _panel.find(".loading").addClass("hide");
        _panel.find(".display-result").show();
        _panel.find(".display-result .encoding").hide();

        var _auto_download = (_panel.find('[name="autodownload"]:checked').length === 1);
        if (_auto_download === true) {
            _panel.find(".download-file").click();
        }
    });
};

var _download_file_button = function () {
    var _panel = $(".file-process-framework");
    
    var _file_name = _panel.find(".filename").val();
    var _data = _panel.find(".preview").val();
    
    _download_file(_data, _file_name, "txt");
};


var _download_file = function (data, filename, type) {
    var a = document.createElement("a"),
        file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }

}

$(function () {
  var _panel = $(".file-process-framework");
  _panel.find(".input-mode.textarea").click(_load_textarea).keyup(_load_textarea).click();
  _panel.find(".myfile").change(_load_file);
  _panel.find(".download-file").click(_download_file_button);
  
  $('.menu .item').tab();
});
              
            
!
999px

Console