#220 Autocomplete the calendar names upon adding/editing a widget about them
Merged 7 years ago by pingou. Opened 7 years ago by pingou.
pingou/fedora-hubs autocomplete_calendar  into  develop

@@ -0,0 +1,21 @@ 

+ /* =============================================================

+  * bootstrap3-typeahead.js v3.1.0

+  * https://github.com/bassjobsen/Bootstrap-3-Typeahead

+  * =============================================================

+  * Original written by @mdo and @fat

+  * =============================================================

+  * Copyright 2014 Bass Jobsen @bassjobsen

+  *

+  * Licensed under the Apache License, Version 2.0 (the 'License');

+  * you may not use this file except in compliance with the License.

+  * You may obtain a copy of the License at

+  *

+  * http://www.apache.org/licenses/LICENSE-2.0

+  *

+  * Unless required by applicable law or agreed to in writing, software

+  * distributed under the License is distributed on an 'AS IS' BASIS,

+  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+  * See the License for the specific language governing permissions and

+  * limitations under the License.

+  * ============================================================ */

+ !function(a,b){"use strict";"undefined"!=typeof module&&module.exports?module.exports=b(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],function(a){return b(a)}):b(a.jQuery)}(this,function(a){"use strict";var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.select=this.options.select||this.select,this.autoSelect="boolean"==typeof this.options.autoSelect?this.options.autoSelect:!0,this.highlighter=this.options.highlighter||this.highlighter,this.render=this.options.render||this.render,this.updater=this.options.updater||this.updater,this.displayText=this.options.displayText||this.displayText,this.source=this.options.source,this.delay=this.options.delay,this.$menu=a(this.options.menu),this.$appendTo=this.options.appendTo?a(this.options.appendTo):null,this.shown=!1,this.listen(),this.showHintOnFocus="boolean"==typeof this.options.showHintOnFocus?this.options.showHintOnFocus:!1,this.afterSelect=this.options.afterSelect,this.addItem=!1};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").data("value");if(this.$element.data("active",a),this.autoSelect||a){var b=this.updater(a);b||(b=""),this.$element.val(this.displayText(b)||b).text(this.displayText(b)||b).change(),this.afterSelect(b)}return this.hide()},updater:function(a){return a},setSource:function(a){this.source=a},show:function(){var b,c=a.extend({},this.$element.position(),{height:this.$element[0].offsetHeight}),d="function"==typeof this.options.scrollHeight?this.options.scrollHeight.call():this.options.scrollHeight;b=this.shown?this.$menu:this.$appendTo?this.$menu.appendTo(this.$appendTo):this.$menu.insertAfter(this.$element);var e=a(b).parent().hasClass("dropup"),f=e?"auto":c.top+c.height+d,g=a(b).hasClass("dropdown-menu-right"),h=g?"auto":c.left;return b.css({top:f,left:h}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){if("undefined"!=typeof b&&null!==b?this.query=b:this.query=this.$element.val()||this.$element.text()||"",this.query.length<this.options.minLength&&!this.options.showHintOnFocus)return this.shown?this.hide():this;var c=a.proxy(function(){a.isFunction(this.source)?this.source(this.query,a.proxy(this.process,this)):this.source&&this.process(this.source)},this);clearTimeout(this.lookupWorker),this.lookupWorker=setTimeout(c,this.delay)},process:function(b){var c=this;return b=a.grep(b,function(a){return c.matcher(a)}),b=this.sorter(b),b.length||this.options.addItem?(b.length>0?this.$element.data("active",b[0]):this.$element.data("active",null),this.options.addItem&&b.push(this.options.addItem),"all"==this.options.items?this.render(b).show():this.render(b.slice(0,this.options.items)).show()):this.shown?this.hide():this},matcher:function(a){var b=this.displayText(a);return~b.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(a){for(var b,c=[],d=[],e=[];b=a.shift();){var f=this.displayText(b);f.toLowerCase().indexOf(this.query.toLowerCase())?~f.indexOf(this.query)?d.push(b):e.push(b):c.push(b)}return c.concat(d,e)},highlighter:function(b){var c,d,e,f,g=a("<div></div>"),h=this.query,i=b.toLowerCase().indexOf(h.toLowerCase()),j=h.length;if(0===j)return g.text(b).html();for(;i>-1;)c=b.substr(0,i),d=b.substr(i,j),e=b.substr(i+j),f=a("<strong></strong>").text(d),g.append(document.createTextNode(c)).append(f),b=e,i=b.toLowerCase().indexOf(h.toLowerCase());return g.append(document.createTextNode(b)).html()},render:function(b){var c=this,d=this,e=!1,f=[],g=c.options.separator;return a.each(b,function(a,c){a>0&&c[g]!==b[a-1][g]&&f.push({__type:"divider"}),!c[g]||0!==a&&c[g]===b[a-1][g]||f.push({__type:"category",name:c[g]}),f.push(c)}),b=a(f).map(function(b,f){if("category"==(f.__type||!1))return a(c.options.headerHtml).text(f.name)[0];if("divider"==(f.__type||!1))return a(c.options.headerDivider)[0];var g=d.displayText(f);return b=a(c.options.item).data("value",f),b.find("a").html(c.highlighter(g,f)),g==d.$element.val()&&(b.addClass("active"),d.$element.data("active",f),e=!0),b[0]}),this.autoSelect&&!e&&(b.filter(":not(.dropdown-header)").first().addClass("active"),this.$element.data("active",b.first().data("value"))),this.$menu.html(b),this},displayText:function(a){return"undefined"!=typeof a&&"undefined"!=typeof a.name&&a.name||a},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("focus",a.proxy(this.focus,this)).on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("input",a.proxy(this.input,this)).on("keyup",a.proxy(this.keyup,this)),this.eventSupported("keydown")&&this.$element.on("keydown",a.proxy(this.keydown,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this)).on("mouseleave","li",a.proxy(this.mouseleave,this)).on("mousedown",a.proxy(this.mousedown,this))},mousedown:function(a){this.mouseddown=!0,a.stopPropagation(),a.preventDefault()},destroy:function(){this.$element.data("typeahead",null),this.$element.data("active",null),this.$element.off("focus").off("blur").off("keypress").off("input").off("keyup"),this.eventSupported("keydown")&&this.$element.off("keydown"),this.$menu.remove();this.destroyed=true;},eventSupported:function(a){var b=a in this.$element;return b||(this.$element.setAttribute(a,"return;"),b="function"==typeof this.$element[a]),b},move:function(a){if(this.shown)switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:if(a.shiftKey)return;a.preventDefault(),this.prev();break;case 40:if(a.shiftKey)return;a.preventDefault(),this.next()}},keydown:function(b){this.suppressKeyPressRepeat=~a.inArray(b.keyCode,[40,38,9,13,27]),this.shown||40!=b.keyCode?this.move(b):this.lookup()},keypress:function(a){this.suppressKeyPressRepeat||this.move(a)},input:function(a){this.lookup(),a.preventDefault()},keyup:function(a){if(this.destroyed){return};switch(a.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide()}a.preventDefault()},focus:function(a){this.focused||(this.focused=!0,this.options.showHintOnFocus&&this.lookup())},blur:function(a){this.focused=!1,!this.mousedover&&this.shown&&(this.mouseddown&&a.originalEvent?this.mouseddown=!1:this.hide())},click:function(a){a.preventDefault(),this.select(),this.$element.focus(),this.hide()},mouseenter:function(b){this.mousedover=!0,this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")},mouseleave:function(a){this.mousedover=!1}};var c=a.fn.typeahead;a.fn.typeahead=function(c){var d=arguments;return"string"==typeof c&&"getActive"==c?this.data("active"):this.each(function(){var e=a(this),f=e.data("typeahead"),g="object"==typeof c&&c;f||e.data("typeahead",f=new b(this,g)),"string"==typeof c&&f[c]&&(d.length>1?f[c].apply(f,Array.prototype.slice.call(d,1)):f[c]())})},a.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu" role="listbox"></ul>',item:'<li><a class="dropdown-item" href="#" role="option"></a></li>',minLength:1,scrollHeight:0,autoSelect:!0,afterSelect:a.noop,addItem:!1,delay:0,separator:"category",headerHtml:'<li class="dropdown-header"></li>',headerDivider:'<li class="divider" role="separator"></li>'},a.fn.typeahead.Constructor=b,a.fn.typeahead.noConflict=function(){return a.fn.typeahead=c,this},a(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);c.data("typeahead")||c.typeahead(c.data())})});

@@ -0,0 +1,13 @@ 

+ $(function(){

+   if ($('#calendar') != null){

+     $.get(

+       'https://apps.fedoraproject.org/calendar/api/calendars/',

+       function(data){

+         data = JSON.parse(data);

+         var d = data.calendars.map(function(cal) { return cal.calendar_name; });

+         $('#calendar').typeahead({ source: d });

+       },

+       'jsonp'

+     );

+   }

+ });

@@ -81,4 +81,13 @@ 

  

  });

  </script>

+ {% else %}

+ <script type="text/javascript" src="{{

+   url_for('static', filename='js/jquery-1.10.2.min.js') }}"></script>

+ <script type="text/javascript" src="{{

+   url_for('static',filename='fedora-bootstrap/fedora-bootstrap.js')}}"></script>

+ <script type="text/javascript" src="{{

+   url_for('static', filename='js/bootstrap3-typeahead.min.js') }}"></script>

+ <script type="text/javascript" src="{{

+   url_for('static', filename='js/hubs_input.js') }}"></script>

  {% endif %}

file modified
+10 -1
@@ -43,6 +43,15 @@ 

          <button type="submit" class="btn btn-danger" id="delete_widget">

            Remove this widget

          </button>

-     <form>

+     </form>

    </div>

  </div>

