add: umd compatability with webpack

FarhadG · Nov 28, 2015 · 13bf39a · 13bf39a
1 parent aefe437
commit 13bf39a
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 14 deletions.
diff --git a/build/repo-card.js b/build/repo-card.js
@@ -12,7 +12,7 @@ function RepoCard() {
  return new RepoCard();
  }
  var params = ScriptTagData.getData('repo-card-lib', true);
- debugger;
+
  if (params && Object.keys(params).length > 2) {
  this.configure(params);
  }

diff --git a/examples/index.html b/examples/index.html
@@ -7,25 +7,21 @@
 <body>
 
 <!--one way of adding repo cards which needs the ID and the data points
--->
-<script src="../repo-card.min.js"
+<script src="./repo-card.min.js"
  id="repo-card-lib"
  data-repo="init"
  data-username="farhadg"
  data-title="Init">
 </script>
+-->
 
 <!-- another way of adding repo cards: a script tag with another configuring the options -->
 <!--CDN-->
 <!--<script src="https://cdn.rawgit.com/FarhadG/repo-card/master/repo-card.min.js"></script>-->
 <!--LOCALLY-->
-<<<<<<< eb89432dd78ceeebccfe277c17685f86d8f07ec5
 <script src="../repo-card.js"></script>
-=======
-<!-- <script src="../../repo-card.js"></script>
->>>>>>> Webpack umd build
 <script>
- new RepoCard()
+ RepoCard
  .configure({
  theme: 'doodle',
  repo: 'init',
@@ -40,7 +36,7 @@
  right: 15
  }
  });
-</script> -->
+</script>
 
 </body>
 </html>
