Make Roxy Fileman for TinyMCE editor Responsive and Usable on Mobile Devices

Date: 07/21/2016, Author: Lostwake, Category: JavaScript

So recently I was testing Roxy Fileman and for the life of me I couldnt make it usable on all devices. So I wrote some Javascript and Tweaked a little of the default CSS to make a solution.

Note: This fix is for the stand alone version of TinyMCE but Im sure it can be adapted to any CMS your using.

First the CSS, the only file I changed was the file: "main.min.css"

I changed the width of ".pnlDirs" to 180px and hid "#pnlFileList .time"

.pnlDirs {
width: 180px;
}

#pnlFileList .time {
display: none;
}

Next I took the installation instructions from here: http://www.roxyfileman.com/TinyMCE-file-browser

And added a little javascript on lines 6-13, 28, and 29.

Original:

$(function() {   
  tinyMCE.init({selector: '#tinymce', plugins: 'link image',
                  toolbar: "link | image", file_browser_callback: RoxyFileBrowser}); 
});
function RoxyFileBrowser(field_name, url, type, win) {
  var roxyFileman = '/fileman/index.html';
  if (roxyFileman.indexOf("?") < 0) {     
    roxyFileman += "?type=" + type;   
  }
  else {
    roxyFileman += "&type=" + type;
  }
  roxyFileman += '&input=' + field_name + '&value=' + win.document.getElementById(field_name).value;
  if(tinyMCE.activeEditor.settings.language){
    roxyFileman += '&langCode=' + tinyMCE.activeEditor.settings.language;
  }
  tinyMCE.activeEditor.windowManager.open({
     file: roxyFileman,
     title: 'Roxy Fileman',
     width: 850, 
     height: 650,
     resizable: "yes",
     plugins: "media",
     inline: "yes",
     close_previous: "no"  
  }, {     window: win,     input: field_name    });
  return false; 
}

My Code:

tinymce.init({selector: '.editor', plugins: 'code link image', file_browser_callback: RoxyFileBrowser}); 
function RoxyFileBrowser(field_name, url, type, win) {
  var roxyFileman = 'editorplugin/fileman/index.html';
  var widthframe = 550;
  var heightframe = 250;
 
  if ( $(window).width() > 739) {     
  //Add your javascript for large screens here
  widthframe = 850;
  heightframe = 650;
  }
 
  if (roxyFileman.indexOf('?') < 0) {    
    roxyFileman += '?type=' + type;  
  }
  else {
    roxyFileman += '&type=' + type;
  }
  roxyFileman += '&input=' + field_name + '&value=' + win.document.getElementById(field_name).value;
  if(tinyMCE.activeEditor.settings.language){
    roxyFileman += '&langCode=' + tinyMCE.activeEditor.settings.language;
  }
  tinyMCE.activeEditor.windowManager.open({
     file: roxyFileman,
     title: 'Image Manager',
     width: widthframe,
     height: heightframe,
     resizable: 'yes',
     plugins: 'media',
     inline: 'yes',
     close_previous: 'no' 
  }, {     window: win,     input: field_name    });
  return false;
}

If this helped anyone please let me know.

Comments: