Merge pull request #51 from RyanHavoc/feature/show-code

New Feature: Hide Code Sample
NoDivide · Aug 15, 2016 · af40d29 · af40d29
2 parents 81e38ce + fb49946
commit af40d29
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -353,7 +353,8 @@ Components can also have special options that alter their behaviour. To use thes
     "name": "primary",
     "title": "Primary Navigation",
     "options": {
-	      "sample_dark_background": true
+	      "sample_dark_background": true,
+	      "disable_code_sample": true
     }
 }
 ```
@@ -366,6 +367,7 @@ sample_dark_background|boolean|Set the background of the component sample area t
 sample_background_color|string|Override sample background color. This option take precident over the dark background color.
 sample_min_height|integer|Astrum detects if a component is hidden at desktop or mobile resolutions by detecting the components rendered height. When it’s hidden in your project CSS, Astrum shows a message to this effect. If the component is absolutely positioned, it has no height so you can set a min-height with this option to ensure it is shown properly and Astrum messaging is shown correctly.
 disable_auto_sample_hiding|object|Astrum automatically detects if you've hidden a component at mobile or desktop resolutions in your stylesheets. You can disable this feature using this option. Add `show_on_mobile` and `show_on_desktop` keys to the object with boolean values to set how the component should behave.
+disable_code_sample|boolean|Don't display the component code sample.
 
 <a href=“#editing-components”></a>
 ## Editing Components

diff --git a/_template/app/css/styles.css b/_template/app/css/styles.css
@@ -1053,6 +1053,9 @@
         border-radius: 6px 6px 0 0;
         padding: 36px;
     }
+    .ndpl-component__sample--disabled-code {
+        border-radius: 6px;
+    }
     .ndpl-component__sample-missing,
     .ndpl-component__sample-hidden {
         margin: 0;

diff --git a/_template/app/css/styles.min.css b/_template/app/css/styles.min.css
diff --git a/_template/app/js/main.js b/_template/app/js/main.js
@@ -257,8 +257,6 @@ var ndplScript = Vue.extend({
          * Loads TypeKit.
          */
         loadTypekit: function() {
-            var _this = this;
-
             try {
                 Typekit.load({
                     async: true
@@ -571,6 +569,7 @@ new Vue({
                     _this.$set('groups[' + i + '].components[' + j + '].options.sample_always_show', group.components[j].options.sample_always_show ? group.components[j].options.sample_always_show : false);
                     _this.$set('groups[' + i + '].components[' + j + '].options.sample_mobile_hidden', group.components[j].options.sample_mobile_hidden ? group.components[j].options.sample_mobile_hidden : false);
                     _this.$set('groups[' + i + '].components[' + j + '].options.sample_dark_background', group.components[j].options.sample_dark_background ? group.components[j].options.sample_dark_background : false);
+                    _this.$set('groups[' + i + '].components[' + j + '].options.disable_code_sample', group.components[j].options.disable_code_sample ? group.components[j].options.disable_code_sample : false);
                     _this.$set('groups[' + i + '].components[' + j + '].code_show', false);
                     _this.$set('groups[' + i + '].components[' + j + '].type', group.components[j].type ? group.components[j].type : 'standard');
                     _this.$set('groups[' + i + '].components[' + j + '].width', group.components[j].width ? group.components[j].width : 'full');
@@ -854,4 +853,4 @@ new Vue({
             return Math.round(((parseInt(rgb.r) * 299) + (parseInt(rgb.g) * 587) + (parseInt(rgb.b) * 114)) /1000);
         }
     }
-});
+});
diff --git a/_template/app/js/main.min.js b/_template/app/js/main.min.js
diff --git a/_template/index.html b/_template/index.html
@@ -247,7 +247,10 @@ <h3 class="ndpl-component__title">{{ component.title }}</h3>
                                              v-show="isCodeVisible()">
 
                                             <div class="ndpl-component__sample ndpl-c-border"
-                                                 :class="{ 'ndpl-component__sample--inverted': component.options.sample_dark_background }"
+                                                 :class="{
+                                                    'ndpl-component__sample--inverted': component.options.sample_dark_background,
+                                                    'ndpl-component__sample--disabled-code': component.options.disable_code_sample
+                                                 }"
                                                  :style="inline_styles"
                                                  v-if="component.html">
                                                 {{{ component.html }}}
@@ -258,7 +261,8 @@ <h3 class="ndpl-component__title">{{ component.title }}</h3>
                                                      v-show="component.code_show">
                                                     <pre class="ndpl-pre"><code class="ndpl-code html" v-text="component.html"></code></pre>
                                                 </div>
-                                                <a class="ndpl-component__code-toggle ndpl-c-highlight ndpl-c-border"
+                                                <a v-if="!component.options.disable_code_sample"
+                                                   class="ndpl-component__code-toggle ndpl-c-highlight ndpl-c-border"
                                                    @click.prevent="component.code_show = ! component.code_show"
                                                    v-text="component.code_show ? 'Hide code sample' : 'Show code sample'"></a>
                                             </template>

diff --git a/manager/astrum-edit.js b/manager/astrum-edit.js
@@ -32,7 +32,7 @@ if (group_name) {
     var parts = group_name.split('/'),
         existingComponentIndex = utils.getComponentIndex(group_name),
         existingGroupIndex = utils.getGroupIndex(parts[0]);
-    
+
     if (existingComponentIndex !== undefined) {
         var component = utils.getComponent(group_name);
 
@@ -100,6 +100,24 @@ if (group_name) {
                     return false;
                 }
             },
+            {
+                when: function () {
+                    return !program.type || program.type !== 'colors';
+                },
+                type: 'confirm',
+                name: 'disable_code_sample',
+                message: function () {
+                    return 'Disable code sample?'
+                },
+                default: function() {
+                    if(component.hasOwnProperty('options') &&
+                       component.options.hasOwnProperty('disable_code_sample')) {
+                        return component.options.disable_code_sample;
+                    }
+
+                    return false;
+                }
+            },
             {
                 type: 'confirm',
                 name: 'change_group',
@@ -220,6 +238,19 @@ if (group_name) {
                 editedComponent.options.sample_dark_background = true;
             }
 
+            if(!answers.disable_code_sample &&
+               editedComponent.hasOwnProperty('options') &&
+                editedComponent.options.hasOwnProperty('disable_code_sample')) {
+                delete editedComponent.options.disable_code_sample;
+            }
+
+            if (answers.disable_code_sample) {
+                if(!editedComponent.hasOwnProperty('options')) {
+                    editedComponent.options = {};
+                }
+                editedComponent.options.disable_code_sample = true;
+            }
+
             //// If creating a new group
             if (answers.new_group == 'create_new_group') {
                 var newGroup = {};
@@ -250,11 +281,10 @@ if (group_name) {
             }
 
             if (!error) {
-
                 // Remove original component in data
                 utils.$data.groups[existingGroupIndex].components.splice(existingComponentIndex, 1);
                 utils.$data.groups[editedGroupIndex].components.splice(answers.component_position, 0, editedComponent);
-                
+
                 // Move component files
                 if (utils.moveComponentFiles(originalComponent, editedComponent)) {
 
@@ -374,4 +404,4 @@ if (program.group) {
     } else {
         console.log(chalk.red('Error: Group not found.'));
     }
-}
+}
diff --git a/manager/astrum-new.js b/manager/astrum-new.js
@@ -93,6 +93,17 @@ if (group_name) {
                     return 'Apply a dark background to the code sample?'
                 },
                 default: false
+            },
+            {
+                when: function () {
+                    return !program.type || program.type !== 'colors';
+                },
+                type: 'confirm',
+                name: 'disable_code_sample',
+                message: function () {
+                    return 'Disable code sample?'
+                },
+                default: false
             }
         ]).then(function (answers) {
             var typeColor = program.type && program.type == 'colors';
@@ -103,6 +114,10 @@ if (group_name) {
                 newComponent.options = {};
                 newComponent.options.sample_dark_background = answers.sample_dark_background;
             }
+            if (answers.disable_code_sample) {
+                newComponent.options = {};
+                newComponent.options.disable_code_sample = answers.disable_code_sample;
+            }
 
             if (typeColor) {
                 newComponent.type = 'colors';

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "astrum",
-  "version": "1.5.17",
+  "version": "1.6.1",
   "description": "A lightweight pattern library designed to be included with any web project.",
   "main": "./manager/astrum.js",
   "scripts": {