framework7io / framework7

Full featured HTML framework for building iOS & Android apps

Framework7

Full Featured Mobile HTML Framework For Building iOS & Android Apps

Supporting Framework7

Framework7 is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider becoming a backer or sponsor on Patreon.

Sponsors

Getting Started

• Getting Started Guide

Framework7 Development

First, install all dependencies:

$ npm install

Development Builds

The following npm scripts are available to create development builds:

• build:dev - build development versions of all packages (Core, Vue, React, Svelte)
• build-core:dev - build development version of Core (vanilla JS) Framework7
• build-react:dev - build development version of Framework7 React package
• build-vue:dev - build development version of Framework7 Vue package
• build-svelte:dev - build development version of Framework7 Svelte package

Compiled results will be available in build/ folder.

Production Builds

To build production versions the following npm scripts are available:

• build:prod - build production versions of all packages (Core, Vue, React, Svelte)
• build-core:prod - build production version of Core (vanilla JS) Framework7
• build-react:prod - build production version of Framework7 React package
• build-vue:prod - build production version of Framework7 Vue package
• build-svelte:prod - build production version of Framework7 Svelte package

Compiled results will be available in packages/ folder.

Kitchen Sink

To run Kitchen Sink with development environment (development version will be built first) use the following npm scripts:

• core - build development version of Core (vanilla JS) Framework7 package and run core Kitchen Sink
• react - build development version of Framework7 React package and run React Kitchen Sink
• vue - build development version of Framework7 Vue package and run Vue Kitchen Sink
• svelte - build development version of Framework7 Svelte package and run Svelte Kitchen Sink

Source Code

Whole source code is located under the /src/ folder.

Contributing

Before you open an issue please review the contributing guideline.

All changes should be committed to src/ files only!

Framework7 uses LESS for CSS compilations, and ES modules JS files.

The project uses .editorconfig and ESLint to define and lint the coding style of each file. We recommend that you install the Editor Config and ESLint extension for your preferred IDE.

If you want to help in Framework7 development and make it event better visit this page: https://framework7.io/contribute/

Forum

If you have questions about Framework7 or want to help others you are welcome to special forum at https://forum.framework7.io/

Docs

Documentation available at https://framework7.io/docs/

Tutorials

Tutorials available at https://framework7.io/tutorials/

Showcase

Appstore apps made with Framework7: https://framework7.io/showcase/

Previous Versions

• v7 branch
• v6 branch
• v5 branch
• v4 branch
• v3 branch
• v2 branch
• v1 branch

framework7's Issues

StatusBar gap cannot be detected in iOS with UIWebView.

When I embed F7 into UIWebView it detects device.status bar and adds with-statusbar-overlay class to body and looks like;

But I think I can detect UIWebView and iOS version 7 then change .navbar height from 44px to 64px and set padding-top:20px; to navbar-inner then it should be seen like this,

Btw, device.webview = !!navigator.standalone; returns false in UIWebView. But I able to detect UIWebView by checking User Agent. What do you think?

Is there a way to use parameters of sub pages loaded into the main view?

Hi All,
I'm loading a page called ticket.html?id=101 (ticket.html an F7 sub page/view )

I would like to use the id of 101 to make an API call and load content into the sub page.
But I'm intermediate with javascript and having trouble understanding if can detect the sub page has loaded.

I assume this type of js should go in my my-app.js file. I have been trying to use the sample code but guessing I'm using it for the wrong reasons.

How do is a sub view intercepted so it can manipulated?

Below is my attempt.

