Initial checkin of wireframes

TIER · May 6, 2019 · 9561e39 · 9561e39
1 parent 99d1184
commit 9561e39
Show file tree

Hide file tree

Showing 116 changed files with 21,817 additions and 0 deletions.
diff --git a/wireframes/Gruntfile.js b/wireframes/Gruntfile.js
@@ -0,0 +1,34 @@
+'use strict';
+
+module.exports = function (grunt) {
+    // load all grunt tasks
+    grunt.loadNpmTasks('grunt-contrib-sass');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+
+    grunt.initConfig({
+        sass: {
+            dist: {
+                options: {
+                    style: 'compressed'
+                },
+                files: {
+                    'css/style.css': 'scss/screen.scss'
+                }
+            } 
+        },
+
+
+        watch: {
+
+            css: {
+                files: ['scss/*.scss'],
+                tasks: ['sass'],
+                options: {
+                    spawn: false
+                }
+            } 
+        },
+    });
+     // the default task (running "grunt" in console) is "watch"
+     grunt.registerTask('default', ['watch']);
+};
diff --git a/wireframes/css/style.css b/wireframes/css/style.css
diff --git a/wireframes/index.html b/wireframes/index.html
diff --git a/wireframes/js/main.js b/wireframes/js/main.js
@@ -0,0 +1,152 @@
+$( document ).ready(function() {
+
+    /* ==============================
+    TOOLTIPS
+    ============================== */
+
+    // Enable tooltips everywhere
+    $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+    });
+
+    /* ==============================
+    VIEW TOGGLE
+    ============================== */
+    $("#sourceListViewToggle button").on('click', function() {
+        $("#sourceListViewToggle button").toggleClass("btn-primary btn-light");
+    });
+
+    /* ==============================
+    BACK TO TOP
+    ============================== */
+    $(".to-top").on('click', function() {
+        // Scroll window to top of view
+	    window.scrollTo(0, 0);
+    });
+
+    /* ==============================
+    VIDEOS
+    ============================== */
+
+    // Make videos responsive
+    // https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
+
+    // Find all YouTube videos
+    //var $allVideos = $("iframe[src^='//www.youtube.com']"),
+    var $allVideos = $("iframe"),
+
+    // The element that is fluid width
+    $fluidEl = $("#videoResize");
+
+    // Figure out and save aspect ratio for each video
+    $allVideos.each(function() {
+
+    $(this)
+    .data('aspectRatio', this.height / this.width)
+
+    // and remove the hard coded width/height
+    .removeAttr('height')
+    .removeAttr('width');
+
+    });
+
+    // When the window is resized
+    $(window).resize(function() {
+
+    var newWidth = $fluidEl.width();
+
+    // Resize all videos according to their own aspect ratio
+    $allVideos.each(function() {
+
+    var $el = $(this);
+    $el
+    .width(newWidth)
+    .height(newWidth * $el.data('aspectRatio'));
+
+    });
+
+    // Kick off one resize to fix all videos on page load
+    }).resize();
+
+    /* ==============================
+    SELF ASSESSMENT
+    ============================== */
+
+    // Check answers
+    $("#sa1Check").click(function () {
+        console.log("selfAssessment1Check clicked");
+
+        var c1 = $("#sa1c1").val();
+        var c2 = $("#sa1c2").val();
+        var c3 = $("#sa1c3").val();
+
+        var c1a = c1.includes("--");
+        var c2a = c2.includes("--");
+        var c3a = c3.includes("--");
+
+        console.log("c1: " + c1);
+        console.log("c2: " + c2);
+        console.log("c3: " + c3);
+        console.log("c1a: " + c1a);
+        console.log("c2a: " + c2a);
+        console.log("c3a: " + c3a);
+
+        // Remove alert if it was shown previously
+        var alertShown = $("#sa1Alert").hasClass("active");
+        if( alertShown == true ) {
+            $("#sa1Alert").removeClass("active").addClass("d-none");
+        }
+
+        // Reset scoring indicators
+        $("#sa1 .question-score .correct").addClass("d-none");
+        $("#sa1 .question-score .incorrect").addClass("d-none");
+        $("#sa1 .question-score .not-scored").removeClass("d-none");
+
+
+        // Check for answers to all questions
+        if( c1a == true || c2a == true || c3a == true ) {
+            // Not all questions answered, ask for answers.
+            console.log("Not all questions were answered");
+            $("#sa1Alert").removeClass("d-none").addClass("active");
+
+        } else {
+            // All questions have been answered, show scores.
+            console.log("Scoring");
+
+            // Remove not-scored indicator
+            $("#sa1 .question-score .not-scored").addClass("d-none");
+
+            if( c1 === "Nitrogen and Phosphorus" ) {
+                // Correct
+                $("#sa1q1 .question-score .correct").removeClass("d-none");
+            } else {
+                // Incorrect
+                $("#sa1q1 .question-score .incorrect").removeClass("d-none");
+            };
+
+            if( c2 === "Enzymes" ) {
+                // Correct
+                $("#sa1q2 .question-score .correct").removeClass("d-none");
+            } else {
+                // Incorrect
+                $("#sa1q2 .question-score .incorrect").removeClass("d-none");
+            };
+
+            if( c3 === "Saprobes" ) {
+                // Correct
+                $("#sa1q3 .question-score .correct").removeClass("d-none");
+            } else {
+                // Incorrect
+                $("#sa1q3 .question-score .incorrect").removeClass("d-none");
+            };
+        };
+    });
+
+    // Reset assessment
+    $("#selfAssessment1Reset").click(function () {
+        $("#choice1 .dropdown-toggle").text("-- Choose --");
+        $("#choice2 .dropdown-toggle").text("-- Choose --");
+        $("#choice3 .dropdown-toggle").text("-- Choose --");
+    });
+
+}); // end document.ready
diff --git a/wireframes/js/views.js b/wireframes/js/views.js
@@ -0,0 +1,109 @@
+$( document ).ready(function() {
+
+/**
+ * Change Views
+ * Views is a generic term for pages, views, subsections, steps, etc.
+ * May optionally change corresponding navigation
+ * Adds .active to the current view
+ * Use .active on the default view in the markup
+ */
+
+/*
+* Listener for changing views
+* Processes the change request and routes accordingly
+*/
+$('.change-view').click(function () {
+
+	var thisClicked = $(this);
+
+	console.log('Change view clicked');
+	console.log('thisClicked=' + thisClicked);
+
+	// Call changeView function
+	changeView(thisClicked);
+
+	// Prevent normal action
+	return false;
+});
+
+// Handler for changing views
+changeView = function(thisClicked) {
+
+	var viewType = ".view";
+	if (thisClicked.attr('data-view-type')) {
+		viewType = '.' + thisClicked.attr('data-view-type');
+	}
+
+	var viewContainer = "#viewContainer";
+	if (thisClicked.attr('data-view-container')) {
+		viewContainer = '#' + thisClicked.attr('data-view-container');
+	}
+
+	var currentView = $(viewContainer).find(viewType + '.active').attr('id');
+	currentView = "#" + currentView;
+
+	var nextView = thisClicked.attr('data-view');
+	nextView = "#" + nextView;
+
+	console.log('changeView function');
+	console.log('viewContainer: ' + viewContainer);
+	console.log('viewType: ' + viewType);
+	console.log('currentView: ' + currentView);
+	console.log('nextView: ' + nextView);
+
+	// Hide current view
+	$(currentView).addClass('d-none').removeClass('active');
+
+	// Scroll window to top of view
+	window.scrollTo(0, 0);
+
+	// Show next view
+	// Add animation classes, then unhide for smooth transition
+	$(nextView).addClass('animated fadeIn faster').removeClass('d-none').addClass('active');
+
+	// After animation completes, remove classes
+	$(nextView).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
+		$(this).removeClass('animated fadeIn faster');
+	});
+
+};
+
+
+/**
+ * Change sidebar nav
+ * Updates active item of selected nav menu
+ */
+$('.app-sidebar a').click(function () {
+
+	var nav = $('.app-sidebar');
+	var parentTag = $(this).parent().get(0).tagName;
+	var isActive = $(this).parent().hasClass('active');
+
+	console.log('Change nav clicked');
+	console.log('parentTag: ' + parentTag);
+
+	if (isActive) {
+		// Already the active item, do nothing
+		console.log('clicked the active link, did not change anything');
+	} else {
+		// Change to the active item
+
+		// When subnav item
+		// must already have an active parent item to be visible and selectable
+		if (parentTag === 'LI') {
+			console.log('changing the active subnav item');
+			$(this).parents('.sb-toc-nav').find('.active').removeClass('active');
+			$(this).parent('li').addClass('active');
+		} else {
+			console.log('changing the active nav item');
+			// Not a subnav, must be a main nav item
+			// Close other submenus and open this one
+			$(nav).find('.active').removeClass('active');
+			$(this).parent('.sb-toc-item').addClass('active');
+		}
+	}	
+
+	return false;
+});
+
+}); // end document.ready