+ 

+ <script type="text/javascript" src="{{

+   url_for('static', filename='js/jquery-1.10.2.min.js') }}"></script>

+ <script type="text/javascript" src="{{

+   url_for('static',filename='fedora-bootstrap/fedora-bootstrap.js')}}"></script>

+ <script type="text/javascript" src="{{

+   url_for('static', filename='js/bootstrap3-typeahead.min.js') }}"></script>

+ <script type="text/javascript" src="{{

+   url_for('static', filename='js/hubs_input.js') }}"></script>

file modified
+1 -1
@@ -82,7 +82,7 @@ 

  {% block jscripts %}

  <script type="text/javascript" src="{{

    url_for('static', filename='js/jquery-1.10.2.min.js') }}"></script>

-   <script type="text/javascript" src="{{

not sure if editing this line was necessary and also it looks like indentation is off as well

Locally it looks good, I removed the two spaces indentation that was there before

Ohh i see now. This line is fine.

+ <script type="text/javascript" src="{{

    url_for('static',filename='fedora-bootstrap/fedora-bootstrap.js')}}"></script>

  {% endblock %}

  

no initial comment

not sure if editing this line was necessary and also it looks like indentation is off as well

Locally it looks good, I removed the two spaces indentation that was there before

Ohh i see now. This line is fine.

Steps I took that was unsuccessful

  1. Login
  2. Edit hubs
  3. Add meetings-widget on left side
  4. in the Input box the auto-complete doesn't show up on any input char input

Trying to debug it on my machine. I added a console.log right before the if statement and it seems that this function never gets called on my machine.

edit 2

When I click on edit meetings. the function does get called. But for some reason I'm unable to see the edit panel pop up.

  • edit 3 *

Verified on the current develop branch that edit widget works. Something here is blocking it from popping up.

I also suggest we move this out of edit.html so that we can use this same function in add_widget

More of a style issue but I typically try to avoid using for() loops when possible because dealing with the issues they introduce can be tricky. Especially when the iterator is declared globally like you have here.

My suggestion would be:

var d = data.calendars.map(function(cal) {
  return cal.name;
});

I always have problems with using .map() , one day I'll know :)

So I fall back to what I know, a for loop

Adjusted, thanks!

rebased

7 years ago

@pingou changes work locally for me with adding and editing. :thumbsup:

Cool, let's merge then :)

Pull-Request has been merged by pingou

7 years ago