liferay / senna.js Goto Github PK
View Code? Open in Web Editor NEW:seedling: A blazing-fast Single Page Application engine
Home Page: http://sennajs.com
License: Other
:seedling: A blazing-fast Single Page Application engine
Home Page: http://sennajs.com
License: Other
Related to: #58
Senna should use a feature detection system to disable itself for unsupported browsers, that could be a useful feature in the meantime because it would allow the app to work without the need to worry about how older browsers are behaving when using the framework.
x-ref: #34 (comment)
The docs mention <body data-senna>
requirement in the "Data attributes" section, making it implicit the data-senna
markup is optional and only used for the "Data attributes" feature.
According to here and here, <body data-senna>
is mandatory. I am pretty confused regarding the behavior here. The docs states senna should work with the code below:
var app = new senna.App();
app.setBasePath('/examples/mysite/pages/');
app.addSurfaces('content');
app.addRoutes([
new senna.Route('page1.html', senna.HtmlScreen),
new senna.Route('page2.html', senna.HtmlScreen)
]);
But it doesn't work :S.
Here senna initializes by instantiating senna.DataAttributeHandler
constructor, which calls this, which then fails upon data-senna-surface
attribute lookup here.
I am having serious trouble into making sense of senna's basic implementation without using "Data Attributes".
Below a snippet to express what I am trying to achieve:
main.html
<!doctype html>
<html>
<head>
<title>Main Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../build/senna-debug.js"></script>
<script>
var app = new senna.App();
app.addSurfaces('content');
app.addRoutes([
new senna.Route('page1.html', senna.HtmlScreen)
]);
</script>
</head>
<body>
<div id="content">
<div id="content-default">
<a href="page1.html">go to Page1.html</a>
<p>
(This is Main Page)
</p>
</div>
</div>
</body>
</html>
page1.html
<div id="content">
<div id="content-default">
<a href="main.html">go to main.html</a>
<p>
(This is Page1)
</p>
</div>
</div>
Result
Senna is not initialized and console shows:
$ Senna not initialized from data attribute, try passing <body data-senna>.
Am I missing something?
I really appreciate this framework and I'd like to use it. But there's a problem, i have to support non-HTML5 browsers (like IE 8) and the route basically works with window.history.state
I'm sure there're another people just like me. Maybe could be an extension or a plugin to support hashbang (into non-HTML5 browsers) instead of history.state
. Of course, it's just a suggestion and if anyone has another concept to do that, please let me know.
Cross-reference: Adding prefetch (preemptive caching) issue #66.
We need a non-programmatically way to allow Senna users to add prefetching to their resources.
The spec does not allow <style>
tags inside other element than the <head>
element.
The following elements can be used inside a <head>
: <title>
, <base>
, <link>
, <style>
, <meta>
, <script>
, <noscript>
, <command>
.
I can't declare style
tags as a surface using data attributes and still keeping my document spec compliant, because I can't add id="style"
and id="style-default"
elements into the document's head
.
What is the recommended practice for loading styles using senna?
I noticed Senna works just for links.
Is there a reason why other forms of page reloading, such as forms, are not being handled by the framework? Or it was just not implemented yet?
I can not make this to work... I get error on my terminal every time I try
I tried to google what could be the reason, but I just could not find... But it is related to CSS, because when I commented out the gulp task for CSS, it started to watch, but of course, looks ugly, because the CSS was not compiled... I`ll keep trying to find a solution for this, but in the mean time, if someone could give a hint, I would appreciate...
GRIDMAC:senna griiettner$ gulp watch
[gulp] Using gulpfile /Users/griiettner/Projects/senna/gulpfile.js
[gulp] Starting 'clean'...
[gulp] Starting 'serve'...
[10:01:56] Webserver started at http://localhost:8000
[gulp] Finished 'clean' after 326 ms
[gulp] Starting 'build'...
[gulp] Starting 'build-raw'...
[gulp] Finished 'build' after 428 ms
[gulp] Finished 'serve' after 669 ms
[gulp] Starting 'watch'...
[gulp] Finished 'watch' after 16 ms
stream.js:94
throw er; // Unhandled stream error in pipe.
^
TypeError: Cannot read property 'name' of undefined
at eval (eval at template (/Users/griiettner/Projects/senna/node_modules/gulp-header/node_modules/gulp-util/n
ode_modules/lodash.template/index.js:201:18), <anonymous>:11:21)
at wrapped (/Users/griiettner/Projects/senna/node_modules/gulp-header/node_modules/gulp-util/lib/template.js:
15:12)
at Object.module.exports [as template] (/Users/griiettner/Projects/senna/node_modules/gulp-header/node_module
s/gulp-util/lib/template.js:18:18)
at /Users/griiettner/Projects/senna/node_modules/gulp-header/index.js:12:24
at wrappedMapper (/Users/griiettner/Projects/senna/node_modules/gulp-header/node_modules/event-stream/node_mo
dules/map-stream/index.js:84:19)
at Stream.stream.write (/Users/griiettner/Projects/senna/node_modules/gulp-header/node_modules/event-stream/n
ode_modules/map-stream/index.js:96:21)
at Stream.ondata (stream.js:51:26)
at Stream.EventEmitter.emit (events.js:95:17)
at Stream.endStream (/Users/griiettner/Projects/senna/node_modules/gulp-concat/index.js:42:12)
at _end (/Users/griiettner/Projects/senna/node_modules/gulp-concat/node_modules/through/index.js:65:9)
PS /Users/griiettner/Projects/senna>
The css utility for senna is intended to be an optional lightweight css file that provides loading bar for the spa request and some default transitions for the surfaces, e.g. fade, flip.
Loading bar reference:
http://ricostacruz.com/nprogress/
Transitions references:
http://daneden.github.io/animate.css/
http://css3.bradshawenterprises.com/flip/
http://www.polymer-project.org/components/core-animated-pages/demos/music.html
Try to browse the email example on a mobile device.
The page is responsive, so you almost certainly are seeing the menu on the top and the content just below it, instead of side-by-side.
Do you guys think it's a good idea to add some logic to the demo to show how to handle such situations or would it be overkill?
Maybe even go so far as adding a boolean parameter for toggling the scroll on navigation (though I'm not satisfied with that, maybe a navigate listener solves this in a more appropriate way).
Hello everyone,
I would like to know how does the framework support page transitions and a loading indicator as nProgress ?
Thanks
It's important to guide your user through the content topics
On the blog example (http://sennajs.com/examples/blog/), nothing happened until I reduced my browser size; then, on scroll, it loaded the next pages
There should be a check for screen size, and if content is smaller than it, it should automatically load the next page until the fold is reached.
Alternatively, add a "load more" button on the bottom that is then replaced with automatic loading when reached, but can still be clicked if scrolling is not possible.
This was both chromium 34 and firefox 30 on Ubuntu
Dom manipulation
Basic selector matcher
Yesterday @marcellustavares told me about a issue which I describe bellow with an example.
Given the mapping /posts/<post-id>
,
id = 100
to something elseYou're going to see the old version of /posts/100.
Some options to solve this:
when you open any image, is really hard to figure out that you have to click on the image to close overlay and go back to gallery.
My suggestion is easy. Put some close icon and make overlay clickable instead click on the image
Use this approach to invite users to share the love about SennaJS on Twitter with a predefined tweet.
Open Source + Love = Engagement :)
Hi there,
Loving Senna, have been playing quite a bit with it since its release. Been looking for a framework like this for a while, great work!
2 quick questions:
When using the non-data method, method, this works well
var app = new senna.App()
app.addSurfaces('content');
contentSurface = app.surfaces.content;
contentSurface.setTransitionFn(function(from, to) {
...
}
How can that be done using the data-attribute method?
These may be simple questions, but new to this just like most and can't for the life of me find out how to get access to the properties of senna.App when initialized with the data- method.
Thanks in advance for your help!
when you are using mobile screen, you need a easy-access to nav and header, in another words, it will be nice to put a hamburger icon and slide the sidebar above your content:
something like this: https://dribbble.com/shots/1325069-IOS-7-Sidebar-Menu?list=searches&offset=22
Let us know if your project/company uses Senna and wouldn't mind being mentioned on the website. Include a logo with a link to the project if you have one.
I was playing with the blog example, and it is firing an ajax request at the first page load, is it actually needed?
It is simply to know why it is not compatible with IE9 :)
When i navigate to a second page i wish to execute a controller, is this possible?
Hello!
I attended a lecture by Eduardo in BrazilJS and I was super excited about Sennajs. However, when I test some doubts arose.
To handle navigation errors I override handleNavigateError_ method in this way (do not know if it's the most correct way, I would also guess on this one):
var ERROR_404 = 'not found',
ERROR_500 = 'internal server error';
app.handleNavigateError_ = function(path, nextScreen, err) {
var status = err.xhr.statusText.toLowerCase();
if (status === ERROR_404) {
this.navigate(app.getBasePath() + '/404');
} else if (status === ERROR_500) {
this.navigate(app.getBasePath() + '/500');
} else {
this.navigate(app.getBasePath() + '/error');
}
senna.App.prototype.handleNavigateError_.call(this, path, nextScreen, err);
};
The problem is that the err variable xhr has no status set, so I have to get the statusText (which exists only when using Firefox).
What would be the correct way to handle errors by code?
Use senna instead senajs.com
I was looking at the source code of the project (btw it is a really cool project!) and I've noticed that you guys declare the pragma strict for each module of the library without specifying a context. Even in the minified version.
Not sure if this is expected since without a context it will "leak" to the global scope, and using the pragma globally means that any code within the same file will also run in strict mode. That means if I include senna on a bundled version of my application, it will assume everything should be in strict mode and this can potentially cause weird behaviors.
Tried an example http://sennajs.com/examples/email/ in ipad.Page keep refreshing non stop.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.