ember-paper - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

addon/components/base-focusable.js

@@ -10,4 +10,12 @@ import Ember from 'ember';
   hover:false,
-  classNameBindings: ['disabled','pressed','active','focus','hover'],
+  attributeBindings: ['disabledAttr:disabled'],
 
+  /*
+   * Not binding boolean values in Ember 1.8.1?
+   * https://github.com/emberjs/ember.js/issues/9595
+   */
+  disabledAttr:function(){
+    return this.get('disabled') ? 'disabled' : null;
+  }.property('disabled'),
+
   toggle:false,
@@ -45,6 +53,2 @@
   },
-  contextMenu:function(){
-    this.up();
-    this.focusIn();
-  },
   up:function(){
@@ -51,0 +55,0 @@ this.set('pressed',false);

addon/components/paper-button.js

@@ -7,8 +7,8 @@ import Ember from 'ember';
 export default BaseFocusable.extend(ShadowMixin,RippleMixin,{
-  classNames:['paper-button'],
+  tagName:'button',
+  classNames:['md-button','md-default-theme'],
 
   /* RippleMixin overrides */
-  animationName: 'inkRippleButton',
-  animationDuration: 350,
-  mousedownPauseTime: 175,
+  center: false,
+  dimBackground: true,
 
@@ -32,3 +32,2 @@ /* ShadowMixin properties */
     if (active || focus || hover) {
-      this.sendAction('action', this.get('param'));
       this.set('z',this.get('activeZ'));
@@ -40,3 +39,7 @@ } else if (disabled) {
     }
-  })
+  }),
+
+  click:function(){
+    this.sendAction();
+  }
 });

addon/components/paper-checkbox.js

@@ -1,2 +0,1 @@
-import Ember from 'ember';
 import BaseFocusable from './base-focusable';
@@ -8,5 +7,11 @@ import RippleMixin from '../mixins/ripple-mixin';
 export default BaseFocusable.extend(RippleMixin,{
-  classNames:['paper-checkbox'],
-  classNameBindings:['checked:paper-checked'],
+  tagName:'md-checkbox',
+  classNames:['md-checkbox','md-default-theme'],
+  classNameBindings:['checked:md-checked'],
 
+  /* RippleMixin overrides */
+  center: true,
+  dimBackground: false,
+  rippleContainerSelector:'.md-container',
+
   //Alow element to be focusable by supplying a tabindex 0
@@ -20,10 +25,3 @@ attributeBindings:['tabindex'],
   toggle:true,
-  rippleContainerSelector:'.paper-container',
 
-  center: true,
-  animationDuration: 300,
-  mousedownPauseTime: 180,
-  animationName: 'inkRippleCheckbox',
-  animationTimingFunction: 'linear',
-
   click:function(){
@@ -30,0 +28,0 @@ if(!this.get('disabled')){

addon/components/paper-content.js

 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  classNames:['paper-content','sidenav-static-content']
-});
+  tagName:'md-content',
+  classNames:['md-content']
+});

addon/components/paper-radio.js

@@ -6,14 +6,10 @@ import Ember from 'ember';
 export default BaseFocusable.extend(RippleMixin,{
-  classNames:['paper-radio'],
-  classNameBindings:['checked:paper-checked'],
+  tagName:'md-radio-button',
+  classNames:['md-radio-button','md-default-theme'],
+  classNameBindings:['checked:md-checked'],
   toggle:false,
 
   center: true,
-  animationDuration: 300,
-  mousedownPauseTime: 180,
-  animationName: 'inkRippleCheckbox',
-  animationTimingFunction: 'linear',
+  rippleContainerSelector:'.md-container',
 
-  rippleContainerSelector:'.paper-container',
-
   checked: function() {
@@ -20,0 +16,0 @@ return this.get('value') === this.get('selected');

addon/components/paper-sidenav.js

@@ -13,2 +13,2 @@ import Ember from 'ember';
   }
-});
+});

addon/components/paper-toggle.js

