updated theme handling; removed functionality which kept track of sel…

…ected item
mozbrick · Jul 29, 2014 · 1405819 · 1405819
1 parent 5596a32
commit 1405819
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 50 deletions.
diff --git a/src/brick-menu.css → dist/brick-menu.html b/src/brick-menu.css → dist/brick-menu.html
@@ -1,4 +1,4 @@
-/**
+<style>/**
  * example:
  *  & > [horizontal-lt-s/m/l] { mixin() }
  *  & > [horizontal-gt-xs/s/m] { mixin() }
@@ -13,6 +13,9 @@
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
   flex-direction: column;
 }
 @media (max-width: 768px) {
@@ -274,3 +277,30 @@
   width: 100%;
   margin: 0 !important;
 }
+</style>
+<style>brick-menu {
+  padding: 0 14px;
+  box-sizing: border-box;
+}
+brick-menu > * {
+  color: #4d4d4d;
+  padding: 14px 0;
+  border-bottom: 1px solid #e7e7e7;
+}
+brick-menu > *:last-child {
+  border-bottom: none;
+}
+brick-menu[horizontal] {
+  padding: 14px 0;
+}
+brick-menu[horizontal] > * {
+  padding: 0 14px;
+  border-bottom: none;
+  border-right: 1px solid #e7e7e7;
+}
+brick-menu[horizontal] > *:last-child {
+  border-right: none;
+}
+</style>
+
+<script src="brick-menu.js"></script>
diff --git a/dist/brick-menu.js b/dist/brick-menu.js
@@ -0,0 +1,10 @@
+(function () {
+
+  var BrickMenuElementPrototype = Object.create(HTMLElement.prototype);
+
+  // Register the element
+  window.BrickMenuElement = document.registerElement('brick-menu', {
+    prototype: BrickMenuElementPrototype
+  });
+
+})();
diff --git a/gulpfile.js b/gulpfile.js
@@ -8,12 +8,15 @@ var ghpages = require('gulp-gh-pages');
 var gulp = require('gulp');
 var helptext = require('gulp-helptext');
 var jshint = require('gulp-jshint');
+var rm = require('gulp-rm');
 var stylus = require('gulp-stylus');
+var vulcanize = require('gulp-vulcanize');
 
 var paths = {
   'main': 'src/brick-menu.html',
   'scripts': 'src/*.js',
   'stylesheets': 'src/*.styl',
+  'themes': 'src/themes/**/*.styl',
   'src': 'src/*',
   'index': 'index.html',
   'bowerComponents': 'bower_components/**/*'
@@ -26,26 +29,51 @@ gulp.task('lint', function() {
 });
 
 gulp.task('styles', function() {
-  gulp.src(paths.stylesheets)
+  return gulp.src(paths.stylesheets)
     .pipe(stylus())
     .pipe(concat('brick-menu.css'))
     .pipe(gulp.dest('src'));
 });
 
-// build scripts and styles
-gulp.task('build', ['lint','styles']);
+gulp.task('themes', function() {
+  return gulp.src(paths.themes)
+    .pipe(stylus())
+    .pipe(gulp.dest('src/themes/'));
+});
 
+gulp.task('clean', ['vulcanize'], function() {
+  gulp.src(['src/*.css', 'src/themes/**/*.css'])
+    .pipe(rm());
+});
+
+gulp.task('vulcanize', ['styles','themes'], function() {
+  return gulp.src('src/brick-menu.html')
+    .pipe(vulcanize({
+      excludes: {
+        imports: ['bower_components'],
+        scripts: ['bower_components'],
+        styles: ['bower_components']
+      },
+      dest: 'dist',
+      csp: true,
+      inline: true
+    }))
+    .pipe(gulp.dest('dist'));
+});
+
+// build scripts and styles
+gulp.task('build', ['lint','styles','themes','vulcanize', 'clean']);
 
 gulp.task('connect', function() {
   connect.server({
     port: 3001
   });
 });
 
-
 gulp.task('watch', function () {
   gulp.watch(paths.scripts, ['lint']);
-  gulp.watch(paths.stylesheets, ['styles']);
+  gulp.watch(paths.stylesheets, ['build']);
+  gulp.watch(paths.themes, ['build']);
 });
 
 // do a build, start a server, watch for changes
