remix-project/src/app.js

/* global alert, confirm, prompt, Option, Worker, soljsonSources */

var $ = require('jquery');

var utils = require('./app/utils');
var queryParams = require('./app/query-params');
var gistHandler = require('./app/gist-handler');

var StorageHandler = require('./app/storage-handler');
var Editor = require('./app/editor');
var Compiler = require('./app/compiler');

// The event listener needs to be registered as early as possible, because the
// parent will send the message upon the "load" event.
var filesToLoad = null;
var loadFilesCallback = function (files) { filesToLoad = files; }; // will be replaced later
window.addEventListener('message', function (ev) {
  if (typeof ev.data === typeof [] && ev.data[0] === 'loadFiles') {
    loadFilesCallback(ev.data[1]);
  }
}, false);

var run = function () {
  function loadFiles (files) {
    for (var f in files) {
      var key = utils.fileKey(f);
      var content = files[f].content;
      if (key in window.localStorage && window.localStorage[key] !== content) {
        var count = '';
        while ((key + count) in window.localStorage) count = count - 1;
        window.localStorage[key + count] = window.localStorage[key];
      }
      window.localStorage[key] = content;
    }
    editor.setCacheFile(Object.keys(files)[0]);
    updateFiles();
  }

  loadFilesCallback = function (files) {
    loadFiles(files);
  };

  if (filesToLoad !== null) {
    loadFiles(filesToLoad);
  }

  // ------------------ query params (hash) ----------------

  function syncQueryParams () {
    $('#optimize').attr('checked', (queryParams.get().optimize === 'true'));
  }

  window.onhashchange = syncQueryParams;
  syncQueryParams();

  // -------- check file upload capabilities -------

  if (!(window.File || window.FileReader || window.FileList || window.Blob)) {
    $('.uploadFile').remove();
  }

  // ------------------ gist load ----------------

  var loadingFromGist = gistHandler.handleLoad(function (gistId) {
    $.ajax({
      url: 'https://api.github.com/gists/' + gistId,
      jsonp: 'callback',
      dataType: 'jsonp',
      success: function (response) {
        if (response.data) {
          if (!response.data.files) {
            alert('Gist load error: ' + response.data.message);
            return;
          }
          loadFiles(response.data.files);
        }
      }
    });
  });

  // ----------------- storage --------------------

  var storageHandler = new StorageHandler(updateFiles);
  window.syncStorage = storageHandler.sync;
  storageHandler.sync();

  // ----------------- editor ----------------------

  var editor = new Editor(loadingFromGist);

  // ----------------- tabbed menu -------------------

  $('#options li').click(function (ev) {
    var $el = $(this);
    var match = /[a-z]+View/.exec($el.get(0).className);
    if (!match) return;
    var cls = match[0];
    if (!$el.hasClass('active')) {
      $el.parent().find('li').removeClass('active');
      $('#optionViews').attr('class', '').addClass(cls);
      $el.addClass('active');
    } else {
      $el.removeClass('active');
      $('#optionViews').removeClass(cls);
    }
  });

  // ------------------ gist publish --------------

  $('#gist').click(function () {
    if (confirm('Are you sure you want to publish all your files anonymously as a public gist on github.com?')) {
      var files = editor.packageFiles();
      var description = 'Created using browser-solidity: Realtime Ethereum Contract Compiler and Runtime. \n Load this file by pasting this gists URL or ID at https://ethereum.github.io/browser-solidity/#version=' + queryParams.get().version + '&optimize=' + queryParams.get().optimize + '&gist=';

      $.ajax({
        url: 'https://api.github.com/gists',
        type: 'POST',
        data: JSON.stringify({
          description: description,
          public: true,
          files: files
        })
      }).done(function (response) {
        if (response.html_url && confirm('Created a gist at ' + response.html_url + ' Would you like to open it in a new window?')) {
          window.open(response.html_url, '_blank');
        }
      });
    }
  });

  $('#copyOver').click(function () {
    var target = prompt(
      'To which other browser-solidity instance do you want to copy over all files?',
      'https://ethereum.github.io/browser-solidity/'
    );
    if (target === null) {
      return;
    }
    var files = editor.packageFiles();
    $('<iframe/>', {src: target, style: 'display:none;', load: function () {
      this.contentWindow.postMessage(['loadFiles', files], '*');
    }}).appendTo('body');
  });

  // ----------------- file selector-------------

  var $filesEl = $('#files');
  var FILE_SCROLL_DELTA = 300;

  $('.newFile').on('click', function () {
    editor.newFile();
    updateFiles();

    $filesEl.animate({ left: Math.max((0 - activeFilePos() + (FILE_SCROLL_DELTA / 2)), 0) + 'px' }, 'slow', function () {
      reAdjust();
    });
  });

  // ----------------- file upload -------------

  $('.inputFile').on('change', function () {
    var fileList = $('input.inputFile')[0].files;
    for (var i = 0; i < fileList.length; i++) {
      var name = fileList[i].name;
      if (!window.localStorage[utils.fileKey(name)] || confirm('The file ' + name + ' already exists! Would you like to overwrite it?')) {
        editor.uploadFile(fileList[i]);
        updateFiles();
      }
    }

    $filesEl.animate({ left: Math.max((0 - activeFilePos() + (FILE_SCROLL_DELTA / 2)), 0) + 'px' }, 'slow', function () {
      reAdjust();
    });
  });

  $filesEl.on('click', '.file:not(.active)', showFileHandler);

  $filesEl.on('click', '.file.active', function (ev) {
    var $fileTabEl = $(this);
    var originalName = $fileTabEl.find('.name').text();
    ev.preventDefault();
    if ($(this).find('input').length > 0) return false;
    var $fileNameInputEl = $('<input value="' + originalName + '"/>');
    $fileTabEl.html($fileNameInputEl);
    $fileNameInputEl.focus();
    $fileNameInputEl.select();
    $fileNameInputEl.on('blur', handleRename);
    $fileNameInputEl.keyup(handleRename);

    function handleRename (ev) {
      ev.preventDefault();
      if (ev.which && ev.which !== 13) return false;
      var newName = ev.target.value;
      $fileNameInputEl.off('blur');
      $fileNameInputEl.off('keyup');

      if (newName !== originalName && confirm('Are you sure you want to rename: ' + originalName + ' to ' + newName + '?')) {
        var content = window.localStorage.getItem(utils.fileKey(originalName));
        window.localStorage[utils.fileKey(newName)] = content;
        window.localStorage.removeItem(utils.fileKey(originalName));
        editor.setCacheFile(newName);
      }

      updateFiles();
      return false;
    }

    return false;
  });

  $filesEl.on('click', '.file .remove', function (ev) {
    ev.preventDefault();
    var name = $(this).parent().find('.name').text();

    if (confirm('Are you sure you want to remove: ' + name + ' from local storage?')) {
      window.localStorage.removeItem(utils.fileKey(name));
      editor.setNextFile(utils.fileKey(name));
      updateFiles();
    }
    return false;
  });

  function showFileHandler (ev) {
    ev.preventDefault();
    editor.setCacheFile($(this).find('.name').text());
    updateFiles();
    return false;
  }

  function activeFileTab () {
    var name = editor.getCacheFile();
    return $('#files .file').filter(function () { return $(this).find('.name').text() === name; });
  }

  function updateFiles () {
    var $filesEl = $('#files');
    var files = editor.getFiles();

    $filesEl.find('.file').remove();

    for (var f in files) {
      $filesEl.append(fileTabTemplate(files[f]));
    }

    if (editor.cacheFileIsPresent()) {
      var active = activeFileTab();
      active.addClass('active');
      editor.resetSession();
    }
    $('#input').toggle(editor.cacheFileIsPresent());
    $('#output').toggle(editor.cacheFileIsPresent());
    reAdjust();
  }

  function fileTabTemplate (key) {
    var name = utils.fileNameFromKey(key);
    return $('<li class="file"><span class="name">' + name + '</span><span class="remove"><i class="fa fa-close"></i></span></li>');
  }

  var $filesWrapper = $('.files-wrapper');
  var $scrollerRight = $('.scroller-right');
  var $scrollerLeft = $('.scroller-left');

  function widthOfList () {
    var itemsWidth = 0;
    $('.file').each(function () {
      var itemWidth = $(this).outerWidth();
      itemsWidth += itemWidth;
    });
    return itemsWidth;
  }

  //  function widthOfHidden () {
  //    return ($filesWrapper.outerWidth() - widthOfList() - getLeftPosi());
  //  }

  function widthOfVisible () {
    return $filesWrapper.outerWidth();
  }

  function getLeftPosi () {
    return $filesEl.position().left;
  }

  function activeFilePos () {
    var el = $filesEl.find('.active');
    var l = el.position().left;
    return l;
  }

  function reAdjust () {
    if (widthOfList() + getLeftPosi() > widthOfVisible()) {
      $scrollerRight.fadeIn('fast');
    } else {
      $scrollerRight.fadeOut('fast');
    }

    if (getLeftPosi() < 0) {
      $scrollerLeft.fadeIn('fast');
    } else {
      $scrollerLeft.fadeOut('fast');
      $filesEl.animate({ left: getLeftPosi() + 'px' }, 'slow');
    }
  }

  $scrollerRight.click(function () {
    var delta = (getLeftPosi() - FILE_SCROLL_DELTA);
    $filesEl.animate({ left: delta + 'px' }, 'slow', function () {
      reAdjust();
    });
  });

  $scrollerLeft.click(function () {
    var delta = Math.min((getLeftPosi() + FILE_SCROLL_DELTA), 0);
    $filesEl.animate({ left: delta + 'px' }, 'slow', function () {
      reAdjust();
    });
  });

  updateFiles();

  // ----------------- version selector-------------

  // var soljsonSources is provided by bin/list.js

  $('option', '#versionSelector').remove();
  $.each(soljsonSources, function (i, file) {
    if (file) {
      var version = file.replace(/soljson-(.*).js/, '$1');
      $('#versionSelector').append(new Option(version, file));
    }
  });
  $('#versionSelector').change(function () {
    queryParams.update({ version: $('#versionSelector').val() });
    loadVersion($('#versionSelector').val());
  });

  // ----------------- resizeable ui ---------------

  var EDITOR_SIZE_CACHE_KEY = 'editor-size-cache';
  var dragging = false;
  $('#dragbar').mousedown(function (e) {
    e.preventDefault();
    dragging = true;
    var main = $('#righthand-panel');
    var ghostbar = $('<div id="ghostbar">', {
      css: {
        top: main.offset().top,
        left: main.offset().left
      }
    }).prependTo('body');

    $(document).mousemove(function (e) {
      ghostbar.css('left', e.pageX + 2);
    });
  });

  var $body = $('body');

  function setEditorSize (delta) {
    $('#righthand-panel').css('width', delta);
    $('#editor').css('right', delta);
    onResize();
  }

  function getEditorSize () {
    window.localStorage[EDITOR_SIZE_CACHE_KEY] = $('#righthand-panel').width();
  }

  $(document).mouseup(function (e) {
    if (dragging) {
      var delta = $body.width() - e.pageX + 2;
      $('#ghostbar').remove();
      $(document).unbind('mousemove');
      dragging = false;
      setEditorSize(delta);
      window.localStorage.setItem(EDITOR_SIZE_CACHE_KEY, delta);
      reAdjust();
    }
  });

  // set cached defaults
  var cachedSize = window.localStorage.getItem(EDITOR_SIZE_CACHE_KEY);
  if (cachedSize) setEditorSize(cachedSize);
  else getEditorSize();

  // ----------------- toggle right hand panel -----------------

  var hidingRHP = false;
  $('.toggleRHP').click(function () {
    hidingRHP = !hidingRHP;
    setEditorSize(hidingRHP ? 0 : window.localStorage[EDITOR_SIZE_CACHE_KEY]);
    $('.toggleRHP i').toggleClass('fa-angle-double-right', !hidingRHP);
    $('.toggleRHP i').toggleClass('fa-angle-double-left', hidingRHP);
    if (!hidingRHP) compiler.compile();
  });

  function getHidingRHP () { return hidingRHP; }

  // ----------------- editor resize ---------------

  function onResize () {
    editor.resize();
    reAdjust();
  }
  window.onresize = onResize;
  onResize();

  document.querySelector('#editor').addEventListener('change', onResize);
  document.querySelector('#editorWrap').addEventListener('change', onResize);

  // ----------------- compiler output renderer ----------------------

  $('.asmOutput button').click(function () { $(this).parent().find('pre').toggle(); });

  // ----------------- compiler ----------------------

  function handleGithubCall (root, path, cb) {
    $('#output').append($('<div/>').append($('<pre/>').text('Loading github.com/' + root + '/' + path + ' ...')));
    return $.getJSON('https://api.github.com/repos/' + root + '/contents/' + path, cb);
  }

  var compiler = new Compiler(editor, handleGithubCall, $('#output'), getHidingRHP, updateFiles);

  function setVersionText (text) {
    $('#version').text(text);
  }

  var loadVersion = function (version) {
    setVersionText('(loading)');
    queryParams.update({version: version});
    var isFirefox = typeof InstallTrigger !== 'undefined';
    if (document.location.protocol !== 'file:' && Worker !== undefined && isFirefox) {
      // Workers cannot load js on "file:"-URLs and we get a
      // "Uncaught RangeError: Maximum call stack size exceeded" error on Chromium,
      // resort to non-worker version in that case.
      compiler.loadVersion(true, version, setVersionText);
    } else {
      compiler.loadVersion(false, version, setVersionText);
    }
  };

  loadVersion(queryParams.get().version || 'soljson-latest.js');

  document.querySelector('#optimize').addEventListener('change', function () {
    queryParams.update({ optimize: document.querySelector('#optimize').checked });
    compiler.compile();
  });

  storageHandler.sync();
};

module.exports = {
  'run': run
};