<?php
include_once(_DIR_TO_CLASS.'/c_page.php') ;
class c_page_cab_test_file_upload extends c_page
{
  public $h1='Тестирование загрузчика файлов' ;

  function set_head_tags()
  { parent::set_head_tags() ;
    //$this->HEAD['js'][]=_PATH_TO_EXT.'/jQuery-autoComplete/jquery.auto-complete.js' ;
    $this->HEAD['css'][]=_PATH_TO_ADDONS.'/html5-file-uploader-master/Content/styles/styles.css' ;
  }


  function block_main()
  {
    $this->page_title() ;
    ?><div class="body">
          <div id="dragndropimage" class="uploadimage-dragndrop">
              <div class="uploadimage-text">Drag images here</div>
              <div>Or, if you prefer...</div>
              <div class="uploadimage-input">
                  <input type="file" multiple="multiple" name="uploadFiles" id="upload-input" />
              </div>
          </div>

          <div id="upload-liveuploads" data-bind="template: { name: 'template-uploads' }"></div>

          <div class="description">
              <h2>RequireJS, Knockout and Uploader Harmony</h2>
              <p>
                  Scripts are loaded using module loader <a href="http://requirejs.org/">RequireJS</a>. This demo
                  demonstrates how to use <a href="https://github.com/devbridge/html5-file-uploader">html5 ajax uploader</a> and <a href="http://knockoutjs.com/">knockout</a> to customize UI for uploads.
              </p>

              <h2>Show me the code</h2>
              <script type="text/javascript" src="https://gist.github.com/4028759.js"></script>
          </div>

          <script type="text/html" id="template-uploads">
              <div data-bind="visible: showTotalProgress()">
                  <div>
                      <span data-bind="text: uploadSpeedFormatted()"></span>
                      <span data-bind="text: timeRemainingFormatted()" style="float: right;"></span>
                  </div>
                  <div class="uploadimage-totalprogress">
                      <div class="uploadimage-totalprogressbar" style="width: 0%;" data-bind="style: { width: totalProgress() + '%' }"></div>
                  </div>
              </div>
              <div data-bind="foreach: uploads">
                  <div class="uploadimage-upload" data-bind="css: { 'uploadimage-uploadcompleted': uploadCompleted() }">
                      <div class="uploadimage-fileinfo">
                          <strong data-bind="text: fileName"></strong>
                          <span data-bind="text: fileSizeFormated"></span>
                          <span class="uploadimage-progresspct" data-bind="visible: uploadProgress() < 100"><span data-bind="text: uploadSpeedFormatted()"></span></span>
                      </div>
                      <div class="uploadimage-progress">
                          <div class="uploadimage-progressbar" style="width: 0%;" data-bind="style: { width: uploadProgress() + '%' }"></div>
                      </div>
                  </div>
              </div>
          </script>


          <script type="text/javascript" data-main="/scripts/main" src="/Scripts/require.js"></script>

      </div><?
  }
}

?>