Added Parent Link to the logo

README.md

@@ -18,7 +18,7 @@ The attributes listed below are properly formatted as JSON in [*example.json*](h
 
 ### Attributes
 
-The Logo attribute group contains values for **_isEnabled**, **_position**, **_graphic**, and **_title**.
+The Logo attribute group contains values for **_isEnabled**, **_position**, **_graphic**, **_title**, and **_link**.
 
 >**_isEnabled** (boolean):  Turns on and off the **Logo** extension. Can be set to disable **Logo** when not required.
 
@@ -44,8 +44,14 @@ The Logo attribute group contains values for **_isEnabled**, **_position**, **_g
 
 >>**small** (string): Defines the title on a small sized device.  
 
+>**_link** (object): This `_link` attributes group stores the properties for a link on the button. It contains values for **_isEnabled**, and **_parentPage**.  
+
+>>**_isEnabled** (boolean):  If set to `true`, the link button will be active.
+
+>>**_parentPage** (boolean):  If set to `true`, the link will be the parent of the current page.
+
 ----------------------------
-**Version number:**  2.1.0    
+**Version number:**  2.2.0    
 **Framework versions supported:**  2+    
 **Author / maintainer:** DeltaNet with [contributors](https://github.com/deltanet/adapt-logo/graphs/contributors)     
 **Accessibility support:** Yes  

bower.json

@@ -1,6 +1,6 @@
 {
 	"name": "adapt-logo",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"framework": ">=2",
 	"homepage": "https://github.com/deltanet/adapt-logo",
 	"issues": "https://github.com/deltanet/adapt-logo/issues",

example.json

@@ -13,5 +13,9 @@
       "large": "",
       "medium": "",
       "small": ""
+  },
+  "_link": {
+      "_isEnabled": true,
+      "_parentPage": true
   }
 }

js/logoView.js

@@ -6,6 +6,10 @@ define([
 
         className: 'logo',
 
+        events: {
+            'click .logo-button': 'onClick'
+        },
+
         initialize: function() {
             this.listenTo(Adapt.config, 'change:_activeLanguage', this.remove);
             this.listenTo(Adapt, 'device:changed', this.setupLogo);
@@ -17,7 +21,7 @@ define([
             var template = Handlebars.templates['logo'];
 
             // Check position
-            if (Adapt.course.get('_logo')._position == "left" || Adapt.course.get('_logo')._position == "right") {
+            if (this.model.get('_position') == "left" || this.model.get('_position') == "right") {
                 this.$el.html(template(data)).prependTo('.navigation'+'>.navigation-inner');
             } else {
                 this.$el.html(template(data)).appendTo('.navigation'+'>.navigation-inner');
@@ -35,42 +39,42 @@ define([
             this.title = "";
 
             // Add image if enabled
-            if (Adapt.course.get('_logo')._graphic._isEnabled) {
+            if (this.model.get('_graphic')._isEnabled) {
               // Check device size
               switch (this.deviceSize) {
               case "large":
-                this.image = Adapt.course.get('_logo')._graphic._large;
+                this.image = this.model.get('_graphic')._large;
                 break;
               case "medium":
-                this.image = Adapt.course.get('_logo')._graphic._medium;
+                this.image = this.model.get('_graphic')._medium;
                 break;
               default:
                 // If "small"
-                this.image = Adapt.course.get('_logo')._graphic._small;
+                this.image = this.model.get('_graphic')._small;
               }
               // Add image
               this.$('img').attr('src', this.image);
             }
             // add title if enabled
-            if (Adapt.course.get('_logo')._title._isEnabled) {
+            if (this.model.get('_title')._isEnabled) {
               // Check device size
               switch (this.deviceSize) {
               case "large":
-                this.title = Adapt.course.get('_logo')._title.large;
+                this.title = this.model.get('_title').large;
                 break;
               case "medium":
-                this.title = Adapt.course.get('_logo')._title.medium;
+                this.title = this.model.get('_title').medium;
                 break;
               default:
                 // If "small"
-                this.title = Adapt.course.get('_logo')._title.small;
+                this.title = this.model.get('_title').small;
               }
               // Add title
               this.$('.course-title').html(this.title);
             }
 
             // Add class to logo
-            this.$el.addClass(Adapt.course.get('_logo')._position);
+            this.$el.addClass(this.model.get('_position'));
 
             // Hide elements if they are empty
             if (this.image == "") {
@@ -84,7 +88,20 @@ define([
             } else {
                 this.$('.course-title').show();
             }
+        },
+
+        onClick: function(event) {
+            if (event && event.preventDefault) event.preventDefault();
 
+            var currentId = Adapt.location._currentId;
+            var parentId = Adapt.contentObjects.findWhere({ _id: currentId }).get('_parentId');
+
+            // Don't continue if the page is in the root of the course
+            if (parentId === "course") return;
+
+            if (this.model.get('_link')._parentPage) {
+              Adapt.trigger('navigation:parentButton');
+            }
         }
 
     });

less/logo.less

@@ -1,5 +1,11 @@
 .logo {
 
+  .logo-button {
+    &.inactive {
+      cursor: default;
+    }
+  }
+
   .course-title {
     padding: @navigation-padding / 2;
     color: @tertiary-color-inverted;
@@ -29,11 +35,15 @@
   }
 
   &.center {
-    width: 100%;
     text-align: center;
     position: absolute;
     top: 0;
-    z-index: -1;
+
+    left: 50%;
+    -ms-transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+
     .logo-inner {
       display: inline-block;
     }
@@ -52,5 +62,4 @@
       float: left;
     }
   }
-
 }

properties.schema

@@ -40,7 +40,7 @@
                 "_graphic": {
                   "type":"object",
                   "required": false,
-                  "title": "Graphic",
+                  "legend": "Graphic",
                   "properties":{
                     "_isEnabled": {
                       "type":"boolean",
@@ -82,7 +82,7 @@
                 "_title": {
                   "type":"object",
                   "required":false,
-                  "title": "Title",
+                  "legend": "Title",
                   "properties":{
                     "_isEnabled": {
                       "type":"boolean",
@@ -123,6 +123,29 @@
                       "translatable": true
                     }
                   }
+                },
+                "_link": {
+                  "type": "object",
+                  "required": false,
+                  "legend": "Link",
+                  "properties":{
+                    "_isEnabled": {
+                      "type": "boolean",
+                      "required": true,
+                      "default": false,
+                      "title": "Is Enabled",
+                      "inputType": "Checkbox",
+                      "validators": []
+                    },
+                    "_parentPage": {
+                      "type": "boolean",
+                      "required": true,
+                      "default": true,
+                      "title": "Link To Parent Page",
+                      "inputType": "Checkbox",
+                      "validators": []
+                    }
+                  }
                 }
               }
             }

templates/logo.hbs

@@ -1,6 +1,15 @@
 <div class="logo-inner">
+  {{#if _link._isEnabled}}
+  <button class="base logo-button">
+    <div class="course-logo">
+      <img src="" class="a11y-ignore" aria-hidden="true"/>
+    </div>
+    <div class="course-title"></div>
+  </button>
+  {{else}}
   <div class="course-logo">
     <img src="" class="a11y-ignore" aria-hidden="true"/>
   </div>
   <div class="course-title"></div>
+  {{/if}}
 </div>