// Events for specific pages when it initialized
$$(document).on('pageInit', function (e) {
    var page = e.detail.page;
    // Handle Modals Page event when it is init

    if (page.name === 'ticket') {
        $$('.page-content').append('----- HERE ------'); // not working 
        // Get parameters
        // API call 
        // gen dynamic contnet
    }

Scroll Bounce and Pull to refresh

Hey

First of all I have to say this is simply amazing. its basically the best HTML5 framework for building iOS apps. simply brilliant.

I was wondering if it was possible to do scroll bounce and pull to refresh like the native apps have?

Programmatically change the title of the alert?

Hi, is it possible to change the title of the alert using the basic alert syntax?

app.alert('This is the body.', 'This is the title');

or something like this?

telphone anchor link cause problem.

Hey, I found this problem and I don't know how to resolve it.
when I add a phone anchor ''Call Us'' in my page, it caused an XMLHttpRequest error and says cross domain request support only for http.

Can the slider auto play?

Hey, I found that there is no switch for slider auto play, should you add this?

Framework7 + AngularJS

This is a well done framework (in the very early stages). However, I decided to use framework7 for one of my projects and I wanted to integrate it with angularJS. The difficulty I faced is combining page transitioning/changing from both frameworks. Angular uses ng-view and Framework7 similarly (with partial html) changes pages except for top navbar and bottom navbar.

Help/Advice on how to control the navigation of pages in Framework7 with AngularJS routes, templates would be very useful.
Thank you.

Checkbox Switch doesnt look same in Firefox and IE as it doesn in Safari and Chrome

Checkbox looks like a regular checkbox in IE11 and latest version of Firefox. It should look similar like in Chrome and Safari.

Integration with major MV* Frameworks

Please make it pluggable, focus on its strenghts and integrate it with AngularJS and Cordova-iOS, document iPad functionality a bit better and you will see exploding user numbers. Right now, it is an (although very solid) island, because its UI paradigms cannot be easily decoupled from the business logic, e.g. in a databinding-based Angular app.

Cheers,
Sidney

P.S.: Thanks for your great work, your attention to detail in HTML5/CSS3 integration of native UI attributes is inspiring!

Reimplement Messages bubbles using SVG instead of PNG

I reimplemented the messages component using SVG and inlined the SVG code in CSS. If you're interested in moving in this direction, I could put together a pull request, if not, I won't bother.

Here's a gist and a preview.

I have Settings > General > Accessibility > Bold Text turned on on my iOS devices, so the boldness might not match the typical. I could fix that.

Also, some of the flexbox code isn't correct. I've documented every option of shipping browser's implementation of flexbox (including links to the sources) here: http://ptb2.me/flexbox/ I could help with that, too.

External Linking

Could please give me an example of external linking?
I tried to remove the "link" class thinking that would allow me to link to an outside page. But, this did not work.

clike page1 or page2 tab,it does not show the linked page

on ios emulator,i just copy dist code into cordova ios project,and i click the page1 or page2 tab,it does not show the linked page.
but on chrome,it worked.

the index page do not trigger pageinit method

i write a page show messages,in the pageinit method i want ajax call the data service and add message to the page,but it not work,it seem only when the page change the pageinit method will call.

<div class="view view-main">
              <div class="navbar">
          <div class="navbar-inner">
            <div class="center sliding">Message Board</div>
            <div class="right"></div>
          </div>
        </div>
            <div class="pages navbar-through">
                <div data-page="messages" class="page no-toolbar toolbar-fixed">
                    <div class="page-content messages-content">
                        <div class="messages">
                            <div class="messages-date">
                                Sunday, Feb 9, <span>12:58</span></div>
                            <div class="message message-sent">
                                Message</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Pass xhr parameter when calling onAjaxStart

It'd be good if we pass xhr when calling onAjaxStart so that one could set custom headers for each ajax request.

item-link doesnt work after switching toolbar tabs *BUG*

Here is a possible bug:

If I am viewing a tab and then navigate to another tab and I open a item content-link to another page then go back and visit another tab. Now, if I go back to the tab that has the item-content link then the link doesn't work.

That is a lot to follow so here it is again:

Viewing tab --> Navigate to another tab --> open an item-content link to another page within the tab --> navigate back --> the link doesn't work any more

<li><a href="ios4.html" class="item-link item-content link"> <div class="item-media"><img src="images/icon.png" width="44"/></div> <div class="item-inner"> <div class="item-title-row"> <div class="item-title">Title</div> </div> <div class="item-subtitle">subtitle</div> </div></a></li>

'view' class is too generic

We're trying out a sample integration with this interesting framework -- and we've had to rename all the 'view' and 'view-main' class usages to 'view-f7' and 'view-f7-main'.

The 'view' class is already a frequently used one and was conflicting -- you might consider using a more specific name or allowing the class to be customized on app init.

Swipe back gesture’s animation looks blurry on non-retina displays

Hi,

When doing the “swipe from the left of the screen” gesture on my iPhone 3GS, the text looks bad.

I haven’t looked at the source code, but it seems you are using transforms, and translate transforms work with subpixels value, no rounding. I guess this is the root of the problem.

Looks good: http://image.noelshack.com/fichiers/2014/14/1396356309-image-1.png
Looks bad, blurry: http://image.noelshack.com/fichiers/2014/14/1396356305-image.png

I’m not sure that’s worth fixing though, I guess most users won’t stare at all the animations like I do. :) And non-retina iPhones apparently aren’t really that popular these days anyway and it’s only going to go down from there. But I thought I’d let you know, in case you weren’t aware of this.

In case you’d like to fix that, I think the solution would be to round translateX to the nearest integer when devicePixelRatio is 1.

By the way, mandatory congratulations: I’m very impressed with how faithful this is to iOS 7. I didn’t thought this level of fidelity was possible. And I’m on an iPhone 3GS, I thought it would be slow as shit but it’s actually very correct, Kitchen Sink is more responsive than some native apps on this 2009 phone. (If that would be useful, I could open another issue specifying every things that are slow in the kitchen sink on the 3GS).

Framework7 + mysql

cant create connection in mysql db.

Very slow on Android

Animations on Nexus5 (Chrome) look very bad (incredibly slow).

UISearch and searching tableview

Hey,
Is there a specific search bar element I can add? If so, am I able to search a tableview like I can in iOS?

History API / Back Button Support

Is there a plan to bring back button support to Framework7 (similar to how jQuery Mobile works), as I invariably hit the browser back button and end up on a previous web site?

e.g. I browse as follows:

http://www.google.com
http://localhost:3000/kitchen-sink/ (and click a few links)

No matter what I click on within 'kitchen sink', I remain at URL "http://localhost:3000/kitchen-sink/". When I hit the back button I'm taken to Google.

Would be nice if it acted as follows:

http://www.google.com
http://localhost:3000/kitchen-sink/
http://localhost:3000/kitchen-sink/#/modals.html
(Navigate 'back')
http://localhost:3000/kitchen-sink/
http://localhost:3000/kitchen-sink/#/list-views.html
http://localhost:3000/kitchen-sink/#/list-views/ceo.html

Slow stuff on old devices

As discussed in #29, here is my tour of what I found slow in the Kitchen Sink. It’s running on an iPhone 3GS, in an “app” pinned to the homescreen, so no Nitro JS engine, really putting Framework7 to stress.

Again, I haven’t looked into the source code. A recurring theme is that elements that need to track touch are the slowest to respond. Those perform better in Safari.

Sorted by descending slugishness, more or less:

Swipe back

Those are really slow when they’re under your fingers: https://www.youtube.com/watch?v=bb15tIcZ_rY

Once released, the animation is okay though: https://www.youtube.com/watch?v=sNUHA_h3YYM

Slider

Really slow, and the fact that this element is pretty easily missed by your finger doesn’t help: https://www.youtube.com/watch?v=4N-umyLUQxo

Swipe to delete

Pretty slow: https://www.youtube.com/watch?v=6_3reKI-Dkc

It looks like it’s a bit less slow when they’re tiny, might just be an illusion though: https://www.youtube.com/watch?v=WKD7snR0vVA

Pull to refresh

For some reasons, the first one or two pulls are pretty laggy, after that they’re acceptable: https://www.youtube.com/watch?v=JHG7SJEGFiU

Form inputs

I guess you’re aware of this one: https://www.youtube.com/watch?v=qbsCjiilC9g

The known solution is https://github.com/ftlabs/fastclick; but it’s probably not worth it to merge FastClick into Framework7.

Switch

The switch feels a bit slow to respond without the nice iOS 7 effects : https://www.youtube.com/watch?v=Nxdz4R71byE

I think setting the border to green (or grey if it’s already checked) on touchstart might do the trick.

Scroll

Scroll is a bit less responsive than normally, for some reason this is the thing from this list that bothers me the less: https://www.youtube.com/watch?v=WS06O3JoNGo

Regular scrolling in Safari on a simple website, for comparison: https://www.youtube.com/watch?v=M9W3howFo2Q

android web browser click fired twice.

Hey, I found that on my android web browser, the switch form element toggled back when I click it, it seems click fired twice, Is there a way to fixed this?

Click on `modal-overlay` to close modal.

Currently in F7, if the user click on a modal-overlay, the modal would be closed. This is true for almost all modals except alerts, confirms, and prompts.

However, sometimes it's necessary to control whether this happens. Like when you popup a login form to require the user to login.

I think this may be achieved by adding a class like click-to-close to those modals that need to be closed when clicked. Even just adding a global toggle would be useful.

P.S.
I'm currently trying to use it with AngularJS in a mobile app project. If it's possible, I would like to release some Angular directives and services to accompany F7 in the near future.
Again, thank you for your great job!

Submit button bug in IOS 7

iPhone and iPad with IOS7, default submit button goes wrong

the framework customized alert does not work well with jquery blur event.

Hey, I catch this problem. In the kitchen-sink,I include the jquery lib and I add an input with id="txt" in list-view.html, and in kitchen-sink.js, I add the code below
'''
if (page.name === 'list-view') {
console.log("hellow");
$("#txt").blur(function(e){
console.log("hellow");
if($(this).val().trim()===''){
$(this).focus();
myApp.alert("You should input something");
}
});
}
'''
something bad happen, it run into an infinite loop!!

Хотелось бы возможность открыть левое меню по свайпу в право по экрану, не с границы.

Нет ли у вас такого по стандарту? Планируется? Или самому искать решение?

Blurred (Frosted glass) effect on navbar/toolbar

This is a killer feature of iOS 7 ui, so we definitely need it:)
Any thoughts on how realize it, perfectly with CSS only.

