sourcebitsllc / chocolatechip-ui Goto Github PK

Code:

Start with an empty div (and only div in the page)

var a = $.make('<p>hello world</p>    <p>hello word again!</p>')
$('div").insert(a); // or $(div).append(a);

Only the first node will be added to the div

Did some tracing,think it's related to line 758 in chocolatechip-3.0.6.js:

            this.each(function(node, idx) {
               __insert(node, cnt[idx], position);
            });

the this in the line refers to that of the container being inserted to, rather than the array of nodes that is being inserted. Tried changing this to cnt but no luck, got an error "trying to insert a node where it doesn't belong"

Because it matches the User-Agent string for Safari as well as Android.

$.isAndroid = true
$.isChrome = false
$.isSafari = true
$.isiOS = false

Same thing happens with Firefox on Android, with the same matched variables as above except that isSafari is false

Not sure where to put this or if there is a better way of doing this, in any case just putting this here, might be helpful

The only (easy) way I could fined to do this is to check current article's scroll position, if on top push it down by 1 pixel and if on bottom pull it up by 1 pixel, this will prevent the whole page from bouncing up and down when you swipe down/up while scroll position is on top/bottom.

$(document).on('touchstart', function(e){
var el = $(e.target).parents('article');
if(el.length) {
var scrollPos = el.scrollTop();
if(scrollPos == 0) el.scrollTop(1);
else if(el[0].scrollHeight-scrollPos == el[0].offsetHeight)el.scrollTop(scrollPos-1);
}
});

Hello,
I'm trying to use the function $.UIGoToArticle, I created a function that on a image click fires a function that uses it
$( "#btnCatalogo" ).click(function() {
//alert('entro');
$.UIGoToArticle('#articulo');
});
This is the error

The current chui.js uses attr("checked", "checked") to check radio inputs for the UISelectList. This is incorrect as causes the radio button not to be selected (Chrome/Safari).

The correct way (as per jQuery website) is using the prop("checked", true)
See: http://api.jquery.com/prop/#prop2

CodePen showing problem (click around a bit. See serialized form output.)
http://codepen.io/damianharvey/pen/oCxne

This is with fix in using prop():
http://codepen.io/damianharvey/pen/KAEmL/

I've issued a pull request.

Thanks

Hi guys,
I am trying to create a list of items + global menu on my app.

My #main article has the list, and I use data-goto on li to view details.

<article id="main" class="current">
    <section>
        <ul class='list'>
            <li class='nav' data-goto='article1'>Article 1</li>
        </ul>
    </section>
</article>

For my global menu I wanted to use UISlideout but, each time I run $.UISlideout(), all navigation in the app breakes.

The function removes current, next, previous classes from all articles and put's show.

What am I doing wrong? How is this supposed to be used?

Thanks!

In the demo in android, when the user clicks on an popover list item, the list does not close, nor does the selected item get set (it's erratic, sometimes it does, sometimes it fails)

Also, in iOS, after the popover list closes, the list's label (Fruit/Deserts) is highlighted randomly and erratically.

• Also, as a minor point in your demo there is a type, it's Desserts not Deserts

The slide out menu doesn't appear to function in Android 4.2.2. You can tap the icon and nothing happens.

Hi, I started to use Chui a few days ago... I noticed that you removed $.UIDeletable for newest versions... So, how can I trigger a callback when a item is deleted? I tried to follow the example, but it is using the previous code... Thanks in advance...

Greetings...

After release new version of framework, html-files in folder examples were defective.
Also main js-files were disappeared...

Currently only two level navigation works, if I create three level as follow:

main article [containing link goto=secondary]
secondary article [containing link goto=third]
third article [containing link back]

When going back from third article to the secondary article the URL turns to domain.com/#/[object Object] but it still works however after going forward and backward in the navigation the whole app stops working, I can probably work around this by creating sections within article however then I can't have dedicated 'nav' for my sections.

I'm using version 3.8.0 and using emulator and Nokia Lumia 635 the arrow inside the back button isn't centered and is floating to the right instead. Landscape mode seems to be working fine.

Hi,

the YUI compressor removes the whitespaces from the URL encoded SVGs which seems legitimate since whitespaces aren't allowed in URLs.
What do you think about encoding them base64?

Max

I simply extended jQuery to include the code already in ChoclateChip. Required in $.subscribe.

$.extend($, {
    uuidNum: function () {
       return Math.floor(((1 + Math.random()) * 0x100000000));
    }
});

at project folder:
sudo npm install -g grunt-cli

say:

module.js:340
throw err;
^
Error: Cannot find module './lib/optional'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:362:17)
at require (module.js:378:17)
at Object. (/usr/local/lib/node_modules/npm/node_modules/request/index.js:15:16)
at Module._compile (module.js:449:26)
at Object.Module._extensions..js (module.js:467:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:362:17)
DelaiMacBook:chocolatechip-ui delai$ ls

I think the infomous 300ms tap event delay is not working for tabbar.
I'm using Android 4.0, Phonegap 3.0 and the tabbar delay is there.
I'm not very good in JS but i tried to use fastclick library (Github: https://github.com/ftlabs/fastclick ) and nothing is happening.

Could someone help with this?

The navigationend event does not seem to fire when using the default back button. My impression is that a call to triggerNavigationEvent is missing in UIGoBack.

Gestures (swipe left or right) doesn't seem to be working on Android (on my Nexus 4 anyway), I've tried Chrome and default Android browser, also tried it on CUI demo website (deletable lists where it says swipe to cancel) and it doesn't work.

However using Chrome on my computer and emulating touch events and forcing user agent as Android, gestures do work.

Gestures also work fine on iOS.

P.S. I'm using latest jQuery and latest version of CHUI at the time of writing this.

I have 3 tabs in my app. In one tab i have several articles and i use nav and back button to navigate.
If the user goes to another tab, i have a button to return to the original tab, same article.
I use pub/sub and chui/navigate/leave to know where to return to.
I then use $.UIGoToArticle() to attach an event to the button.

So, that works great. But when i return to the original tab and article, it's back history (within that tab) is gone.

Would be nice if that was still there. Not sure if this is an issue or the way it is designed.

I am planning on using chocolatechipjs for a project I am working on, but I don't see a separate maintained repo for this. It looks like the only source is inside this repo and you guys are just updating a single, monolithic js file with no tests or build scripts for it.

Would it be possible to have chocolatechipjs in a separate repo that I could fork? We have found a couple minor issues and would like to add some tests. Right now our only choice is to fork this repo or create our own and copy/paste the current version as our first commit. Neither of these options will make pushing any fixes we make back upstream to you guys very easy.

What do you think?

after second time send data i see the error

this is my code

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <title>Demo</title>


   <?php
      $agent = $_SERVER['HTTP_USER_AGENT'];
      $browser = null;
      $agent = $_SERVER['HTTP_USER_AGENT'];
      $browser = null;

      if (preg_match("/android/i", $agent))
       {
         echo '<link rel="stylesheet" href="css/chui-android-3.5.1.css">';
       }
       elseif (preg_match("/Trident/i", $agent) && (preg_match("/MSIE 10/i", $agent) || preg_match("/MSIE 11/i", $agent)))
       {
         echo '<link rel="stylesheet" href="css/chui-win-3.5.1.css">';
       }
       elseif (preg_match("/Apple/i", $agent))
       {
         echo '<link rel="stylesheet" href="css/chui-ios-3.5.1.css">';
       }
   ?>
</head>
<body style="" class="isAndroid isDesktopChrome"><nav id="global-nav"></nav>
    <nav class="current">
      <h1>Login</h1>    
    </nav>
    <article class="current">
      <section>
        <form id="login" >
          <h2><img src="images/assets/logo_m.png"></h2>
            <div id="warning">

            </div>
          <ul ui-implements="form" class="list">
            <li class="comp">
              <div>
                <label for="userName">User name:</label>
              </div>
              <aside>
                <input id="username" class="form-control" type="text" name="user.username" autocapitalize="off" autocorrect="off" required>
              </aside>
            </li>
            <li class="comp">
              <div>
                <label for="password">Password:</label>
              </div>
              <aside>
                <input id="password" class="form-control" type="password" name="user.password" autocapitalize="off" autocorrect="off" required>
              </aside>
            </li>
          </ul> 

          <a id="btn-login" class="button">Login</a>
          <a href="javascript:void(null)" class="button" id="goToForgotPassword">Forgot password?</a>
        </form>
      </section>
    </article>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="js/chui-3.5.1.min.js"></script>


    <script type="text/javascript">




   $( "#btn-login" ).click(function() {

                        var datalogin = {
                            username: $("#username").val(),
                            password: $("#password").val()
                        };


                         $(document).ajaxStart(function () {
                            $.UIPopup({empty: true});
                            $('.popup').UIBusy({'color':'orange', 'size': '80px'})
                          });

                          $(document).ajaxComplete(function () {
                              $('.popup').UIPopupClose()
                          });



                        $.ajax({
                            type: "POST",
                            url: "remote/login.php",
                            data: datalogin,dataType: 'json',
                            success: function(forms)
                            {
                                if(forms == '1')


                                        $("#warning").html("<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert'>&times;</button><strong><i class='fa fa-check'></i> Success!</strong> Will be redirect in 5 sec <i class='icon-spin icon-spinner'></i> <meta http-equiv='refresh' content='2;URL=index.php'></div>");

                                else

                                        $("#warning").html("<strong>Error!</strong> Wrong username or password</div>");




                            }
                        });
  });            
          </script>
</body>

It's not possible to have a search input in the navbar on ios due to rubber banding prevention stopping the event passing through to the input field.

Not sure if this is the best way to do it, but I've been using the following in navigation.js ...

  /////////////////////////////////////////////////////////
  // Stop rubber banding when dragging down on nav:
  /////////////////////////////////////////////////////////
  $('nav').on($.eventStart, function(e) {
      if ( ! $( e.target ).is('input') ) {
          e.preventDefault();
      }
  });

Hi.

Am I crazy or does the default iOS 7 demo look sloppy? Looks this way to me both in the iOS Simulator and on the demo site at http://chocolatechip-ui.com/demo#/main .

To be specific:

• The window titlebar contents sit way too close to the time in the status bar
• The list items' borders are indented
• The nav 'greater than' symbols are badly aligned

If I have a ul list, and associated with $.UIDeletable.

In other part of the app, I appended new li child to the list, $.UIDeletable won't bind to the new li item.

If I try to initial $.UIDeletable again on the list, the old li items will have two delete icons.

Version: 3.5.2

I am on an android device, working fine with 3.5.2. i upgraded to 3.5.5 to use the carousel widget and this works fine on the desktop. however, on the device i get this error:

file:///android_asset/www/assets/js/chui-3.5.5.min.js: Line 8 : Uncaught TypeError: Cannot read property 'classList' of null

http://chocolatechip-ui.com/tutorials#/navigation shows this syntax for navigation:

<li class='nav' data-goto='#people'>

This doesn't seem to work. In this example, you'd have to remove the "#" like so:

<li class='nav' data-goto='people'>

Did this change recently? Perhaps the docs just need to be updated?

Lists are not highlighted on touchmove event (actually not triggered)
source for touchmove issue: http://stackoverflow.com/questions/20412982/javascript-any-workarounds-for-getting-chrome-for-android-to-fire-off-touchmove

but lists are highlighted on mousemove,

Uglifying source "chui/chui-3.0.6.js" failed.
Warning: Uglification failed.
Unexpected token: name (list).
Line 368 in chui/chui-3.0.6.js
Use --force to continue.

In $-extensions.js line 238 there is a period between $ and (list) which throws a grunt build error.

If I try the following line in console:

$('<p class="test">hello world</p>   <p>hi!</p>').find(".test")

I will get:

TypeError: Object #<Text> has no method 'querySelectorAll'

What's the best way to fix this issue?

Hello I have just discovered weird issue which is connected with trigering singletap event on scrolling list. Here is a demo: http://www-tvorba.com/chuiScroll.
Scenario:
List with lot items, each item contains data-goto for navigation to detail article. If item is clicked/tapped, detail article is shown with the index number of clicked item (there is the singletap event handler for getting index of tapped list item).

I have tested this in various environment:

Samsung Galaxy Note (Android 4.1.2) - native internet browser: Each tap - also if you just want to scroll - is triggered and you go to detail view. Therefore the UX is very bad, it is almost not possible to use it.

The same device but embedded in Phonegap App (container) - Almost native UX - you can scroll the list and if the moving list is tapped, it stops at first and the second tap is for going to detail page.

iPhone 4s (iOS 8) - Native browser Safari - Acceptable UX - you can scroll and if the list is scrolling and you tap some moving item, you go immediately to detail and the right id is shown.

The same device but embedded in Phonegap App (container) - If you scroll the list, and it is moving, the first tap do not stop it. Insted, you are navigated to detail page. But you do not get the right index of clicked list item. It seems, there is some problem with event handling. It is possible to scroll the list and tap somewhere around item 20, bud in detail page, you got eg. index 4.

It is possible to achive a consitent implementation - i think the best behavior has phonegap app within android device - first tap stops the scroll animation, second tap is for triggering the navigation event.

I can provide you videos if you are interested.

Hi,
I have faced issue with "back button" alignment and appearance in portrait mode in my app
Up on running the demo app, i can easily reproduce the same. Im on latest version 3.6.1
Please refer the attached screen shot. Can you please help me out to resolve this issue?

Steps to reproduce:

1. Load Navigation Back To example
   chocolatechip-ui/examples-ios/navigation-backto.html

2. Click "Straight to Detail Article" button

Errors in console:

Mobile Safari:
TypeError: 'undefined' is not a function (evaluating 'destination.prev()')

Chrome:
Uncaught TypeError: Object #article3 has no method 'prev'

I seem to be getting this error trying to implement buttons / a tags in my own project. Could you also update the documentation about A tags that they don't use data-goto, you have to wire up actions via JS? Figured it out eventually from examples, but unclear in docs.

Thanks.

I have tested grids on Mac and iOS Safari and have found, that within the CSS class .grid, the display: -webkit-flex; is missing. There is only display:flex; but these browsers do not support it. Simple solution should be adding the webkit css feature listed above.

I don't see any issues-section in the new repo, so I guess my best option is to post this here:

I've tried several demo's, from the site and ones I've built myself or built by collegues. Recent Firefox versions don't seem to do any navigation done with data-goto.

The section on platforms in docs doesn't list anything related to Firefox. Perhaps it should mention that compatibility with Firefox is limited. If this isn't fixed, I think the majority of all ChUI apps won't work properly on Firefox.

Hi,

I've inherited a project that uses ChocolateChip-UI... I'm looking for buttons

Can you help me?

(I don't seem to find them in the docs)

Image for illustrative purposes.
Thanks!
Michal

This means every second $.UIDeletable you set up, it will double-bind to the event, making your list unusable (it will toggle the .selected class twice, on then off). Third list is fine. Fourth, unusable.

The problematic bindings are in chui-3.0.6.js, line 345. Also, these events use 'singletap`, not the framework's $.eventStart. Any reason for this?

Currently the list can not be navigable if you want it to be deletable, my work around this issue was (using jQuery):

  $(document).on('singletap', 'a.edit,a.done', function(e) {
    var edit = $(e.target).hasClass('edit');
    if(edit){
      $('article.current ul.deletable').find("li").map(function(){
        $(this).attr('data-tmp',$(this).data('goto')).removeAttr('data-goto').removeClass("nav");
      });
    } else {
      $('article.current ul.deletable').find("li").map(function(){
        $(this).attr('data-goto',$(this).data('tmp')).removeAttr('data-tmp').addClass("nav");
      });
    }
  });

This is really not an issue but a suggestion to make navigable lists deletable too

The website is showing a 502 for the past 36 hours.

Hi,
ChUi is working so far, but its unclear to me what i can do with the chocolatechip-ui.json!
There is nothing in you documentation about it. Can you please explain the purpose of those settings in there? When should i enable what setting?

thanks

i have a list loaded thru ajax that i'm using with $.UIDeletable. I put $.UIDeletable in a function called initDeletables (as suggested).
I start with an empty list. I append one item. no problem. The second item i append, i get the following error:
Uncaught TypeError: Cannot read property 'on' of undefined chui-3.5.5.js:1459

I do a work around by putting $.UIDeletable in a try catch phrase, and just ignore the error.

Hi guys,
when I included your fantastic product to my hybird android app, I found each time when I scroll a long list with each item has a "data-goto" attribute ,it will always result in entering the first touched item's detail page, that don't fit our normal requirement, would you please have a look at it?
You can always see it when you use chrome and go into the emulate device model and take a look at the navigation-backto.html example.

Thanks!
Fred

Tried running one of the android examples (carousel-1.html) on an android tablet (4.2). App does not load, i get the following error:

file:///android_asset/www/assets/js/chui-3.5.5.js: Line 258 : Uncaught TypeError: Cannot read property 'classList' of null
file:///android_asset/www/index.html: Line 49 : Uncaught TypeError: Object function (e,n){return new x.fn.init(e,n,t)} has no method 'UISetupCarousel'

If you have a SlideOut then any buttons in the nav (eg. placed to the right) will cease to function. Reproducible on the CodePen SlideOut example: http://codepen.io/anon/pen/KitlF (forked)

The string-replace task grunt task cannot locate the iife headers to remove them as it is looking for \n and not \r\n .

Not sure if this is the best way to fix for all platforms, but adding an extra option to the 2 string-replace tasks fixes it for me.

    options: {
       replacements: [{
           pattern: /\r/img,
           replacement: ''
      },

Is the code shown on the homepage "Music app" screenshots available as example?

In list.less, 'list.comp > div > p' has a font-size of 10pt, which looks about right to me, but other 'li p' type selectors just inherit 12pt from '.list li'. Should this be moved in typography.less anyway?

.list {
  & h3, & h4, & p {
    pointer-events: none;
  }

  & > li {

    & > p {
      margin: 6px 0px;
      color: @listDetail;

      & + p {
        margin-top: 6px;
      }
    }

    &.comp > div > p {
      font-size: 10pt;
      margin: 0;
      color: @listDetail;
    }
  }
}

I have created a simple CHUI application that reads a json file and displays the text in a list. When a list item is selected a page displays showing details (also loaded from the json file).
The total number of rows in the list is less then 40.

The application is wrapped in cordova and deployed to an iPhone as an application.

With the full list of 40 list items loaded, the application throws memory warnings and crashes. Removing half of the list items allows the application to run without crashing.

Why would such a paltry amount of json data crash this application? Can you give me any feedback on my approach?

I am building an app that authenticated through jquery and then the user is to be redirected to their "portal" page. I am using chui-3.0.8.js. My initial thought is to redirect through $.UIGoToArticle.('#portal') which is the id of my article. However, when it authenticated and gets to UIGoToArticle it returns the error

Uncaught TypeError: Cannot Read property 'id' of undefined. line 274 on the script.

If I am not using UIGoToArticle Correctly then please let me know and ignore this issue.

Thanks

I am using 4 tabs in my app. If there is some longer list in the content and you scroll down, than double-click is needed for switching the tab. It happens only on Android (I have 4.1.2).
By the first tap on the tab, it is highlighted and second tap triggers the transition. Is there any solution for this situation?

Hello all, and first of all thanks for the awesome library.

I am having a bit of trouble using chui v3.5.2 on Windows Phone 8. I have built everything with gulp according to the docs, and the demo screens show up with a "oval" back button in both the Windows Phone 8 emulator and on a Lumia 920 phone.

Upon further inspection, it looks like the issue only occurs when the phone (or emulator) is in portrait mode.

Here is a screenshot of the "Segmented Control" page in the emulator in portrait orientation...

...and here it is in landscape orientation...

I've also got a StackOverflow post that I created a few days back. It has a sample that will also reproduce the issue.

I have been able to reproduce this with the demo website in the latest package on npm, and by pulling the latest off of the master branch and building that code.