@@ -1,9 +0,13 @@
-import Ember from 'ember';
 import BaseFocusable from './base-focusable';
 
 export default BaseFocusable.extend({
-  classNames:['paper-toggle'],
-  classNameBindings:['checked'],
+  tagName:'md-switch',
+  classNames:['md-switch','md-default-theme'],
   toggle:true,
-  checked:Ember.computed.alias('active')
+
+  click:function(){
+    if(!this.get('disabled')){
+      this.toggleProperty('value');
+    }
+  }
 });

addon/mixins/ripple-mixin.js

 import Ember from 'ember';
-import sniffer from '../utils/sniffer';
+/* global Hammer */
 
-var webkit = /webkit/i.test(sniffer.vendorPrefix);
-function vendorProperty(name) {
-  return webkit ?
-    ('webkit' + name.charAt(0).toUpperCase() + name.substring(1)) :
-    name;
-}
-
-var TRANSITIONEND_EVENT = 'transitionend' + (webkit ? ' webkitTransitionEnd' : ''),
-  ANIMATIONEND_EVENT = 'animationend' + (webkit ? ' webkitAnimationEnd' : ''),
-  TRANSFORM = vendorProperty('transform'),
-  TRANSITION = vendorProperty('transition'),
-  TRANSITION_DURATION = vendorProperty('transitionDuration'),
-  ANIMATION_PLAY_STATE = vendorProperty('animationPlayState'),
-  ANIMATION_DURATION = vendorProperty('animationDuration'),
-  ANIMATION_NAME = vendorProperty('animationName'),
-  ANIMATION_TIMING = vendorProperty('animationTimingFunction'),
-  ANIMATION_DIRECTION = vendorProperty('animationDirection');
-
 export default Ember.Mixin.create({
-  //classNames:['paper-ripple'],
-  noink:false,
-
-  /* DEFAULT RIPPLE OPTIONS */
+  mousedown: true,
+  hover: true,
+  focus: true,
   center: false,
-  animationDuration: 300,
   mousedownPauseTime: 150,
-  animationName: '',
-  animationTimingFunction: 'linear',
+  dimBackground: false,
+  outline: false,
+  isFAB: false,
+  isMenuItem: false,
 
-  cantRipple:Ember.computed.any('noink','disabled'),
-  cantRippleDidChange:function(){
-    if(!this.get('cantRipple')){
-      this.hammertime = new Hammer(this.$()[0]);
-      this.hammertime.on('hammer.input', Ember.$.proxy(this.onInput,this));
+  isActive: false,
+  isHeld: false,
+  counter:0,
+
+  ripples:[],
+  rippleStates:[],
+
+  rippleContainerSelector:'',
+
+  onDidInsertElement:function(){
+    if(!this.noink){
+      this.element = this.$();
+      this.colorElement = this.$();
+      this.node = this.element[0];
+      this.hammertime = new Hammer(this.node);
+      this.color = this.parseColor(this.element.attr('md-ink-ripple')) || this.parseColor(window.getComputedStyle(this.colorElement[0]).color || 'rgb(0, 0, 0)');
+      if(this.mousedown){
+        this.hammertime.on('hammer.input', Ember.$.proxy(this.onInput,this));
+      }
     }
-  }.observes('cantRipple').on('didInsertElement'),
+  }.on('didInsertElement'),
 
   onWillDestroyElement:function(){
-    if(this.get('cantRipple')){
-      if(this.rippleContainer){
-        this.rippleContainer.remove();
-      }
-      if(this.hammertime){
-        this.hammertime.destroy();
-      }
+    if(this.rippleContainer){
+      this.rippleContainer.remove();
     }
-  }.observes('cantRipple').on('willDestroyElement'),
+    if(this.hammertime){
+      this.hammertime.destroy();
+    }
+  }.on('willDestroyElement'),
 
   onInput:function(ev){
-    if (ev.eventType === Hammer.INPUT_START && ev.isFirst) {
-      this.createRipple(ev.center.x, ev.center.y, true);
+    var ripple, index;
+    if (ev.eventType === Hammer.INPUT_START && ev.isFirst && !this.get('disabled')) {
+      ripple = this.createRipple(ev.center.x, ev.center.y);
+      this.isHeld = true;
+    } else if (ev.eventType === Hammer.INPUT_END && ev.isFinal) {
+      this.isHeld = false;
+      index = this.ripples.length - 1;
+      ripple = this.ripples[index];
+      Ember.run.later(this,function(){
+        this.updateElement(ripple);
+      }, 0);
     }
-    //TODO handle mouse hold case
   },
-
-  // Override to place ripple container in a different element,
-  // otherwise it will be appended on root element
-  rippleContainerSelector:'',
-  rippleContainer:null,
-  createRippleContainer:function(){
-    if(!this.rippleContainer){
-      this.rippleContainer = Ember.$('<div class="paper-ripple-container">');
-      this.$(this.rippleContainerSelector).append(this.rippleContainer);
+  /**
+  * Gets the current ripple container
+  * If there is no ripple container, it creates one and returns it
+  *
+  * @returns {angular.element} ripple container element
+  */
+  getRippleContainer: function() {
+    if (this.rippleContainer){
+      return this.rippleContainer;
     }
+    this.rippleContainer = Ember.$('<div class="md-ripple-container">');
+    this.$(this.rippleContainerSelector).append(this.rippleContainer);
     return this.rippleContainer;
   },
-  createRippleElement:function(){
-    var rippleEl = Ember.$('<div class="paper-ripple">')
-      .css(ANIMATION_DURATION, this.get('animationDuration') + 'ms')
-      .css(ANIMATION_NAME, this.get('animationName'))
-      .css(ANIMATION_TIMING, this.get('animationTimingFunction'))
-      .on(ANIMATIONEND_EVENT, function() {
-        rippleEl.remove();
-      });
-    return rippleEl;
+  /**
+  * Creates the ripple element with the provided css
+  *
+  * @param {object} css properties to be applied
+  *
+  * @returns {angular.element} the generated ripple element
+  */
+  getRippleElement: function(css) {
+    var elem = Ember.$('<div class="md-ripple" data-counter="' + this.counter++ + '">');
+    this.ripples.unshift(elem);
+    this.rippleStates.unshift({ animating: true });
+    this.rippleContainer.append(elem);
+    if(css){
+      elem.css(css);
+    }
+    return elem;
   },
-  createRipple:function(left, top, positionsAreAbsolute){
-    var rippleEl = this.createRippleElement();
-    var rippleContainer = this.createRippleContainer();
+  /**
+  * Calculate the ripple size
+  *
+  * @returns {number} calculated ripple diameter
+  */
+  getRippleSize: function(left, top) {
+    var width = this.rippleContainer.prop('offsetWidth'),
+    height = this.rippleContainer.prop('offsetHeight'),
+    multiplier, size, rect;
+    if (this.isMenuItem) {
+      size = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+    } else if (this.outline) {
+      rect = this.node.getBoundingClientRect();
+      left -= rect.left;
+      top -= rect.top;
+      width = Math.max(left, width - left);
+      height = Math.max(top, height - top);
+      size = 2 * Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+    } else {
+      multiplier = this.isFAB ? 1.1 : 0.8;
+      size = Math.max(width, height) * multiplier;
+    }
+    return size;
+  },
+  parseColor: function(color) {
+    if (!color){ return; }
+    if (color.indexOf('rgba') === 0){ return color; }
+    if (color.indexOf('rgb')  === 0){ return rgbToRGBA(color); }
+    if (color.indexOf('#')    === 0){ return hexToRGBA(color); }
 
-    rippleContainer.append(rippleEl);
+    /**
+    * Converts a hex value to an rgba string
+    *
+    * @param {string} hex value (3 or 6 digits) to be converted
+    *
+    * @returns {string} rgba color with 0.1 alpha
+    */
+    function hexToRGBA(color) {
+      var hex = color.charAt(0) === '#' ? color.substr(1) : color,
+      dig = hex.length / 3,
+      red = hex.substr(0, dig),
+      grn = hex.substr(dig, dig),
+      blu = hex.substr(dig * 2);
+      if (dig === 1) {
+        red += red;
+        grn += grn;
+        blu += blu;
+      }
+      return 'rgba(' + parseInt(red, 16) + ',' + parseInt(grn, 16) + ',' + parseInt(blu, 16) + ',0.1)';
+    }
 
-    var containerWidth = rippleContainer.prop('offsetWidth');
-
-    if (this.center) {
-      left = containerWidth / 2;
-      top = rippleContainer.prop('offsetHeight') / 2;
-    } else if (positionsAreAbsolute) {
-      var elementRect = this.$()[0].getBoundingClientRect();
-      left -= elementRect.left;
-      top -= elementRect.top;
+    /**
+    * Converts rgb value to rgba string
+    *
+    * @param {string} rgb color string
+    *
+    * @returns {string} rgba color with 0.1 alpha
+    */
+    function rgbToRGBA(color) {
+      return color.replace(')', ', 0.1)').replace('(', 'a(');
     }
 
-    var css = {
-      'background-color': window.getComputedStyle(rippleEl[0]).color ||
-        window.getComputedStyle(this.$()[0]).color,
-      'border-radius': (containerWidth / 2) + 'px',
+  },
+  /**
+  * Creates a ripple at the provided coordinates
+  *
+  * @param {number} left cursor position
+  * @param {number} top cursor position
+  *
+  * @returns {angular.element} the generated ripple element
+  */
+  createRipple:function(left, top){
+    var color = this.color = this.parseColor(this.element.attr('md-ink-ripple')) || this.parseColor(window.getComputedStyle(this.colorElement[0]).color || 'rgb(0, 0, 0)');
 
-      left: (left - containerWidth / 2) + 'px',
-      width: containerWidth + 'px',
+    var container = this.getRippleContainer(),
+      size = this.getRippleSize(left, top),
+      css = this.getRippleCss(size, left, top),
+      elem = this.getRippleElement(css),
+      index = this.ripples.indexOf(elem),
+      state = this.rippleStates[index] || {};
 
-      top: (top - containerWidth / 2) + 'px',
-      height: containerWidth + 'px'
+    this.rippleSize = size;
+
+    state.animating = true;
+
+    Ember.run.later(this,function () {
+      if (this.dimBackground) {
+        container.css({ backgroundColor: color });
+      }
+      elem.addClass('md-ripple-placed md-ripple-scaled');
+      if (this.outline) {
+        elem.css({
+          borderWidth: (size * 0.5) + 'px',
+          marginLeft: (size * -0.5) + 'px',
+          marginTop: (size * -0.5) + 'px'
+        });
+      } else {
+        elem.css({ left: '50%', top: '50%' });
+      }
+      this.updateElement(elem);
+      Ember.run.later(this,function () {
+        state.animating = false;
+        this.updateElement(elem);
+      }, (this.outline ? 450 : 225));
+    }, 0);
+
+    return elem;
+  },
+  removeElement: function(elem, wait) {
+    var ripples = this.ripples;
+    ripples.splice(ripples.indexOf(elem), 1);
+    if (ripples.length === 0 && this.rippleContainer) {
+      this.rippleContainer.css({ backgroundColor: '' });
+    }
+    Ember.run.later(this,function(){
+      elem.remove();
+    }, wait);
+  },
+  updateElement: function(elem) {
+    var index = this.ripples.indexOf(elem),
+    state = this.rippleStates[index] || {},
+    elemIsActive = this.ripples.length > 1 ? false : this.isActive,
+    elemIsHeld   = this.ripples.length > 1 ? false : this.isHeld;
+    if (elemIsActive || state.animating || elemIsHeld) {
+      elem.addClass('md-ripple-visible');
+    } else if (elem) {
+      elem.removeClass('md-ripple-visible');
+      if (this.outline) {
+        elem.css({
+          width: this.rippleSize + 'px',
+          height: this.rippleSize + 'px',
+          marginLeft: (this.rippleSize * -1) + 'px',
+          marginTop: (this.rippleSize * -1) + 'px'
+        });
+      }
+      this.removeElement(elem, this.outline ? 450 : 650);
+    }
+  },
+  /**
+  * Generates the ripple css
+  *
+  * @param {number} the diameter of the ripple
+  * @param {number} the left cursor offset
+  * @param {number} the top cursor offset
+  *
+  * @returns {{backgroundColor: *, width: string, height: string, marginLeft: string, marginTop: string}}
+  */
+  getRippleCss: function(size, left, top) {
+    var rect,
+    css = {
+      backgroundColor: rgbaToRGB(this.color),
+      borderColor: rgbaToRGB(this.color),
+      width: size + 'px',
+      height: size + 'px'
     };
-    //not being used in angular material
-    //css[ANIMATION_DURATION] = options.fadeoutDuration + 'ms';
-    rippleEl.css(css);
 
-    return rippleEl;
+    if (this.outline) {
+      css.width = 0;
+      css.height = 0;
+    } else {
+      css.marginLeft = css.marginTop = (size * -0.5) + 'px';
+    }
+
+    if (this.center) {
+      css.left = css.top = '50%';
+    } else {
+      rect = this.node.getBoundingClientRect();
+      css.left = Math.round((left - rect.left) / this.rippleContainer.prop('offsetWidth') * 100) + '%';
+      css.top = Math.round((top - rect.top) / this.rippleContainer.prop('offsetHeight') * 100) + '%';
+    }
+
+    return css;
+
+    /**
+    * Converts rgba string to rgb, removing the alpha value
+    *
+    * @param {string} rgba color
+    *
+    * @returns {string} rgb color
+    */
+    function rgbaToRGB(color) {
+      return color.replace('rgba', 'rgb').replace(/,[^\)\,]+\)/, ')');
+    }
   }
 
 });

addon/mixins/shadow-mixin.js

 import Ember from 'ember';
 
 export default Ember.Mixin.create({
-  classNames:['paper-shadow'],
-  classNameBindings:['bottomShadowCSS','animatedShadow:paper-shadow-animated','raised:paper-raised'],
+  classNameBindings:[
+    'raised:md-raised'
+  ],
   raised:false,
@@ -7,0 +8,0 @@ animatedShadow:true,

bower.json

@@ -6,4 +6,3 @@ {
     "jquery": "^1.11.1",
-    "ember": "1.7.0",
-    "ember-data": "1.0.0-beta.10",
+    "ember": "1.8.1",
     "ember-resolver": "~0.1.7",
@@ -10,0 +9,0 @@ "loader.js": "stefanpenner/loader.js#1.0.1",

Brocfile.js

@@ -20,10 +20,4 @@ /* global require, module */
 
-/*app.import('vendor/material-icons/styles.css');
-app.import('vendor/material-icons/fonts/material-icon-font.eot', { destDir: 'fonts' });
-app.import('vendor/material-icons/fonts/material-icon-font.svg', { destDir: 'fonts' });
-app.import('vendor/material-icons/fonts/material-icon-font.ttf', { destDir: 'fonts' });
-app.import('vendor/material-icons/fonts/material-icon-font.woff', { destDir: 'fonts' });
+require('./compile-css')(app.env);
 
-app.import('bower_components/hammerjs/hammer.js');*/
-
 module.exports = app.toTree();

config/environment.js

 'use strict';
+var name = require('../package.json').name;
 
-module.exports = function(/* environment, appConfig */) {
-  return { };
+module.exports = function(environment) {
+  environment = environment || 'development';
+
+  var defaultEnv = {
+    environment: environment,
+    addonPrefix: name,
+    shimName: name + '-shim',
+    sassIncludePath: 'addon/styles/scss/',
+    sassMain: 'addon/styles/scss/main.scss'
+  };
+
+  var ENV = {
+    development: defaultEnv,
+    test: defaultEnv,
+    production: defaultEnv
+  };
+  return ENV[environment];
 };

index.js

@@ -18,9 +18,6 @@ 'use strict';
     //styles in vendor folder for now. Temporary fix.
-    app.import('vendor/ember-paper/paper-ripple.css');
-    app.import('vendor/ember-paper/paper-shadow.css');
-    app.import('vendor/ember-paper/paper-button.css');
-    app.import('vendor/ember-paper/paper-checkbox.css');
-    app.import('vendor/ember-paper/paper-radio.css');
-    app.import('vendor/ember-paper/styles.css');
 
+    app.import('vendor/ember-paper.css');
+    app.import('vendor/ember-paper.css.map');
+
     app.import(app.bowerDirectory+'/hammerjs/hammer.js');
@@ -27,0 +24,0 @@

package.json

 {
   "name": "ember-paper",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "directories": {
@@ -11,3 +11,4 @@ "doc": "doc",
     "build": "ember build",
-    "test": "ember test"
+    "test": "ember test",
+    "sass": "node -e \"require('./compile-css.js')()\""
   },
@@ -29,10 +30,10 @@ "repository": "https://github.com/miguelcobain/ember-paper",
     "broccoli-static-compiler": "^0.1.4",
-    "ember-cli": "0.1.2",
+    "ember-cli": "^0.1.4",
     "ember-cli-ic-ajax": "0.1.1",
     "ember-cli-inject-live-reload": "^1.3.0",
     "ember-cli-qunit": "0.1.0",
-    "ember-data": "1.0.0-beta.10",
     "ember-export-application-global": "^1.0.0",
     "express": "^4.8.5",
-    "glob": "^4.0.5"
+    "glob": "^4.0.5",
+    "node-sass": "^1.2.3"
   },
@@ -39,0 +40,0 @@ "keywords": [

README.md

@@ -11,2 +11,3 @@ # Ember Paper
 $ npm install --save-dev ember-paper
+$ ember g ember-paper
 ```
@@ -19,5 +20,5 @@
 
-This is a very ambitious project. Google's design specs are extensive, and not trivial to implement. I've been porting [Polymer Paper Elements](https://www.polymer-project.org/docs/elements/paper-elements.html) and [Google Web Starter Kit](https://github.com/google/web-starter-kit/tree/material-sprint) (material-spring branch) to Ember. These seem to be the most useful resources at the moment. If you feel like porting or fixing an element or two, please drop a pull request or issue at GitHub!
+This is a very ambitious project. Google's design specs are extensive, and not trivial to implement. I've been porting [Angular Material](https://github.com/angular/material) to Ember. This seems to be the most useful resource at the moment. If you feel like porting or fixing an element or two, please drop a pull request or issue at GitHub!
 
 
 I believe that with the help of everyone we can bring these amazing design spec to Ember in a modular and robust way. The Ember way. **Help us on Github!**

tests/dummy/app/router.js

@@ -9,4 +9,14 @@ import Ember from 'ember';
 Router.map(function() {
+  this.route('introduction');
+  this.route('button');
+  this.route('checkbox');
+  this.route('radio');
+  this.route('toggle');
+  this.route('typography');
+  this.route('lists');
+  this.route('navigation');
+  this.route('textfield');
+  //this.route('index',);
 });
 
 export default Router;

tests/dummy/config/environment.js

@@ -8,3 +8,3 @@ /* jshint node: true */
     baseURL: '/',
-    locationType: 'auto',
+    locationType: 'hash',
     EmberENV: {
@@ -11,0 +11,0 @@ FEATURES: {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

347325

increased by17.08%

Number of package files

118

increased by26.88%

Number of lines in readme file

23

increased by4.55%

Worsened metrics

Lines of code

2301

decreased by-15.9%

Number of low supply chain risk alerts

2

increased by100%

No dependency changes