@@ -61,7 +89,9 @@ gulp.task('bump', function(){
 gulp.task('help', helptext({
   'default': 'Shows the help message',
   'help': 'This help message',
-  'styles': 'Compiles stylus',
+  'styles': 'Compiles main stylus',
+  'themes': 'Compiles themes stylus',
+  'vulcanize': 'Vulcanizes to component html file',
   'lint': 'Runs JSHint on your code',
   'server': 'Starts the development server',
   'bump': 'Bumps up the Version',

diff --git a/index.html b/index.html
@@ -9,17 +9,13 @@
     <script src="bower_components/platform/platform.js"></script>
 
     <!-- Importing Custom Elemenent -->
-    <link rel="import" href="src/brick-menu.html">
+    <link rel="import" href="dist/brick-menu.html">
   </head>
   <body>
-    <style>
-      brick-menu > [selected] {
-        font-weight: bold;
-      }
-    </style>
+
     <!-- Using Custom Element -->
     <brick-menu>
-      <span selected>item 1</span>
+      <span>item 1</span>
       <span>item 2</span>
       <span>item 3</span>
       <span>item 4</span>
@@ -28,7 +24,7 @@
     <br>
 
     <brick-menu horizontal>
-      <span selected>item 1</span>
+      <span>item 1</span>
       <span>item 2</span>
       <span>item 3</span>
       <span>item 4</span>

diff --git a/package.json b/package.json
@@ -29,7 +29,10 @@
     "gulp-gh-pages": "^0.3.3",
     "gulp-helptext": "0.0.6",
     "gulp-jshint": "^1.6.1",
+    "gulp-rm": "^0.2.0",
     "gulp-stylus": "^1.0.1",
+    "gulp-util": "^3.0.0",
+    "gulp-vulcanize": "^0.2.1",
     "karma": "^0.12.16",
     "karma-chai": "^0.1.0",
     "karma-firefox-launcher": "^0.1.3",

diff --git a/src/brick-menu.html b/src/brick-menu.html
@@ -1,2 +1,3 @@
 <link rel="stylesheet" href="brick-menu.css">
+<link rel="stylesheet" href="themes/default/default.css">
 <script src="brick-menu.js"></script>
diff --git a/src/brick-menu.js b/src/brick-menu.js
@@ -1,42 +1,7 @@
 (function () {
 
-  function delegateChild(handler) {
-    return function(e) {
-      var target = e.target;
-      var delegateEl = e.currentTarget;
-      for (var el = target; el.parentNode && el !== delegateEl; el = el.parentNode) {
-        if (delegateEl === el.parentNode) {
-          handler.call(el, e);
-          return;
-        }
-      }
-    };
-  }
-
-  function _selectItem(item) {
-    var selectedItems = item.parentNode.querySelectorAll('*[selected]');
-    for (var i = 0; i < selectedItems.length; i++) {
-      selectedItems[i].removeAttribute('selected');
-    }
-    item.setAttribute('selected', true);
-  }
-
   var BrickMenuElementPrototype = Object.create(HTMLElement.prototype);
 
-  BrickMenuElementPrototype.attachedCallback = function () {
-    var self = this;
-    self.selectHandler = delegateChild(function(){
-      _selectItem(this);
-    });
-    self.addEventListener("click", self.selectHandler);
-    self.addEventListener("select", self.selectHandler);
-  };
-
-  BrickMenuElementPrototype.detachedCallback = function () {
-    this.removeEventListener("click", this.selectHandler);
-    this.removeEventListener("select", this.selectHandler);
-  };
-
   // Register the element
   window.BrickMenuElement = document.registerElement('brick-menu', {
     prototype: BrickMenuElementPrototype

diff --git a/src/brick-menu.styl b/src/brick-menu.styl
@@ -49,6 +49,10 @@ responsify(selector, attr, content) {
 brick-menu {
 
   flexbox();
+  width: 100%;
+  margin: 0;
+  padding: 0;
+
 
   // vertical
   flex-direction: column;

diff --git a/src/themes/default/default.styl b/src/themes/default/default.styl
@@ -0,0 +1,44 @@
+$color-alpha = #333;
+$color-beta = #FFF;
+$color-gamma = #4D4D4D;
+$color-delta = #5F5F5F;
+$color-epsilon = #858585;
+$color-zeta = #A6A6A6;
+$color-eta = #C7C7C7;
+$color-theta = #E7E7E7;
+$color-iota = #F4F4F4;
+$button-transition = all 0s;
+$button-transition-delay = 300ms;
+$dim-micro = 6px;
+$dim-small = 14px;
+$dim-mega = 60px;
+$highlight-color = #000;
+
+// TODO: icons + icon sizing
+
+brick-menu {
+
+  padding: 0 $dim-small;
+  box-sizing: border-box;
+  & > * {
+    color: $color-gamma;
+    padding: $dim-small 0;
+    border-bottom: 1px solid $color-theta;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &[horizontal] {
+    padding: $dim-small 0;
+    & > * {
+      padding: 0 $dim-small;
+      border-bottom: none;
+      border-right: 1px solid $color-theta;
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+
+}