Removed the old upload form from the TraceSwitcher.

Also added a separate button for "Import trace", next to the "New Trace" button.

Author: dylemma

codepulse/src/main/resources/toserve/pages/TraceInputForm/TraceInputForm.js

@@ -19,6 +19,11 @@
 
 $(document).ready(function(){
 
+	switch(window.location.hash){
+		case '#import':
+			$('a[href=#new-import-form]').tab('show')
+	}
+
 	// wire up the new analysis form to submit to the trace creation url, with a mandatory name
 	setupUploadForm($('#new-analysis-form'), '/trace-api/trace/create', false)
 

codepulse/src/main/resources/toserve/pages/TraceSwitcher/TraceSwitcher.css

@@ -23,126 +23,37 @@
 	bottom: calc(100% - 60px);
 }
 
-.traceSwitcher .slideOutForm {
-	position: fixed;
-	bottom: 25px;
-	right: 285px;
-	width: 35%;
-	padding: 5px;
-
-	transition: right .3s ease;
-
-	background-color: #BBB;
-	box-shadow: 0 0 5px black;
-}
-
-.traceSwitcher .slideOutForm.collapsed {
-	/* slide off screen to the right, enough that the full width is hidden */
-	right: calc(-35% - 5px);
-}
-
 .traceSwitcher .full-container {
 	width: 100%;
 	height: 100%;
 	position: relative;
 }
 
-.traceSwitcher .addTraceButton {
+.traceSwitcher .traceInputLinks {
 	position: absolute;
 	bottom: 0;
 	width: 100%;
+}
+
+.traceSwitcher .traceInputLink {
+	display: block;
 	padding: 5px;
 	box-sizing: border-box;
 
 	background-color: silver;
 	color: black;
-	cursor: pointer;
+	text-decoration: none;
 }
 
-.traceSwitcher .addTraceButton:hover {
+.traceSwitcher .traceInputLink:hover {
 	background-color: gray;
 }
 
 .traceSwitcher .traceList {
-	max-height: calc(100% - 30px);
+	max-height: calc(100% - 60px);
 	overflow-y: auto;
 }
 
-.traceSwitcher .feedback {
-	min-height: 150px;
-	max-height: 150px;
-	margin: 5px;
-	border-radius: 10px;
-	padding: 10px;
-	box-sizing: border-box;
-	background-color: #DDD;
-	overflow-y: scroll;
-	overflow-x: hidden;
-}
-
-.traceSwitcher .feedback .message-box {
-	border-bottom: 1px solid silver;
-	margin-bottom: 3px;
-	overflow: hidden;
-}
-
-.traceSwitcher .feedback .message-box.error { color: #BD0000; }
-.traceSwitcher .feedback .message-box.success { color: dodgerblue; }
-
-.traceSwitcher .feedback .message-box .message {
-	font-size: .8em;
-	position: relative;
-	transition: left .3s ease;
-	left: 0;
-}
-
-.traceSwitcher .feedback .message-box .message.out {
-	left: 100%;
-}
-
-.traceSwitcher .uploadProgressBar {
-	height: 3px;
-	border-bottom: 1px solid;
-	margin-top: 5px;
-}
-
-.traceSwitcher .uploadProgressBar .fill {
-	height: 100%;
-	background-color: dodgerblue;
-	box-shadow: 0 0 3px dodgerblue;
-	transition: width .3s ease;
-}
-
-.traceSwitcher .formlabel {
-	font-size: 14px;
-}
-
-.traceSwitcher .formfield {
-	margin-bottom: 3px;
-}
-
-.traceSwitcher [name=filebutton] {
-	position: relative;
-	overflow: hidden;
-}
-
-.traceSwitcher input[type=file] {
-	position: absolute;
-	opacity: 0;
-	right: 0;
-	top: 0;
-	font-size: 200px;
-	direction: ltr;
-	cursor: pointer;
-}
-
-.traceSwitcher input[type=text] {
-	/* mostly overriding unwanted styles coming from bootstrap */
-	margin: 0;
-	border-radius: 0;
-	height: 24px;
-}
-
 [data-toggle=TraceSwitcher].active {
 	background-color: #FFA500;
 }
@@ -226,46 +137,4 @@
  .stripedBackground.animated {
  	animation: stripe-animation 2s linear infinite;
  	-webkit-animation: stripe-animation 2s linear infinite;
- }
-
-/*********************\
-| File Drag/Drop Zone |
-\*********************/
-
-.traceSwitcher .dropzone {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: lightgray;
-
-	display: none;
-}
-
-.traceSwitcher .dropzone.in {
-	display: block;
-}
-
-.traceSwitcher .dropzone.hover {
-	background-color: lightgreen;
-}
-
-.traceSwitcher .dropzone-msg {
-	font-size: xx-large;
-	color: gray;
-	text-align: center;
-	height: calc(100% - 1em);
-	margin: .5em;
-	padding-top: 70px; /* to vertically center the text */
-	border: 3px dashed;
-	border-radius: .5em;
-}
-
-.traceSwitcher .dropzone.in .dropzone-msg:after {
-	content: 'Drag here to import!';
-}
-
-.traceSwitcher .dropzone.hover .dropzone-msg:after {
-	content: 'Drop it here!';
-}
+ }

codepulse/src/main/resources/toserve/pages/TraceSwitcher/TraceSwitcher.js

@@ -33,31 +33,14 @@ template html.
 ;(function(exports){
 
 	// predefinition of jQuery vars that will be assigned when the document is ready
-	var slideOutForm, slideDownSidebar, formOpener
-
-	var feedbackZone
+	var slideDownSidebar
 
 	// the main exported variable, defined later
 	var TraceSwitcher
 
 	$(document).ready(function(){
 		// get references to the moving parts
-		slideOutForm = $('.traceSwitcher .slideOutForm')
 		slideDownSidebar = $('.traceSwitcher .slideDownSidebar')
-		formOpener = slideDownSidebar.find('.addTraceButton')
-		feedbackZone = $('.traceSwitcher .feedback')
-
-		feedbackZone.click(function(){
-			sendFeedback("you clicked the feedback zone")
-		})
-
-		// wire up a file upload process to the fileChooser
-		setupFileUpload()
-
-		setupDropZone()
-
-		// clicking the "Add a new trace target" button opens and closes the form
-		formOpener.click(function(){ showForm('toggle') })
 
 		// auto-setup a master button control to toggle the TraceSwitcher view
 		$('[data-toggle=TraceSwitcher]').each(function(){
@@ -77,22 +60,6 @@ template html.
 		return !shouldBeCollapsed
 	}
 
-	// showForm('toggle'|true|false) to show/hide the slideOutForm
-	function showForm(arg){
-		if(!slideOutForm) return
-
-		var isCollapsed = slideOutForm.hasClass('collapsed'),
-			shouldBeCollapsed = (arg == 'toggle') ? !isCollapsed : !arg
-
-		slideOutForm.toggleClass('collapsed', shouldBeCollapsed)
-
-		formOpener.text(shouldBeCollapsed ? '+ New Trace' : 'Cancel')
-
-		return !shouldBeCollapsed
-	}
-
-
-
 	function wireUpController($button){
 		var switcherOpen = false
 		$button.click(function(){
@@ -102,141 +69,9 @@ template html.
 		})
 	}
 
-	function sendFeedback(message, style){
-		var msgDiv = $("<div class='message out'>").text(message).hide(),
-			msgBox = $("<div class='message-box'>")
-
-		style && msgBox.addClass(style)
-
-		msgBox.append(msgDiv).prependTo(feedbackZone)
-
-		msgDiv.slideDown(function(){
-			msgDiv.removeClass('out')
-		})
-	}
-
-	function setupFileUpload(){ 
-		var fileChooser = slideOutForm.find('input[type=file]'),
-			progressFill = slideOutForm.find('.uploadProgressBar .fill'),
-			filenameSpan = slideOutForm.find('[name=filename]'),
-			uploadUrl = '/trace-api/file-upload'
-
-		fileChooser.fileupload({
-			url: uploadUrl,
-			dropZone: slideOutForm,
-			add: function(e, data){
-
-				var file = data.files[0],
-					filename = file.name,
-					filepath = file.path
-
-				filenameSpan.text(filename)
-
-				// Reset the progress bar
-				updateProgress(0)
-
-				if(CodePulse.isEmbedded && filepath) doNativeUpload(filepath)
-				else {
-					console.log('using browser upload behavior on ', filename)
-					data.submit()
-				}
-			},
-			done: function(e, data){
-				onUploadDone(data.result)
-			},
-			error: function(e, data){
-				onUploadError(e.responseText)
-			},
-			progress: function(e, data){
-				updateProgress(+data.loaded / +data.total)
-			}
-		})
-
-		function onUploadError(err){
-			sendFeedback('Error: ' + (err || '(unknown error)'), 'error')
-			updateProgress(0)
-		}
-
-		function onUploadDone(result){
-			updateProgress(1)
-
-			var there = result.href,
-				here = window.location.pathname,
-				href = window.location.href.replace(new RegExp(here + '$'), there)
-			console.log('there: ' + there, 'here: ' + here, 'href: ' + href)
-			window.location.href = href
-		}
-
-		function doNativeUpload(path){
-			console.log('using native upload behavior on ', path)
-			updateProgress(0.9)
-			$.ajax(uploadUrl, {
-				data: {'path': path},
-				type: 'POST',
-				error: function(xhr, status){ onUploadError(xhr.responseText) },
-				success: function(data){ onUploadDone(data) }
-			})
-		}
-
-		function updateProgress(ratio){
-			if(!isNaN(ratio) && isFinite(ratio)){
-				var fillWidth = parseInt(ratio * 100) + '%'
-				progressFill.css('width', fillWidth)
-			}
-		}
-
-	}
-
-	function setupDropZone(){
-		var $zone = slideOutForm.find('.dropzone'),
-			timeout = undefined
-
-		$(document).bind('dragover', function(e){
-			if(!timeout) $zone.addClass('in')
-			else clearTimeout(timeout)
-
-			// figure out if we're dragging over the dropzone
-			var found = false, node = e.target
-			do {
-				if(node === $zone[0]){
-					found = true
-					break
-				}
-				node = node.parentNode
-			} while(node != null)
-
-			// set the 'hover' class depending on `found`
-			$zone.toggleClass('hover', found)
-
-			timeout = setTimeout(function(){
-				timeout = null
-				$zone.removeClass('in hover')
-			}, 300)
-		})
-	}
-
-	/* Drag and Drop is useless if they don't have files */
-	function isFileDrag(event) {
-		if(event.originalEvent) return isFileDrag(event.originalEvent)
-		
-		var dt = event.dataTransfer
-		
-		// can't use forEach or $.inArray because IE10 uses a DomStringList
-		var foundFiles = false, idx
-		for(idx = 0; idx < dt.types.length; idx++){
-			var s = dt.types[idx]
-			if(s == 'Files') foundFiles = true
-		}
-		
-		return dt && foundFiles 
-	}
-
 	TraceSwitcher = exports['TraceSwitcher'] = {
 		'open': function(){ showSidebar(true) },
-		'close': function(){
-			showForm(false)
-			showSidebar(false)
-		}
+		'close': function(){ showSidebar(false) }
 	}
 
 })(this);