- Reverted to cordova-plugin-statusbar@1.x till https://issues.apache.org/jira/browse/CB-10796 is fixed
- Changed the search input to type=text so that F7 can style it properly in dark mode.
- Removed extraneous comments that were untrue and confusing
- opened up the CSP to allow * for websockets
- added an icon entry for the desktop app
- Added iOS as a saved platform
- Updated media plugin to 2.3.0
- Updated statusbar plugin to 2.1.3
- Updated console plugin to 1.0.3
- Removed some
console.log
statements
- Added an image to satisfy the SplashScreen's browser implementation
- Changed name and id
- Changed title
- Changed header
- Changed subtitle
- Changed instructions
UX issues from feedback - pt 2 - 382788b
- Added better font-awesome icon for the hamburger menu
UX issues from feedback - 6c1466a
Added Font-Awesome - http://fontawesome.io - issue #12
Font Awesome by Dave Gandy - http://fontawesome.io
- Removed font-size increase for favourite icon (not needed now it is a font-icon) - issue #12
- Removed check for the explicit form field - issue #11
- Fixed the bug with adding, removing and adding favourites - issue #14
- Changed from HTML entity star to font-awesome star - issue #12
- Added Font-Awesome - http://fontawesome.io - issue #12
- Changed from HTML entity star to font-awesome star - issue #12
- Retitled the left panel from "Links" to "Menu" - issue #16
- Reduced number of times the word "search" occurs on the main search page - issue #10
- Removed the "show explicit results" form field - issue #11
- Added result count to results page - issue #13
Final Windows tweaks and actual icons - 5bace68
- Added Windows and WP8 icons (not actually in the previous commit)
touch-action: pan-y
and-ms-touch-action: pan-y
to.page-content
to ensure proper scrolling in WP8
- Added
winstore-jscompat.js
script tag
- Added
winstore-jscompat.js
from https://github.com/MSOpenTech/winstore-jscompat
- Allows
js/init-styles.js
toappend
css tags to head. Basically it is a compatibility layer to allow innerHTML, etc.
Windows Icons - 2495055
- Added entries for Windows and WP8 icons
- Moved iOS and Android icons into a
res/icons
subfolder
Issues 6 and 2 (panel and windows support) 790bf7d
Issue 6 - Selected menu item highlight
- Changed panel links to a list
- iOS - panel background color changed to white
- iOS - panel overlay changed to a semi-transparent (why is iOS defaulting to transparent?)
- Material - removed the > from panel list item-links
Issue 2 - Where is windows support?
- Added
<preference name="windows-target-version" value="10.0" />
- Added
overflow: hidden;
to body and html to better support windows
Issue 8 - Update Framework7 dependency version - c0594a5
Updated Framework7 to latest (1.4.2)
Issue 9 - Sidebar router occasionally displays blank screen - d2321d1
- Added a check to the click event on the Search link in the sidebar
- Tests to see if the "index" (i.e.: the search page) has the class 'cached'.
- If it does, then it is safe to load the index with the router.
- If it doesn't, then the index is probably the current page, so it just closes the panel and does nothing else.
Bug fixes - 4119932
- Set 'reload: true' for search when navigated from the side panel. Otherwise it could be "swiped back" or navigated back with the hardware back button
- Added the splashscreen plugin
- this caused some changes to the config.xml, mostly rearranging attributes for some reason...
- Added a FadeSplashScreenDuration preference set to 300ms
- Upped the size of the favorites button's icon
Favorites and some refactoring for clarity and stability - 062273d
- Added styles for the add/remove favorites nav bar button
- Slightly modified the styles for panel links to have a bigger hit target
- Panel links for "Search" and "Favorites"
- Added
data-page="index"
to the index navbar to keep the title from getting confused - Add the add/remove favorites button to the navabr
- Added the Favorites list template
- Bug fix on durationFromMsHelper to allow hours (there is a Fantomas song that is 72 mins long after all)
- Added click event listeners for the panel links
- Search loads the index
- Favorites loads the Favorites template
- Better error reporting in the search ajax call
- Add addOrRemoveFavorite method to add/remove favorites
- Added a dummy fallback object if the Media plugin is unavailable
- This is optional, it's really only of use if you are testing in a browser and not using
phonegap serve
- This is optional, it's really only of use if you are testing in a browser and not using
- Added the logic to fetch the current favorites and set up an object to pass as context to the addOrRemoveFavorite method in the navbar's favorite button
- Add a click handler for the navbar's favorite button
- Clear the event handlers on page remove
Small refactor for clarity - a0a9e60
- Renamed the callback functions for the mediaPreview object to clearly show they are callbacks
- Moved the status callback so that it appears in along side the other
callbacks and in the order they are called in the
new Media()
declaration
Icons ans Splash Screens - 8b04a1d
- Added all icon entries for iOS and Android
- Added all splash entries for iOS and Android
- Added all icon image assets for iOS and Android
- Added all splash image assets for iOS and Android
- Added width and height styles to the pending-button preloader for iOS as it seems to default to smaller than the Material one
UI improvements, playback controls & the Media plugin - 4b1c2b1
- Removed extraneous <div class="content-block"> that was just being used for spacing on Material
- added .material .page .page-content .card:first-of-type to the margin top brigade so as to avoid extraneous div above
- CSS needed to handle the playback controls (play, pending and stop buttons) as well as the position of the playback progressbar
- Added the cordova-plugin-media plugin
- Modified the CSP tag to allow the app to run under
phonegap serve browser
- Added 'unsafe-inline' and ws://localhost:3000
- Added playback controls and progressbar to the details page
- Some refactoring to keep best practices in mind
- These include putting var declarations at the top of functions
- This adds the entirety of the preview playback functionality including
- success and error methods
- onPageInit, onPageBeforeRemove for the details page
- playback controls status
- playback status from the media object
- monitoring the getCurrentPosition output and updating the progressbar
Details screen and some refactoring for clarity - 464c2cb
Also some refactoring for best practice
- Added the track details screen template
- At this point, preview is being done with an <audio> tag, but will re-implement with the Media plugin to show custom UI and as an example of using a plugin
- Modified the <a> in the results list to link to the new details screen and pass the (stringified) context
- Renamed the durationFromMs function to durationFromMsHelper to keep a consistent naming convention for helpers
- Added the stringifyHelper to JSON stringify the context and replace " with " for injecting into the data-context html attribute
- Made sure all anonymous functions had names (makes debugging easier... I am not 100% against anonymous function, but in this app it seemed appropriate to be thourough)
- Changed the ternary that modifies formData.q (adding the filter if needed) to a straight if/else for clarity
- added some minor custom styles for the tracks card in the details view
Update Framework7 - 3a27d05
For some reason the versions of the js, image, and css files in the original template were out of sync
Tidy up the Search and Results screens - ab12d3d
- remove the > from the results list items in Material (not very android-y)
- Reinstate the CSP now that
phonegap serve
can replace it and therefore still live-reload, etc - Added the track duration to the results list using the durationFromMs helper
- Added album name as the media item's item-text
- Added a Template7 helper to convert the track duration from ms to a human readable "mm:ss"
- durationFromMs and pad2 to pad the minutes or seconds
Fix pushState error when developing in a browser - 5ff9c24
- Set initialised pushState to
!!Framework7.prototype.device.os
so only true on iOS and Android- Browsers seem to have a problem with pushState while run from file://
Show media list of results - 2853788
- Changed title from 'Media App' to 'Search'
- Added template for search 'results'
- Changed global template variable from android to material to allow defaulting to material
- Added config
precompileTemplates: true,
to initialisation - Added config
pushState: true,
to initialisation to support the android back button - Blur inputs on submit to dismiss the keyboard
- Display a preloader modal while waiting for the API to return the results
- Hide the preloader when the results return or error out
- Add an error alert if there is an error with the API call
Prepare for page navigation - a1a1fb5
- Added config to app initialisation to improve UX:
- animateNavBackIcon: true
- swipePanel: 'left',
- swipePanelActiveArea: '30',
- swipeBackPage: true,
- animateNavBackIcon: true,
- Added config to allow <script> based templates
- template7Pages: true,
Unhide checkbox media-items - 200c562
- Accidentally hid checkbox media-items in iOS instead of just radio ones.
Align form fields to Spotify API and call said API - c041c91
- Search field name set to 'q'
- Checkboxes changed to Radios
- The radios now set the filter in the search
- Only tracks are returned but the filter above chooses what is searched within tracks
- Added an 'All'
- Hidden 'limit' set to 25 for now (pagination? user choice?)
- Try using 'first-of-type' to only margin the first content block in Material
- Fix alignment of radio and checkbox titles in Material
- Use 'submit' event of the form to
- Check for missing fields
- Massage the form field data to work with the Spotify API
- Call the API itself and console log the results (to help determine what to do with the data)
Small CSS tweaks useful for all apps - b336f26
- Add
-webkit-touch-callout: none
to body to avoid the long-press magnifying glass - Add
-webkit-user-select: none
to body to keep text in the app from being selectable. If you need it for certain areas, better to enable it there.
Add search form and allow the developer app - 5a06c53
- Commented out CSP tag as it blocks the use of the mobile developer app refresh and live reload.
- I am commenting it out during development. Will be a good thing to note in the tutorials
- Changed the title to "Media App"
- Added search form
- Search text field
- Explicit toggle
- Checkboxes to include/exclude tracks, song, or artist from search
- Search submit buton
Note: the changes below were also made to default to using Material Design where we are not in iOS. This means that if another platform is added, it will at least get the more generic Material theme
- Changed
if
to test for iOS leaving theelse
to deliver Material for everything else - Added a class to the <body> tag to denote 'material' or 'ios' theme so that custom styles in
css/styles.css
could target one or the other.
- Again, flipped the default case from iOS to Material
- Added swipe-to-close on left side panel
- Added some margin-top to content-block and content-block-title under Material. Seems to be a bug possibly related to moving the navbar to support Material and iOS.
- Added a larger line-height to the label-checkbox item-title. It didn't look lined up enough (again, in Material)
A fix for Framework7 issue 837 - 6adae29
<script type="text/javascript" src="js/init-styles.js"></script>
added beforemy-app.js
- Uses code from framework7io/framework7#837 (comment) but in a standalone file
- Removed code for adding stylesheets to the head
- Removed the fragile
setTimeout
added to fix the navbar title issue
Themes (Material and iOS) as well as custom colours - 4ccf178
- <body class="theme-green"> // Change to a "green" theme to match Spotify a bit
- Remove CSS link tags in prep for dynamic theming below
- OCD 2-space indents
- All the JS code from Maintain both iOS and Material Themes in single app
- This has caused a bug with the title no longer being centered in iOS :/
- Issue raised: framework7io/framework7#837
- Temp fix:
setTimeout(function() { myApp.sizeNavbars('.view-main'); }, 10);
- Another minor bug, the
.content-block
sits UNDER the navbar in the Material theme - Temp fix:
.material .page .page-content > .content-block { margin-top: 78px; }
- Additionally add a class to <body> of either 'material' or 'ios'
- OCD 2-space indents
- OCD 2-space indents
First template tweaks - 3a695b8
- Removed about.html (we'll be using templates, not xhr'd html pages)
- Updated description
- Updated Author
- Added <preference name="StatusBarStyle" value="default" /> due to light theme choice
- Removed 'unsafe-eval' from CSP tag. If I need it, I will either work around it or reluctantly add it back in
- Changed <title> to "PhoneGap Media App"
- Changed the panel style from reveal to cover (perf)
- Moved navbar menu button from right to left (ux/stylistic choice)
- Removed link to about.html
- Removed bottom toolbar
- Removed code for handling the about page
- Added commented out code for about page in the myApp.onPageInit() style as a placeholder Thoughts on the 3 options? I noticed you ditched the myApp.onPageInit() version in your template?
- added a .gitignore to ignore platforms and plugins
- .statusbar-overlay { background: rgb(247, 247, 248); } // to match the navbar
Initial import - f23ada6
phonegap create phonegap-app-media --id "com.phonegap.appmedia" --name "PG Media" --template phonegap-template-framework7