phonon-framework/phonon

Phonon is a responsive front-end framework with a focus on simplicity and flexibility

phonon's Issues

Riot example not working

Tried to use riot example from link on this page and it doesn't work - just seeing a blank page.

Confirm box cancelable

I think i identified some bugs
var confirm = phonon.confirm('Do you want to APPROVE this transaction?', '', false, "");

1. by default the 'cancelable' seems to be true.
2. if i explicitly declare cancelable false, pressing the 'cancel' button does trigger the on.cancel command but does not close the alert after finish running through. is there anything i missed out?

touch event issue on "qqbrowser"

if using dialog ui in "qqbrowser", when dialog closed, the "tap" event can not working. i touch anything, no effect.

Inputs can't be filled from Safari on iOS

Using iOS 8 & iOS 9, inputs in http://phonon.quarkdev.com/docs/forms can't be filled.
The animation (on first name) does work correctly, I got focus on input : cursor appears in input and keyboard shows. But typing something does not do anything.

How about a 'swipe slider'?

Thinking about a few suggests... how about a 'swipe slider'? I usefull to 'tour' app

Lists hidden large texts - small tweek

Tested in mobile with small screen (LG E471F). When the page has a list, the LI with large text are hidden, don't back to next line.

<ul class="list">
    <li>
        <p>This is my large large large large largelarge large large large largelarge large large large large text!</p>
    </li>
    <li>
        <p>This is my small text</p>
    </li>
</ul>

.changePage() with similar names

Hi,

found a bug,
For example if i am navigating from notification.html to notificationdetails.html.
within that page there is a button that invoke .changePage('notification').

There will be no response from the code and error.

Problem is solve after i change the the naming from notificationdetails.html > notidetails.html

Access Riot tag instance

Is there a way to access the Riot tag instance that is created when Riot.mount is called to load the tag? Is it available through tagManager?

Custom Dialog accessing inputs

If I am using a custom dialog is there a way to directly access input elements (like prompt provides)?

Disable/Remove page

I have some sort of loading screen but i want it disable after app is loaded. Is there a proper way/built-in method to remove it from history? Any suggestions?

Thank!

Notifications time out

Hello,

notifications with timeout (auto close) are not always working.

Please, see attached screen shot.

First notification opened without progress bar. Second has progress/timeout and working perfectly.

Is there a way to only use UI components of Phonon?

I want to use phonon in an angularJs project.
Though i know there is an example where you are using phonon with angular
But i wanted to use only the UI components of Phonon and let Angular handle all the routing.
Is there a way to do so?

Phonegap - on Android devices external HTML files are not working

