]> source.dussan.org Git - nextcloud-server.git/commitdiff
Added breadcrumb and control bar.
authorTom Needham <needham.thomas@gmail.com>
Mon, 3 Oct 2011 21:59:40 +0000 (22:59 +0100)
committerTom Needham <needham.thomas@gmail.com>
Mon, 3 Oct 2011 21:59:40 +0000 (22:59 +0100)
1  2 
apps/files_texteditor/css/style.css
apps/files_texteditor/js/editor.js
files/js/fileactions.js
files/templates/part.breadcrumb.php

index cfad02100abc81a7df0f123a3295f5ca0619d1fd,0000000000000000000000000000000000000000..3555119dffc86e4875df70c478e4236c90ef9e27
mode 100644,000000..100644
--- /dev/null
@@@ -1,16 -1,0 +1,22 @@@
 +#editor{
 +      position: absoloute;
 +      height: 0;
 +      width: 0;
 +      top: 41px;
 +      left: 160px;
 +      z-index: -1;
 +}
 +#editorwrapper{
 +      position: absoloute;
 +      height: 0;
 +      width: 0;
 +      top: 41px;
 +      left: 160px;
 +      display: none;
 +}
++#editorbar{
++      margin-left: auto;
++      margin-right: 10px;     
++      display: block;
++      width: 300px;
++}
index b912b448586ea9c1b598593e6bce83ec62f5eac4,0000000000000000000000000000000000000000..d4c5bca51f2acd619aa3149b599bf84c7eaa886d
mode 100644,000000..100644
--- /dev/null
@@@ -1,130 -1,0 +1,161 @@@
-       $('#editor').css('height', $(window).height()-90);
-       $('#editor').css('width', $(window).width()-180);
 +function setEditorSize(){
 +      // Sets the size of the text editor window.
- function showControlBar(){
++      $('#editor').css('height', $(window).height()-81);
++      $('#editor').css('width', $(window).width()-160);
 +      $('#editor').css('padding-top', '40px');                
 +}
 +
 +function getFileExtension(file){
 +      var parts=file.split('.');
 +      return parts[parts.length-1];
 +}
 +
 +function setSyntaxMode(ext){
 +      // Loads the syntax mode files and tells the editor
 +      var filetype = new Array()
 +      // Todo finish these
 +      filetype["php"] = "php";
 +      filetype["html"] = "html";
 +      filetype["rb"] = "ruby";
 +      filetype["css"] = "css";
 +      filetype["pl"] = "perl";
 +      filetype["py"] = "python";
 +      filetype["xml"] = "xml";
 +      filetype["js"] = "javascript";
 +
 +      if(filetype[ext]!=null){
 +              // Then it must be in the array, so load the custom syntax mode
 +              // Set the syntax mode
 +              OC.addScript('files_texteditor','aceeditor/mode-'+filetype[ext], function(){
 +                      var SyntaxMode = require("ace/mode/"+filetype[ext]).Mode;
 +                      window.aceEditor.getSession().setMode(new SyntaxMode());
 +              });
 +      }       
 +}
 +
-       $('.actions,#file_action_panel').fadeOut('slow', function(){
++function showControlBar(filename){
 +      // Loads the control bar at the top.
-               var html = '<div id="editorbar"><input type="button" id="editor_save" value="'+t('files_texteditor','Save')+'"><input type="button" id="editor_close" value="Close"></div>';
++      $('.actions,#file_action_panel').fadeOut('slow').promise().done(function() {
 +              // Load the new toolbar.
-                       $('#controls').append(html).fadeIn('slow');     
++              var html = '<div id="editorbar"><input type="button" id="editor_save" value="'+t('files_texteditor','Save')+'"><input type="button" id="editor_close" value="'+t('files_texteditor','Close Editor')+'"></div>';
 +              if($('#editorbar').length==0){
-               bindControlEvents();
++                      $('#controls').append(html);
++                      $('#editorbar').fadeIn('slow'); 
 +              }
++              var breadcrumbhtml = '<div class="crumb svg" style="background-image:url(&quot;/core/img/breadcrumb.png&quot;)"><a href="#">'+filename+'</a></div>';
++              $('.actions').before(breadcrumbhtml);
 +      });
 +}
-       $('#editor_save').bind('click', function() {
-               $(this).val('Saving...');
++ 
 +function bindControlEvents(){
-               var file =  $('#editor').attr('data-file');
++      $("#editor_save").live('click',function() {
++              doFileSave();
++      });     
++      
++      $('#editor_close').live('click',function() {
++              hideFileEditor();       
++      });
++      
++      $(document).bind('keydown', 'Ctrl+s', doFileSave);
++}
++
++function editorIsShown(){
++      if($('#editor').length!=0){
++              return true;
++      } else {
++              return false;   
++      }       
++}
++
++function doFileSave(){
++      if(editorIsShown()){
++      $('#editor_save').val(t('files_texteditor','Saving')+'...');
 +              var filecontents = window.aceEditor.getSession().getValue();
 +              var dir =  $('#editor').attr('data-dir');
-                                                       $('#editor_save').val('Save');
++              var file =  $('#editor').attr('data-filename');
 +              $.post('http://cloud.tomneedham.com/apps/files_texteditor/ajax/savefile.php', { filecontents: filecontents, file: file, dir: dir },function(jsondata){
++                      
 +                      if(jsondata.status == 'failure'){
 +                              var answer = confirm(jsondata.data.message);
 +                              if(answer){
 +                                      $.post(OC.filePath('apps','files_texteditor','ajax','savefile.php'),{ filecontents: filecontents, file: file, dir: dir, force: 'true' },function(jsondata){
 +                                              if(jsondata.status =='success'){
-                                       $('#editor_save').val('Save');  
++                                                      $('#editor_save').val(t('files_texteditor','Save'));
 +                                                      $('#editor_save').effect("highlight", {color:'#4BFF8D'}, 3000);
 +                                              } 
 +                                              else {
 +                                                      // Save error
 +                                                      alert(jsondata.data.message);   
 +                                              }
 +                                      }, 'json');
 +                              } 
 +                              else {
 +                                      // Don't save!
 +                                      $('#editor_save').effect("highlight", {color:'#FF5757'}, 3000);
-                               $('#editor_save').val('Save');
++                                      $('#editor_save').val(t('files_texteditor','Save'));    
 +                              }
 +                      } 
 +                      else if(jsondata.status == 'success'){
 +                              // Success
-       // TODO give focus back to the editor
-       // window.aceEditor.focus();
-       });     
-       
-       $('#editor_close').bind('click', function() {
-               hideFileEditor();       
-       });
- }
++                              $('#editor_save').val(t('files_texteditor','Save'));
 +                              $('#editor_save').effect("highlight", {color:'#4BFF8D'}, 3000);
 +                      }
 +              }, 'json');
-                               showControlBar();
++      giveEditorFocus();
++      } else {
++              return; 
++      }       
++};
++
++function giveEditorFocus(){
++      window.aceEditor.focus();
++};
 +
 +function showFileEditor(dir,filename){
 +      // Loads the file editor and display it.
 +      var data = $.ajax({
 +                      url: OC.filePath('files','ajax','download.php')+'?files='+encodeURIComponent(filename)+'&dir='+encodeURIComponent(dir),
 +                      complete: function(data){
 +                              var data = data.responseText;
 +                              // Initialise the editor
-                                       showControlBar();
++                              showControlBar(filename);
 +                              $('table').fadeOut('slow', function() {
 +                                      $('#editor').html(data);
 +                                      // encodeURIComponenet?
 +                                      $('#editor').attr('data-dir', dir);
 +                                      $('#editor').attr('data-filename', filename);
 +                                      window.aceEditor = ace.edit("editor");  
 +                                      aceEditor.setShowPrintMargin(false);
 +                                      setSyntaxMode(getFileExtension(filename));
 +                                      OC.addScript('files_texteditor','aceeditor/theme-clouds', function(){
 +                                              window.aceEditor.setTheme("ace/theme/clouds");
 +                                      });
-               $('#editorbar').html('');
-               $('#editor').html('');
 +                              });
++                      bindControlEvents();
 +                      // End success
 +                      }
 +                      // End ajax
 +                      });
 +      setEditorSize();
 +}
 +
 +function hideFileEditor(){
++      // Fade out controls
 +      $('#editorbar').fadeOut('slow');
++      // Fade out breadcrumb
++      $('.actions').prev().fadeOut('slow');
++      // Fade out editor
 +      $('#editor').fadeOut('slow', function(){
++              $('#editorbar').remove();
++              $('#editor').remove();
++              $('.actions').prev().remove();
++              var editorhtml = '<div id="editor"></div>';
++              $('table').after(editorhtml);
 +              $('.actions,#file_access_panel').fadeIn('slow');
 +              $('table').fadeIn('slow');      
 +      });
 +}
 +
 +$(window).resize(function() {
 +  setEditorSize();
 +});
Simple merge
index 9a265a9c1eaf7cf3744a1e2439fd0102d334ae5e,9a265a9c1eaf7cf3744a1e2439fd0102d334ae5e..63242dd326c50b1198f9ee32d6f1fd294598f17f
@@@ -2,4 -2,4 +2,4 @@@
                <div class="crumb svg" data-dir='<?php echo $crumb["dir"];?>' style='background-image:url("<?php echo image_path('core','breadcrumb.png');?>")'>
                        <a href="<?php echo $_['baseURL'].$crumb["dir"]; ?>"><?php echo htmlspecialchars($crumb["name"]); ?></a>
                </div>
--      <?php endforeach; ?>
++      <?php endforeach; ?>