I discovered pure CSS solution using CSS regions, it works perfect on desktop Safari, but super slow and buggy on iOS, so we need something different.

It is also possible do it with JS by duplicating content, but it is not an option because we will have a lot problems when we need to update content there (in duplicated layers)

Change Viewport

Hello,

I would like to offer you to change viewport scaling. Right now, using 1 as scale moves the sidebar gestures to more 2px at a time. Safari has a bug, in iOS, in retina displays. It doubles the pixel count. Therefore using 0.5 as a scaling will solve this problem, and it will make the swipe gestures and effects run more smoothly.

Proposed replacement is:

<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no, minimal-ui">

Also, CSS should change.

how do i redirect by using javascript ?

$.getJSON(page, function(data) { $.each(data, function(key, val) { if(val==1){ myApp.alert("Success"); window.location.replace(""); }else if(val==0){ myApp.alert('Wrong username and password combination!','Login Failed'); }else{ myApp.alert("System Error"); } });

i wish to redirect to specific page if return value is 1, i tried to do this window.location.replace("url") and window.location.href but failed

`view` inside a `popup`

I don't know if this is a considered scenario... I tried to put a view inside a popup. For now, everything seems all good, except the navbar. At the very beginning, the navbar is invisible, unless any window resize happens (or showNavbar manually called). What part do you think made the difference?

Open Popup/Modal by passing a HTML string?

Hey, not really an issue, but I'm wondering if it's possible to open a Popup/Modal by passing a HTML string instead of passing a HTML/DOM object?

Basically, the problem that I'm having is that I'd like to open different popups on different subpages loaded via AJAX, but as far as I can see I can only insert .popup markup into the main page, but not pages that load asynchronically?

Thank you!

Is your grunt-contrib-less up-to-date?

I notice from the v0.7.2 commit of dist_rails that the icon image urls are all coming out as

url(../img/*.png)

for the rails builds it should be:

url(../images/*.png)

This can only happen if you're running a version of grunt-contrib-less older than 0.11.0.

My own grunt rails run against 0.7.2 built correctly.

telphone anchor link cause problem.

Hey, I add phone call in anchor href link , say href="tel:123456" it causes a XMLHttpRequest problem, how to resolve this ?

Is it possible to realize scrollspy on f7

Hi, I find that bootstrap scrollspy is very impressive, but I'm not able to move it on f7 apps, I think it is because of scrollspy use id links, say, <a href="#link1". Is there a way to resolve this?

Pull to refresh behavior

First of all, great framework! I'm impressed.

I would like to propose a change in the behavior of pull to refresh. In newer apps made by Apple, you don't have to actually let go to start loading. When you drag down enough it will automatically start the loading, and then you can let go whenever you want.

I think that it's better because it starts the loading earlier and thus makes the app feel more responsive.

Можно ли сделать так чтоб каждая страница имела свою ссылку?

Чтоб на эту страницу можно было дать ссылку другу. Возможно включить такую опцию у вас?

Android gingerbread todo7

i try to use todo7 sample app to gingerbread and it is not working?

panel-reveal allows app to horizontal scroll when open

The example code needs a div wrapped around panel and view and then some css to take care of x scroll

.app {
width: 100%;
height: 100%;
overflow-x: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}


<div class="app">
<!-- Views-->
<div class="views">
  <!-- Your main view, should have "view-main" class-->
  <div class="view view-main">
    <!-- Top Navbar-->
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left">Menu</a></div>
        <div class="center sliding">Title</div>
      </div>
    </div>
    <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
    <div class="pages navbar-through toolbar-through">
      <!-- Page, data-page contains page name-->
      <div data-page="index" class="page">
        <!-- Scrollable page content-->
        <div class="page-content">
        </div>
      </div>
    </div>
  </div>
</div>
    <!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">
  <div class="list-block">
  </div>
</div>

</div>

on what part does garbage collection has been made?

I tried this framework for memory leak inside pageinit events i use this

$$(document).on('pageInit', function (e) {
var page = e.detail.page;
alert('init');
$$('#test').on('click', function () {
alert("n times")
});
});

the good thing is #test click only trigger once.

Q. where does the garbage collection has beed processed? is it on page change?

Confusion regarding external API calls and packaging

Hello all. I apologize for bothering you guys, I really do feel like kind of a jackass that I can't seem to figure this out on my own and if it's not too much trouble I have just two questions that I am confident are RTFM answers.

1. In the readme it is indicated that a server needs to be running in order to use the application to support the ajax calls the app makes. Must this server remain the node.js server, or can I use my existing rails application to power this application? If I am able to use my existing rails app (which would, of course, be highly preferred), how best do I query the application using the Framework7 ajax library?

2. Regarding deployment, is it safe to consider this framework a non-native web application that is simply amazingly responsive, beautiful, and exactly matches the iOS 7 style? Or is this a framework in the spirit of PhoneGap or Cordova that runs natively on the device?

Again, I am very sorry that these questions seem so inept. It's been a really long few weeks at work and I'm burnt out. I just felt the compelling need to ask because I needed only look at the website for 30 seconds before I realized just how many things I can use this for in my day-to-day that would make my life so much better.

I really appreciate any assistance you can provide! Thank you!

Pierce

Way to improve animation curves (easing) and durations?

We need to get closer to iOS animation curves and durations, especially on transitions between pages. Anybody know where can we get correct values or how can we track it?

starter page pageInit does not work

Hi, I was confused by this problem when I use framework7, in your kitchen-sink kitchen-sink.js, I tried to added this:
// test page initial on the starter page
if (page.name === 'index') {
console.log("You enter index page");
}
but I never see anything from my console, anyone can help?

Pop to root window

Hi,
Is there a way to go back to the first page in the navigation history? Kind of similar to the goBack() function?

Изменить цвет status-bar

Вы предусмотрели смену цвета статус бара? Что я только не менял но это не нашёл!

Вы ещё не решили проблему (как вы назвали) "коротких страниц" ?

Я выложил версию где такой проблемы нет(там методом тыка я как-то это решил): http://taxi-lite.ru/file/ - этот пример не подходит для решения? У пользователя хочу полностью отобрать возможность заметить что это не нативное приложение)
И не могли бы вы объяснить как всё-таки решается проблема со скроллингом? Искренне благодарен за ваше творение)) Ещё не понятно как сайт iDangero.us связан с вами? Я давно его заметил и поражался возможностями javascript глядя на все представленные модули. Никогда не видел такого применения.

Swipable tabs

It would be really awesome if one can swipe between tabs. An inspiration would be http://ionicframework.com/tutorials/intro-tutorial/.

View within panel

Hello all,
Iv been trying to get my head wrapped round this piece of gold for a couple days and its slowly coming together.

I am stuck with one thing though, and even after a blatant copy/paste from kitchen-sink, its not working. I feel kindof bad asking such a simple question here after seeing what you guys talk about but, theres no manual yet and I have to learn this...

Im looking to basically copy kitchen-sink's right panel. Have a item-list which, when clicked, opens the page within the panel...

Here is my code, of just the right-panel obviously:

  <div class="pages navbar-through">
    <div data-page="panel-right1" class="page">
      <div class="page-content">
        <div class="content-block">
          <p>Right side panel</p>
        </div>
        <div class="list-block">
          <ul>
            <li><a href="panel-right2.html" class="item-link">
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Right panel page 2</div>
                </div>
              </div></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- END OF PANEL RIGHT -->

Slider navigation wrong position when nesting a horizontal slider inside a vertical slider

The slider pagination when nesting a horizontal slider inside a vertical slider appears as a vertical pagination instead of a horizontal.

The CSS selector for the vertical navigation also targets nested horizontal navigation.

The problematic selector: (slider.less)

.slider-container-vertical .slider-pagination {
}

This will also target .slider-container-vertical .slider-container-horizontal .slider-pagination

Suggestions:

• Only select direct child .slider-pagination of .slider-container-vertical
• Add .slider-container-horizontal to horizontal sliders and target that to style the horizontal slider navigation (instead of .slider-pagination)

Also: awesome framework :-)

Edit: The problem is not only limited to the navigation posititon, but also to .slider-container-vertical .slider-wrapper and .slider-container-vertical.slider-pagination-bullet

Grunt issue on installation

Just donwloaded, placed files in project directory and from there ran "npm install" and "grunt build". It failed on "grunt build". Here is the error:

----------------------------------------------------------------------->

Running "concat:js" (concat) task
File "build/js/framework7.js" created.

Running "less:build" (less) task
File build/css/framework7.css created.

Running "concat:css_build" (concat) task
File "build/css/framework7.css" created.

Running "jshint:gruntfile" (jshint) task

Gruntfile.js
line 87 col 112 Expected '{' and instead saw 'addIndent'.
line 93 col 26 Expected '{' and instead saw 'return'.
line 117 col 0 Identifier 'css_build' is not in camel case.
line 121 col 0 Identifier 'css_dist' is not in camel case.

build/js/framework7.js
line 30 col 47 Expected '{' and instead saw 'window'.
line 31 col 58 Expected '{' and instead saw 'window'.
line 32 col 55 Expected '{' and instead saw 'window'.
line 88 col 44 Expected '{' and instead saw 'window'.
line 95 col 32 Expected '{' and instead saw 'return'.
line 144 col 44 Expected '{' and instead saw 'return'.
line 166 col 71 Expected '{' and instead saw 'return'.
line 176 col 33 Expected '{' and instead saw 'return'.
line 194 col 108 Expected '{' and instead saw 'cancel'.
line 195 col 79 Expected '{' and instead saw 'cancel'.
line 211 col 38 Expected '{' and instead saw 'touchesDiff'.
line 216 col 56 Expected '{' and instead saw 'activePage'.
line 299 col 38 Expected '{' and instead saw 'app'.
line 388 col 47 Expected '{' and instead saw 'index'.
line 390 col 34 Expected '{' and instead saw 'app'.
line 438 col 50 Expected '{' and instead saw 'return'.
line 524 col 39 Expected '{' and instead saw 'return'.
line 525 col 35 Expected '{' and instead saw 'return'.
line 641 col 39 Expected '{' and instead saw 'return'.
line 699 col 52 Expected '{' and instead saw 'url'.
line 871 col 64 Expected '{' and instead saw 'app'.
line 872 col 56 Expected '{' and instead saw 'params'.
line 902 col 45 Expected '{' and instead saw 'callbackCancel'.
line 905 col 41 Expected '{' and instead saw 'callbackOk'.
line 950 col 34 Expected '{' and instead saw 'buttonsHTML'.
line 953 col 38 Expected '{' and instead saw 'buttonClass'.
line 954 col 37 Expected '{' and instead saw 'buttonClass'.
line 956 col 53 Expected '{' and instead saw 'buttonsHTML'.
line 972 col 59 Expected '{' and instead saw 'app'.
line 973 col 51 Expected '{' and instead saw 'buttonParams'.
line 983 col 60 Expected '{' and instead saw 'return'.
line 1038 col 40 Expected '{' and instead saw 'modalLeft'.
line 1039 col 63 Expected '{' and instead saw 'modalLeft'.
line 1040 col 50 Expected '{' and instead saw 'modalAngle'.
line 1041 col 53 Expected '{' and instead saw 'modalAngle'.
line 1074 col 37 Expected '{' and instead saw 'return'.
line 1091 col 41 Expected '{' and instead saw 'modal'.
line 1113 col 35 Expected '{' and instead saw 'modal'.
line 1114 col 34 Expected '{' and instead saw 'modal'.
line 1128 col 38 Expected '{' and instead saw 'return'.
line 1130 col 65 Expected '{' and instead saw 'return'.
line 1145 col 43 Expected '{' and instead saw 'panel'.
line 1150 col 39 Expected '{' and instead saw 'panel'.
line 1158 col 43 Expected '{' and instead saw 'return'.
line 1177 col 40 Expected '{' and instead saw 'return'.
line 1193 col 52 Expected '{' and instead saw 'return'.
line 1195 col 47 Expected '{' and instead saw 'return'.
line 1215 col 22 Expected '{' and instead saw 'message'.
line 1222 col 22 Expected '{' and instead saw 'message'.
line 1227 col 47 Expected '{' and instead saw 'return'.
line 1227 col 47 Too many errors. (60% scanned).

✖ 55 problems

Warning: Task "jshint:gruntfile" failed. Use --force to continue.

Aborted due to warnings.

Execution Time (2014-03-18 02:09:35 UTC)
loading tasks 417ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 38%
concat:js 12ms ▇ 1%
less:build 302ms ▇▇▇▇▇▇▇▇▇▇▇▇▇ 28%
jshint:gruntfile 355ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 33%
Total 1.1s