Autocomplete fixes & imporovements. (allegro#2393)

* Autocomplete fixes & imporovements.
 - fixed tooltip error by used other tooltip than foundation
 - reduced requests by concatenating elements (by vulcanize command)
 - decreasing build size by removing useless static files
* mv elements.html to elements-min.html
* added gulp-watch

Dockerfile

@@ -37,6 +37,7 @@ RUN sed -i '/\-e ./d' $RALPH_DIR/requirements/test.txt
 RUN make install-dev
 
 # install JS dependencies
+ADD src/ralph/admin/static $RALPH_DIR/src/ralph/admin/static
 ADD src/ralph/static $RALPH_DIR/src/ralph/static
 ADD gulpfile.js bower.json package.json $RALPH_DIR/
 RUN $SCRIPTS_PATH/init_js.sh

bower.json

@@ -28,6 +28,7 @@
     "paper-input": "PolymerElements/paper-input#1.1.x",
     "paper-item": "PolymerElements/paper-item#1.1.x",
     "paper-menu": "PolymerElements/paper-menu#1.2.x",
+    "paper-tooltip": "PolymerElements/paper-tooltip#1.1.x",
     "polymer": "Polymer/polymer#1.2.x",
     "iron-flex-layout": "PolymerElements/iron-flex-layout#1.2.x",
     "iron-form": "PolymerElements/iron-form#1.0.x",

docker/init_js.sh

@@ -2,4 +2,4 @@
 set -e
 
 cd $RALPH_DIR
-$RALPH_DIR/node_modules/.bin/gulp
+$RALPH_DIR/node_modules/.bin/gulp build

gulpfile.js

@@ -5,6 +5,9 @@ var gulp = require('gulp'),
     bower = require('gulp-bower'),
     prefixer = require('gulp-autoprefixer'),
     sass = require('gulp-sass'),
+    del = require('del'),
+    vulcanize = require('gulp-vulcanize'),
+    sequence = require('gulp-watch-sequence'),
     sourcemaps = require('gulp-sourcemaps');
 
 var config = {
@@ -62,6 +65,7 @@ gulp.task('js', function(){
         './bower_components/foundation-datepicker/js/foundation-datepicker.js',
         './bower_components/angular-loading-bar/build/loading-bar.min.js',
         './bower_components/raven-js/dist/raven.min.js',
+        './bower_components/webcomponentsjs/webcomponents-lite.js',
         './bower_components/chartist/dist/chartist.js',
     ];
     gulp.src(vendorFiles)
@@ -80,20 +84,47 @@ gulp.task('js', function(){
     ]
     gulp.src(angularFiles)
         .pipe(gulp.dest(config.vendorRoot + 'js'));
+});
 
 
-    gulp.src([
+gulp.task('clean:elements', function () {
+  return del([
+    'src/ralph/admin/static/bower_components/',
+  ]);
+});
+gulp.task('vulcanize', function () {
+    return gulp.src('src/ralph/admin/static/elements/elements.html')
+        .pipe(vulcanize({
+            abspath: '',
+            excludes: [],
+            stripExcludes: false,
+            stripComments: true,
+            inlineCss: true,
+            inlineScripts: true
+        }))
+        .pipe(rename('src/ralph/admin/static/elements/elements-min.html'))
+        .pipe(gulp.dest('.'));
+});
+gulp.task('polymer-dev', function() {
+    return gulp.src([
         "./bower_components/**/*"
     ], {base:"."})
         .pipe(gulp.dest("src/ralph/admin/static/"));
 });
 
+
 gulp.task('watch', function() {
+    // run "gulp dev" before
     gulp.watch(config.srcRoot + 'scss/**/*.scss', ['scss']);
+    gulp.watch('src/ralph/admin/static/elements/elements.html', ['vulcanize']);
 });
 
 gulp.task('dev', function(callback) {
-    runSequence('bower', 'css', 'fonts', 'js', 'scss', callback);
+    runSequence('bower', 'css', 'fonts', 'js', 'scss', 'polymer-dev', 'vulcanize', callback);
+});
+
+gulp.task('build', function(callback) {
+    runSequence('dev', 'clean:elements', callback);
 });
 
 gulp.task('default', ['dev']);

package.json

@@ -11,9 +11,12 @@
     "gulp-sass": "~2.2.0",
     "gulp-sourcemaps": "^1.6.0",
     "jshint": "~2.8.0",
-    "run-sequence": "~1.1.0"
+    "run-sequence": "~1.1.0",
+    "gulp-watch-sequence": "~1.0.0"
   },
   "devDependencies": {
-    "gulp-watch": "~4.2.4"
+    "gulp-watch": "~4.2.4",
+    "gulp-vulcanize": "~6.1.0",
+    "del": "~2.2.0"
   }
 }

src/ralph/admin/static/elements/auto-complete.html

@@ -95,7 +95,7 @@
         <a hidden="{{!addRelatedUrl}}" on-tap='showAdminPopup' id="add_id_[[name]]" href="[[addRelatedUrl]]">
           <i class="fa fa-plus-circle"></i>
         </a>
-        <i data-tooltip class="has-tip fa fa-info-circle" title="[[searchTooltip]]"></i>
+        <tool-tip tip='[[searchTooltip]]'></tool-tip>
       </div>
     </div>
 

src/ralph/admin/static/elements/badge-input.html

@@ -66,7 +66,7 @@
             <div class='flexchild'>
               [[item.__str__]]
               <template is="dom-if" if="{{item.tooltip}}">
-                <tool-tip title='{{ item.tooltip }}'> </tool-tip>
+                <tool-tip tip='[[ item.tooltip ]]'></tool-tip>
               </template>
             </div>
             <div class='badge-icons'>

src/ralph/admin/static/elements/elements.html

@@ -1,14 +1,3 @@
-<script type="text/javascript" src="/static/vendor/js/modernizr.js" ></script>
-<script type="text/javascript" src="/static/vendor/js/jquery.js" ></script>
-<script type="text/javascript" src="/static/vendor/js/foundation.min.js" ></script>
-
-<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
-<link rel="import" href="../bower_components/iron-input/iron-input.html">
-<link rel="import" href="../bower_components/iron-form/iron-form.html">
-<link rel="import" href="../bower_components/iron-form-element-behavior/iron-form-element-behavior.html">
-
-<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
-<link rel="import" href="../bower_components/paper-item/paper-item.html">
-
 <link rel="import" href="auto-complete.html">
 <link rel="import" href="badge-input.html">
+<link rel="import" href="tool-tip.html">

src/ralph/admin/static/elements/tool-tip.html

@@ -1,4 +1,5 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/paper-tooltip/paper-tooltip.html">
 
 <dom-module id='tool-tip'>
   <style>
@@ -7,21 +8,21 @@
     }
   </style>
   <template>
-    <i data-tooltip class="has-tip fa fa-info-circle" title="{{ title }}"></i>
-
+    <i id="icon" class="fa fa-info-circle"></i>
+    <paper-tooltip id='tooltip' animation-delay="0" for="icon"></paper-tooltip>
   </template>
   <script>
     Polymer({
       is: "tool-tip",
       properties: {
-        'title': {
+        'tip': {
           type: String,
           observer: '_reinitTooltip',
           value: ''
         }
       },
       _reinitTooltip: function(newValue, oldValue) {
-        $(this).foundation("tooltip");
+        Polymer.dom(this.$$('#tooltip')).innerHTML = this.tip;
       }
     });
   </script>

src/ralph/admin/templates/admin/base.html

@@ -10,13 +10,12 @@
     <link rel="stylesheet" type="text/css" href="{% static "vendor/css/foundation-datepicker.css" %}">
     <link rel="stylesheet" type="text/css" href="{% static "css/ralph.css" %}" />
     <script type="text/javascript" src="{% static "admin/js/core.js" %}"></script>
-    <script src="{% static "bower_components/webcomponentsjs/webcomponents-lite.js" %}"></script>
-    <link rel="import" href="{% static "elements/elements.html" %}">
+    <script src="{% static "vendor/js/webcomponents-lite.js" %}"></script>
+    <link rel="import" href="{% static "elements/elements-min.html" %}">
   </head>
   <body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}">
     {% if not is_popup %}
       {% block main_nav %}
-
         <nav class="top-bar" data-topbar>
           <ul class="title-area">
             <li class="name">

src/ralph/admin/templates/admin/widgets/autocomplete.html

@@ -9,5 +9,4 @@
   related-url="{{ related_url }}"
   add-related-url="{{ add_related_url }}"
   search-tooltip="{{ search_fields_info }}"
->
-</auto-complete>
+></auto-complete>