Body Schemas

masks/template.html

@@ -13,6 +13,7 @@
 					<button class="btn btn-outline-primary" type="button" id="add_def" data-toggle="modal" data-id="0" data-target="#add-def"><i class="fa-add"></i></button>
 				</div>
 			</div>
+			<a tabindex="0" class="body btn btn-outline-primary ml-2 my-0" role="button" data-toggle="popover"><i class="fa-body"></i></a>
 			<button class="home btn btn-outline-primary ml-2 my-0" type="button"><i class="fa-home"></i></button>
 			<button class="logoff btn btn-outline-primary ml-2 my-0" type="button" data-toggle="modal" data-target="#log-off"><i class="fa-logoff"></i></button>
 		</form>
@@ -61,4 +62,23 @@
 			<div class="modal-body text-center m-3"><i class="fa-loading fa-2x fa-spin"></i></div>
 		</div>
 	</div>
+</div>
+<div id="body-full" class="modal fade" tabindex="-1" aria-hidden="true">
+	<div class="modal-dialog modal-dialog-centered modal-fl">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title"><i class="fa-body fa-inline"></i>Body Schema: <span class="body-title"></span></h5>
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa-close"></i></span></button>
+			</div>
+			<div class="modal-body text-center"><img src="" class="img-fluid" style="max-height: 100%;" alt="" /></div>
+		</div>
+	</div>
+</div>
+<div class="template-items">
+	<div class="bodycard card border-primary mx-2 clickable transition" data-toggle="modal" data-target="#body-full">
+		<img src="" class="card-img-top" alt="">
+		<div class="card-body">
+			<p class="card-text text-center"></p>
+		</div>
+	</div>
 </div>

scripts/catc.js

@@ -148,6 +148,46 @@ function CATC(asGlobals)
 				);
 			});
 		});
+
+		//Body schemas
+		self.vars('bodies', {'Lymphatic System':'lymphatic_system', 'Muscular System':'muscular_system', 'Nervous System':'nervous_system', 'Skeletal System':'skeletal_system'});
+		$.each(self.vars('bodies'), function(sTitle, sFileName) {
+			var oMain = new Image();
+			oMain.src = 'images/'+sFileName+'.jpg';
+			var oThumb = new Image();
+			oThumb.src = 'images/'+sFileName+'_thumb.jpg';
+			self.vars(['bodies', sTitle], {'thumb':oThumb.src, 'main':oMain.src});
+		});
+		self.elem.$Menu.find('.body').popover({
+			container: '#menu',
+			html: true,
+			content: function() {
+				var $Cards = $('<div>', {'class':'card-deck', 'style':'width:40rem;'});
+				$.each(self.vars('bodies'), function(sTitle, asBody) {
+					var $Card = self.getTemplateItem('bodycard');
+					$Card.find('img').attr({'src':asBody.thumb, 'alt':sTitle});
+					$Card.find('.card-text').text(sTitle);
+					$Card
+						.data('title', sTitle)
+						.hover(function() {$(this).toggleClass('text-white bg-primary');})
+						.appendTo($Cards);
+				});
+				return $Cards;
+			},
+			boundary: 'viewport',
+			placement: 'bottom',
+			trigger: 'click'
+		});
+		$('#body-full').on('show.bs.modal', function(event) {
+			var sTitle = $(event.relatedTarget).data('title');
+			var asBody = self.vars(['bodies', sTitle]);
+			var $Modal = $(this);
+			$Modal.find('img').attr({'src':asBody.main, 'alt':sTitle});
+			$Modal.find('.body-title').text(sTitle);
+		});
+		
+		//Home
+		self.elem.$Menu.find('.home').click(function(){self.setHash(self.consts.default_page);});
 		
 		//log Off
 		$('#log-off').on('show.bs.modal', function(event) {
@@ -155,7 +195,6 @@ function CATC(asGlobals)
 			location.href = self.consts.root;
 		});
 		
-		self.elem.$Menu.find('.home').click(function(){self.setHash(self.consts.default_page);});
 		self.elem.$Menu.slideDown('fast');
 	};
 	

style/_bootstrap.scss

@@ -39,4 +39,16 @@ $font-family-base: $font_para;
 
 .form-control:focus {
 	box-shadow: none;
+}
+
+a.btn {
+	cursor: pointer;
+}
+
+.popover {
+	max-width: 100%;
+}
+
+.modal-fl {
+	max-width: calc(100% - 3.5rem);
 }

style/_font-awesome.scss

@@ -35,6 +35,7 @@ $fa-css-prefix: fa;
 
 //Menu
 .#{$fa-css-prefix}-search:before		{@extend %fa-icon;	@extend .fal;	content: fa-content($fa-var-search); }
+.#{$fa-css-prefix}-body:before			{@extend %fa-icon;	@extend .fal;	content: fa-content($fa-var-child); }
 .#{$fa-css-prefix}-home:before			{@extend %fa-icon;	@extend .fal;	content: fa-content($fa-var-home); }
 .#{$fa-css-prefix}-logoff:before		{@extend %fa-icon;	@extend .fal;	content: fa-content($fa-var-sign-out-alt);}
 

style/_template.scss

@@ -149,6 +149,10 @@ a.button:active {
 		top: 50%;
 		transform: translateY(-50%);
 	}
+
+	.popover {
+		z-index: 1040;
+	}
 }
 
 /* Search bar */