diff --git a/gulpfile.js b/gulpfile.js
@@ -34,10 +34,10 @@ var config = {
 
 gulp.task('scripts', function() {
  gulp.src(config.lib.src)
+ .pipe(webpackStream(config.webpack))
  .pipe(inject({
  basepath: config.themes
  }))
- .pipe(webpackStream(config.webpack))
  .pipe(jshint())
  .pipe(concat(config.lib.rename))
  .pipe(gulp.dest(config.lib.dest))

diff --git a/repo-card.js b/repo-card.js
@@ -150,7 +150,7 @@ return /******/ (function(modules) { // webpackBootstrap
  return new RepoCard();
  }
  var params = ScriptTagData.getData('repo-card-lib', true);
- debugger;
+
  if (params && Object.keys(params).length > 2) {
  this.configure(params);
  }
@@ -160,8 +160,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
  RepoCard.themes = {
  doodle: {
- template: '@@import doodle/index.html',
- style: '@@import doodle/style.css',
+ template: '<div id="repo-card">\n <div id="repo-card__image-wrap">\n <div id="repo-card__thumb-wrap">\n <img id="repo-card__thumb" />\n </div>\n <header id="repo-card__header">\n <h1 id="repo-card__title">\n {{title}}\n </h1>\n\n <div id="repo-card__subtitle">\n {{subtitle}}\n </div>\n </header>\n </div>\n <div id="repo-card__content-wrap">\n <div id="repo-card__content">\n {{info}}\n </div>\n </div>\n <ul id="repo-card__social">\n {{buttons}}\n </ul>\n</div>',
+ style: '#repo-card {\n box-sizing: border-box;\n font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif;\n background-color: #FFFFFF;\n line-height: 1.5em;\n margin: 0 auto;\n padding-bottom: 60px;\n width: 350px;\n border: 1px solid #CCCCCC;\n border-radius: 5px;\n overflow: hidden;\n}\n\n#repo-card a {\n color: #999;\n}\n\n#repo-card__image-wrap {\n height: 100px;\n width: 100%;\n position: relative;\n -webkit-transition: height .3s ease-in;\n transition: height .3s ease-in;\n}\n\n#repo-card__image-wrap:before {\n content: \'\';\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-color: rgba(51, 51, 51, .25);\n z-index: 1;\n}\n\n#repo-card__header {\n text-align: left;\n padding-left: 140px;\n position: absolute;\n bottom: -28px;\n left: 0;\n color: #FFFFFF;\n z-index: 20;\n -webkit-transition: -webkit-transform .3s ease-in;\n transition: transform .3s ease-in;\n}\n\n#repo-card__title {\n margin: 0;\n color: #FFFFFF;\n font-size: 1.125em;\n font-weight: 400;\n z-index: 10;\n position: relative;\n padding-bottom: 6px;\n}\n\n#repo-card__subtitle {\n color: #999999;\n font-size: .875em;\n padding-top: 12px;\n -webkit-transition: -webkit-transform .3s ease-in;\n transition: transform .3s ease-in;\n}\n\n#repo-card__thumb-wrap {\n width: 110px;\n height: 110px;\n padding: 3px;\n position: absolute;\n bottom: -55px;\n left: 15px;\n border-radius: 50%;\n z-index: 10;\n -webkit-transition: -webkit-transform .3s linear;\n transition: transform .3s linear;\n}\n\n#repo-card__thumb {\n width: 104px;\n height: 104px;\n display: block;\n border-radius: 50%;\n background-size: cover !important;\n}\n\n#repo-card__content-wrap {\n padding-bottom: 0;\n min-height: 50px;\n position: relative;\n}\n\n#repo-card__content-wrap::after {\n content: \'\';\n position: absolute;\n top: -10px;\n left: 50%;\n z-index: 20;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0 10px 10px;\n border-color: transparent transparent #FFFFFF;\n -webkit-transform: translateY(10px);\n -ms-transform: translateY(10px);\n transform: translateY(10px);\n -webkit-transition: -webkit-transform .3s ease-in;\n transition: transform .3s ease-in;\n margin-left: -10px;\n}\n\n#repo-card__content {\n padding: 25px 20px 5px 20px;\n text-align: left;\n font-size: .875em;\n color: #666666;\n max-height: 0;\n overflow: hidden;\n -webkit-transform: translateY(-10%);\n -ms-transform: translateY(-10%);\n transform: translateY(-10%);\n -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;\n transition: max-height .3s ease-in, opacity .3s ease-in;\n opacity: 0;\n visibility: hidden;\n}\n\n#repo-card__social {\n position: absolute;\n bottom: 0;\n left: 0;\n list-style: none;\n margin: 0;\n width: 100%;\n display: table;\n border-top: 1px solid #CCCCCC;\n padding: 10px 0px 5px 0px;\n}\n\n.repo-card__social-item {\n display: table-cell;\n text-align: center;\n position: relative;\n left: 5px;\n}\n\n#repo-card:hover #repo-card__image-wrap {\n height: 150px;\n}\n\n#repo-card:hover #repo-card__content-wrap:after {\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n}\n\n#repo-card:hover #repo-card__content {\n max-height: 200px;\n opacity: 1;\n visibility: visible;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n -webkit-transition: max-height .3s ease-in, opacity .3s ease-in;\n transition: max-height .3s ease-in, opacity .3s ease-in;\n}\n\n#repo-card:hover #repo-card__thumb-wrap {\n -webkit-transform: translateY(-70%);\n -ms-transform: translateY(-70%);\n transform: translateY(-70%);\n}\n\n#repo-card:hover #repo-card__header {\n -webkit-transform: translateY(-110%);\n -ms-transform: translateY(-110%);\n transform: translateY(-110%);\n}\n\n#repo-card:hover #repo-card__subtitle {\n color: #FFFFFF;\n -webkit-transform: translateY(-10px);\n -ms-transform: translateY(-10px);\n transform: translateY(-10px);\n}',
  selectors: {
  background: 'repo-card__image-wrap',
  thumb: 'repo-card__thumb'

diff --git a/repo-card.min.js b/repo-card.min.js