diff --git a/index.html b/index.html index 40db36629a..e523ef6b05 100644 --- a/index.html +++ b/index.html @@ -50,6 +50,9 @@ THE SOFTWARE.
+
+ + +
@@ -79,20 +82,119 @@ THE SOFTWARE. // ----------------- editor ---------------------- - var SOL_CACHE_KEY = "sol-cache"; + var SOL_CACHE_FILE = "Untitled.sol" + var SOL_CACHE_FILES_KEY = "sol-cache-files"; var editor = ace.edit("input"); var session = editor.getSession(); var Range = ace.require('ace/range').Range; var errMarkerId = null; - var solCache = window.localStorage.getItem( SOL_CACHE_KEY ); + var solFiles = JSON.parse( window.localStorage.getItem( SOL_CACHE_FILES_KEY ) ) || [SOL_CACHE_FILE]; + window.localStorage.setItem( SOL_CACHE_FILES_KEY, JSON.stringify( solFiles ) ); + + var solCache = window.localStorage.getItem( SOL_CACHE_FILE ); editor.setValue( solCache || BALLOT_EXAMPLE, 1 ); + session.setMode("ace/mode/javascript"); session.setTabSize(4); session.setUseSoftTabs(true); + // ----------------- file selector------------- + + var count = 0; + var $filesEl = $('#files'); + + $filesEl.on( 'click','.newFile', function(){ + count++; + var name = 'Unititled'+count+'.sol'; + solFiles.push( name ) + SOL_CACHE_FILE = name; + window.localStorage.setItem( SOL_CACHE_FILES_KEY, JSON.stringify( solFiles ) ); + window.localStorage.setItem( SOL_CACHE_FILE, '' ); + console.log('new file added: ', solFiles) + updateFiles(); + }) + + $filesEl.on( 'click','.file:not(.active)', showFileHandler ) + + $filesEl.on( 'click','.file.active', function(ev){ + var $fileTabEl = $(this) + var originalName = $fileTabEl.find('.name').text() + console.log("click active: ", originalName ) + ev.preventDefault() + if ($(this).find('input').length > 0 ) return false; + var $fileNameInputEl = $(''); + $fileTabEl.html( $fileNameInputEl ) + $fileNameInputEl.focus() + + $fileNameInputEl.on( 'blur', function(ev){ + ev.preventDefault() + var newName = ev.target.value; + var $new = null + if (confirm( "Are you sure you want to rename: " + originalName + " to " + newName + '?' )) { + + solFiles[solFiles.indexOf(originalName)] = newName + window.localStorage.setItem( newName, window.localStorage.getItem(originalName) ); + window.localStorage.setItem( SOL_CACHE_FILES_KEY, JSON.stringify( solFiles ) ); + window.localStorage.setItem( originalName, '') + SOL_CACHE_FILE = newName; + updateFiles() + } + + fileTabFromName(newName || originalName ).addClass('active') + 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?" )) { + console.log("remove file, ", ev.target) + var index = solFiles.indexOf(name); + solFiles[index] = undefined; + window.localStorage.setItem( SOL_CACHE_FILES_KEY, JSON.stringify( solFiles ) ); + SOL_CACHE_FILE = solFiles[ Math.max(0, index - 1)] + window.localStorage.setItem( name, null) + updateFiles() + } + return false; + }) + + function showFileHandler (ev) { + ev.preventDefault() + SOL_CACHE_FILE = $(this).find('.name').text(); + console.log('click normal', SOL_CACHE_FILE, typeof window.localStorage.getItem( SOL_CACHE_FILE )) + updateFiles() + return false; + } + + function fileTabFromName(name) { + return $('#files .file').filter(function(){ return $(this).find('.name').text() == name; }) + } + + function updateFiles () { + console.log("Update files", solFiles, SOL_CACHE_FILE, typeof window.localStorage.getItem( SOL_CACHE_FILE ) ) + $filesEl.find('.file').remove() + for (var f in solFiles) { + if (solFiles[f]) $filesEl.append( fileTabTemplate(solFiles[f]) ); + } + var active = fileTabFromName(SOL_CACHE_FILE); + active.addClass('active') + editor.setValue( window.localStorage.getItem( SOL_CACHE_FILE ) || '', 1 ); + } + + function fileTabTemplate(name){ + return $(''+name+'x'); + } + + SOL_CACHE_FILE = solFiles[0] + updateFiles(); + // ----------------- version selector------------- // var soljsonSources is provided by bin/list.js @@ -209,7 +311,7 @@ THE SOFTWARE. var onChange = function() { var input = editor.getValue(); if (input === "") { - window.localStorage.setItem( SOL_CACHE_KEY, '' ) + window.localStorage.setItem( SOL_CACHE_FILE, '' ) return; } if (input === previousInput) @@ -288,7 +390,7 @@ THE SOFTWARE. }; var renderContracts = function(data, source) { - window.localStorage.setItem( SOL_CACHE_KEY, source ); + window.localStorage.setItem( SOL_CACHE_FILE, source ); $('#output').empty(); for (var contractName in data.contracts) { diff --git a/stylesheets/browser-solidity.css b/stylesheets/browser-solidity.css index 1d791a52a8..2994fc7270 100644 --- a/stylesheets/browser-solidity.css +++ b/stylesheets/browser-solidity.css @@ -10,12 +10,69 @@ body { width: auto; bottom: 0px; right: 37em; - } -#input { + +#files { font-size: 15px; + height: 2.5em; + box-sizing: border-box; + line-height: 2em; + padding: 0.5em 0.5em 0; +} + +#files .file, +#files .newFile { + display: inline-block; + padding: 0 0.6em; + box-sizing: border-box; + background-color: #f0f0f0; + cursor: pointer; + margin-right: 0.5em; + position: relative; +} + +#files .newFile { + background-color: #B1EAC5; + font-weight: bold; + color: #4E775D; +} + +#files .file.active { + font-weight: bold; + background-color: #F0F0F0; + border: 1px solid #BFBFBF; + box-shadow: 0 0 5px rgba(0,0,0,0.25); + border-bottom: 0 none; + padding-right: 2.5em; +} +#files .file .remove { position: absolute; + right: 0; top: 0; + height: 1.25em; + width: 1.25em; + line-height: 1em; + border-radius: 1em; + color: #FF8080; + display: none; + margin: 0.4em; + text-align: center; +} + +#files .file input { + background-color: transparent; + border: 0 none; + border-bottom: 1px dotted black; + line-height: 1em; + margin: 0.5em 0; +} + +#files .file.active .remove { display: inline-block; } + +#input { + font-size: 15px; + position: absolute; + top: 2.5em; left: 0; right: 0; bottom: 0;