On Android devices (tested in external HTML files are not working as pages on Phonegap apps. When they are inserted to index.html everything works well. On IOS devices and desktop browsers it's working fine.

Tests were run with the offical Phonegap android and IOS apps.

tabs bottom and pin bottom class

plz add it 👍

• tabs bottom
• pin div bottom

No icon on pull-right in header

I have the following header but the icon does not appear on the right side, icon on left is fine.

<header class="header-bar">
        <div class="left">
            <button class="btn pull-left icon icon-arrow-back" data-navigation="$previous-page">      </button>
            <h1 class="title">Back</h1>
        </div>       
        <div class="center">
            <h1 class="title"><img id="smlogo" src="img/wslogo4.png">WSPR4 Topics {opts.userid}</h1>          
        </div>
        <a class="btn pull-right icon icon-home" data-navigation="login"></a>
    </header>

changePage does not do anything when an indicator is shown

What I want to do :
I got to go to another page after an Ajax request.
I want to show an Indicator while request is being done (it's a login request).

What it does :
changePage does not do anything if indicator is present in the page. Even if I close it before calling

            var dialog = phonon.indicator("Login...");

            phonon.ajax({
                method: 'POST',
                url: apiUrl+'/myuri',
                crossDomain: true,
                dataType: 'json',
                data: {some: things},
                success: function(res) {
                    dialog.close();
                    phonon.navigator().changePage('secondpage');
                },
                error: function(err, req) {
                    dialog.close();
                }
            });

This works as soon as I remove this indicator.

Any idea?

Escape preventClose

I want to use preventClose.
But in one case, I don't want to emit the event. For exemple:

phonon.navigator().changePage('home');

Here, it's the application who want to change page not the user. I don't want to emit a event here.

How can I do that?

I think I've to do a condition in the event, but I ask you if there are a better way to do that.

CrossDomain flag is not handled correctly

Hi !

This line seems to be wrong :
https://github.com/quark-dev/Phonon-Framework/blob/244fa27828ab90aa6e54f54da765d8fe704a8c99/src/js/core/ajax.js#L66
I think it should be :
var crossDomain = (typeof opts.crossDomain === 'boolean' ? opts.crossDomain : false);

For now, CORS is activated when opts.crossDomain equals "boolean" which is odd ;)

Having fun with Phonon so far, thanks!

Can't use href="#!my-page" if enableBrowserBackButton: false

Because of
https://github.com/quark-dev/Phonon-Framework/blob/3aa6ed0e2c06fa893e9b538ed58346333b4ccf06/src/js/core/navigator.js#L600
and
https://github.com/quark-dev/Phonon-Framework/blob/3aa6ed0e2c06fa893e9b538ed58346333b4ccf06/src/js/core/navigator.js#L762

A link to a page will not work.

Input floating label is not cleared

After entering an input in an input with floating label
floating label is coming on top of the input text

UI Component TAB - How define what tab open first?

Imagine, I have 3 tabs "calls", "talks" and "contacts", so when app is ready I want open first tab "talks", but actually Phonon open "calls" because is first element of HTML

So, how define what tab open first?

I think can add this

<!-- HTML not necessary to this example -->
<div class="content" data-tab-contents="true" data-disable-swipe="false" data-tab-fist="elementID">
<div class="tab-content">
            <div class="padded-full">
                <h1>Calls </h1>
                <p>Swipe me!</p>
            </div>
        </div>
        <div class="tab-content" id="talks">
            <div class="padded-full">
                <h1>Talks</h1>
                <p>Swipe me!</p>
            </div>
        </div>
<!-- HTML not necessary to this example -->

How about a 'new icons'?

Feel missing of search icon, attach, folder, upload, download, camera, place, navigation, wifi,
share, contacts and person.

What do you think about add this icons?

example amazing icons
https://design.google.com/icons/

Static bottom panel and footer

Hi,

thank you for this great work!

Is it possible to add a static panel ui component or/and fixed footer.

I think something like notification ui with out timeout bar and close.

Please see bottomed panel with button's at

http://share.pho.to/9rpem

Thank you.

Kind regards,
Vangelis

Issues in Chrome

Could just be me, but I cannot seem to get the menu system to work reliably. It does not even work for me on the demo site. It works fine for IE and firefox, but not in Chrome which makes working with Ripple and Cordova pretty hard.

http://phonon.quarkdev.com/components

Cancel Page Change

Is it possible to cancel a page change within the target page's onReady event?

Angularjs

Is it possible to use angularjs with phonon? If so, is there an example anywhere? I couldn't find any documentation anywhere about it. Cheers!

Unable to scroll

Hellow,

I am using Phonon framework on phone gap mobile application. After applied the framework, I am not able to scroll down or up when the page grows. Do you guys have any suggestions on that?

Thanks

Flat Menu design?

Can I suggest the addition of flat menu design. something like this...

loader is required

this framework is lightest and fastest

but just before loading it looks too bad there must be loader on index page before all

Change page after dialog confirm

I would like change page after the user confirms a dialog box. The navigator is changing but page is not after the dialog. My example code:

confirm.on('confirm', function(){
   app.changePage('home');
});

Lost param in first access

Every first time when access the 'home' and navigate to 'pagetwo' the param from URL is losted

Error in console: "Uncaught TypeError: Cannot set property 'textContent' of null" this happening because onHashChanged was not fired, but how fix this?

You can see this issue in http://phonon.quarkdev.com/App/public/phonon/examples/pizza-app/ too. First access, no have hash, so need back to home and navigate again to work.

params usage

Hey man, it's me again :)

How to use req for params in the new version. I can see how to set but not how to retrieve them.
I saw I can catch then in onHashChanged but this method is called after ready so it's not much of a help as the page is already visible. Any advice on this one? How to properly pass params from a page to another?

Thanks!

Previous Page not working

I'm having a problem with Previous Page not working correctly. I have a page with a list on it. Each list item has two links on it to go to one of two pages ie; href="#!messages/1/Topic One" etc. The second link might be href="#!edittopic/1/Topic One. For some reason the previous page sometimes drops the last slash when it tries to navigate ie; href="#!edittopic/1Topic One. At that point the nav is completely out of sync and it doesn't navigate to the right page.

Edited: I've determined that no matter which of the links you use first the second link will produce the error when trying to use $Previous-page

Checkbox not working in list with other elements

When added more HTML elements in the li, checkbox don't work. I think that can be accept others elements to allow better li views

<ul class="list">
    <li class="">
        <label class="checkbox">
            <input type="checkbox" class="">
            This works
            <span></span>
        </label>
    </li>
    <li class="">
        <label class="checkbox">
            <input type="checkbox" class="">
            Don't work | Salt - 
            <bold>$ 9.99</bold>
            <span></span>
        </label>
    </li>
</ul>

Component tab - add content dynamically broken HTML

I am trying add lists into content of component tab dynamically but every time broke HTML of tab content. I think has a problem with DOM parser, don`t know how refresh content.

Try with latest version of phonon and simply use

$( 'element' ).html( '<p>my new content</p>' ) 

events inside tabs not working

Hello, I am trying to add event listener inside tab with no luck...

app.on({page: 'home', preventClose: false, content: 'page-home.html', readyDelay: 1}, function(activity)
{
    activity.onCreate(function()
    {

        document.querySelector('.statusbtn').on('tap', function()
        {
            phonon.alert('Example', 'Hello');
        });

    });
});

<div class="content" data-tab-contents="true" data-disable-swipe="false">
    <div class="tab-content">
        <div class="" id="dashboard">
        </div>
        <nav class="tabs">
            <div class="tab-items">
                <button id="statbtn" class="statusbtn btn fit-parent positive" data-i18n="text: status-free"></button>
            </div>
        </nav>
    </div>
</div>

Ajax calls

Hello,

using Phonon ajax I always get NO_INTERNET_ACCESS.

I test it with Apache cordova and whitelist plugin. I test it also as plain html without cordova, restrictions etc.

Now I am using jQuery ajax instead Phonon Ajax and everything works fine.

Any idea/help about?

Thanks!

Vangelis Afantenos

Bug when using the full panel and notification

Hi,
I am using the full panel to create a form. On the left hand-side each label has own text for notification. After clicking the label, notification is shown, and if at this moment I click the notification, then the whole panel closes.

Thank you.

Side Panels - Horizontal Scroll

on side panels its possible to horizontal scroll if you hold your finger in the panel, check the video on link

https://mega.nz/#!uMtXgIaB!QqpzC2NV1MfeGn4JduPA9LB9K_3tGIwC1xg7Ka4kFmU

XMLHttpRequest does not return status 200 for local files

The following does not work on a device with iOS 9.1 using cordova:

if (req.readyState === 4 && req.status === 200) fn(req.responseText);

in navigator.js line 394

This is because XMLHttpRequest does not return a status code when accessing local files.

One solution might be to omit the status check and check the responseText string length instead.

Using params in an URL

Hi,

When clicking on http://phonon.quarkdev.com/App/public/phonon/examples/pizza-app-with-riot/#!pagetwo/prosciutto I'm expecting to be redirected to pagetwo, with a prosciutto param. This is not the case as I'm redirected to http://phonon.quarkdev.com/App/public/phonon/examples/pizza-app-with-riot/#!home.

How to achieve such a behaviour?

[Request] Side Menu

Could you add a slide menu?
Example

thanks

Back button in header not working

I've got a two page test setup (home and getmytopics) using riot and the back link does not work from page getmytopics. I've tried data-navigation="$previous-page" as shown below and data-navigation="home" and neither works. The <a link to home does work.Not sure what could be wrong with this.

<header class="header-bar">
        <div class="left">
            <button class="btn pull-left icon icon-arrow-back" data-navigation="$previous-page">             </button>
            <h1 class="title">Back</h1>
        </div>       
        <div class="center">
            <h1 class="title">WSPR4 Your Topics</h1>
            <a href="#!home">Home</a><!-- this link works -->
        </div>
    </header>

Dialogs and i18n

Hi,
I want to change the "ok" and "cancel" label to, for example "oui" and "annuler".
Do I need use custom dialogs or there is a different way to do that.
Is it a defect of Phonon?

Thank you for this powerfull framework.

Page html context

Hi,
First of all. congrats on the new release! Looks awesome. I just started using your framework 3 weeks ago. This last release kicks ass! I'm a big fan of Vanilla JS so I really enjoy the look and feel oh Phonon! It's a bit tricky thought , it'd doesn't have backward compatibility but is ok!

I have one question though, how to retrieve the page object from within the activity?

Awesome job guys!

How to pass data from page list to a details page

I'm working with Phonon and Riot and reached a point where I am not sure what to do. I have a list displayed of Topics each which has a unique topic_id. When I load my details I can pickup the id from my uri but the Riot script code will only execute once on the first load. After that no mater what if I go back and pick a different topic it never executes the Riot code again so the data is always the same as the first time. Suggestions?

Getting riot to work

I'm trying to use Phonon with riot as a web app. I've setup my own simple example but I get this error in chrome console when trying to load the home page.

Uncaught Error: A namespace for home is detected, but the DOM node is not found.

Update: Never mind - got it to work after a closer look at your example.

Lists not scrolling in sub pages

Hi,

Is anyone facing the issue on lists in sub-pages not able to scroll? The list in the main page works, but when using list in subsequent pages, it is not scrollable. I tested this on iOS Safari and it works fine. But on iOS chrome and adding the web onto homescreen via safari does not work. Any fix to make the page scrollable?

Edit: Tested the kitchen sink, same issues as well.

Thank you!

app.changePage -> activity.onHashChanged no params

So, I am changing the page with - app.changePage("pagetwo", "prosciutto");
on the next page - activity.onHashChanged(function(pizza) { console.log(pizza); }); gives no data

in fact even on refreshing on this new hash, activity.onHashChanged(function(pizza) { console.log(pizza); }); gives no data.

More precise repro conditions: when the page is opened the first time, it wont work, but if I use the back button and then come back to this page, it does work.

Side Panel Bug

Error:Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Using the sample code, trying to navigate between 2 pages using side panel within a single html file.
somehow i am unable to navigate back using the side panel after navigating from the first.

<div class="side-panel side-panel-left" data-expose-aside="left" data-disable="right" data-page="home" id="side-panel-example">
    <header class="header-bar">
        <button class="btn pull-right icon icon-close show-for-phone-only" data-side-panel-close="true"></button>
        <div class="pull-left">
            <h1 class="title">Side Panel</h1>
        </div>
    </header>
    <div class="content">
        <ul class="list">
            <li><a class="padded-list" href="#!home">Home</a></li>
            <li><a class="padded-list" href="#!pagetwo">Page Two</a></li>
            <li><a class="padded-list">Settings</a></li>
            <li><a class="padded-list">Login</a></li>
        </ul>
    </div>
</div>