liferay / senna.js Goto Github PK

:seedling: A blazing-fast Single Page Application engine

License: Other

CSS 0.28% JavaScript 99.72%

senna.js's Introduction

⚠️ In the future, the senna npm package will be deprecated and this repo archived (ie. switched to read-only mode). Development continues in the liferay/liferay-portal repo (more specifically, inside the frontend-js-spa-web module), but not as an independent project, in order to better integrate with and serve the needs of Liferay DXP. At the time of writing, the last official release was v2.7.9, from the 2.x series on the master branch, and it is still used by a number of pre-EOL versions of Liferay DXP, such as 7.0.x, 7.1.x, 7.2.x, and 7.3.x. Any maintenance releases required to the v2.x series of the npm package in the future will be made from the liferay-frontend-projects monorepo.

Senna.js

Senna.js is a blazing-fast single page application engine that provides several low-level APIs that allows you to build modern web-based applications with only ~15 KB of JavaScript without any dependency.

Support and Project status

Senna.js is widely used and well maintained internally at Liferay but does not currently have staffing to support the open source release. As such this project is mostly internal and support is minimal. For certain issues, like build integration we are in an especially bad position to offer support.

To get assistance you can use any of the following forums

Look through the documentation.
File an issue on GitHub

We will try our best, but keep in mind that given our support staffing, we may not be able to help.

Install

Install via npm, Bower, CDN or download as a zip:

npm install senna

Examples

Email Example: Enable Single Page Apps using only HTML5 data-attributes;
Gallery Example: Carousel app with history support and cacheable screens;
Blog Example: Infinite scrolling pages done right with history support;

Setup

Install NodeJS >= v0.12.0, if you don't have it yet.
Install global dependencies:

[sudo] npm install -g gulp

Install local dependencies:

npm install
bower install

Build the code:

gulp

gulp server

Test the code:

gulp test

gulp test:coverage

Contributing

Please, see our detailed CONTRIBUTING guide for all the information you need to contribute to the project!

History

For detailed changelog, check Releases.

Credits

Inspired by Daniel Pupius' Surface project
Demo layouts by Pure CSS
Icon made by Freepik

Team

Senna.js was made with love by these people and a bunch of awesome contributors.

Author	Maintainer

Eduardo Lundgren	Bruno Basto

Browser Support

License

BSD License © Liferay, Inc.

senna.js's People

Stargazers

Watchers

Forkers

henvic paulohp mateusortiz guisouza castroalves simonebrunozzi-zz awlka fabiancarlos tadeuzagallo hugcoday seco qiuzao topogigiovanni andrevvalle rodrigoferrazazevedo alihalabyah letunglam edyonil lipemorais rotty3000 studiomezklador jimmysinner biracunha pmarquees dhenson02 tabblack viva-developer ubiratanbraga ui-frontend gabicavalcante marciorosa arizawan xlucifer dheyfesson rmdias bredor egoregor chsergey mairatma megafone amazingz red-studio rodolfosilva thotty eimrine cedricsoret marcelaraujo baerchen110 strogo yooynas saggiyogesh sammso rayantony sqlapk gitter-badger danilovaz rrrene robinnagpal jeeluo dualiby travisrcory bryceosterhaus pborreli docworld fredericksilva brianwulbern aryanugroho leonardovelozo harish516 charles-benedito marleyiam brunobasto mcanthony tnktecnologia lucasconstantino nunodotferreira a973c looper25 jpthedev drooids kroofy operin loki315zx naszvadig aboutwout rodnandes jinwanli2 callmeyan klaudit ellieadam anukat2015 zhoupan yanglangfei pongleung yuanshuai1123 antoniopol06 beingsane cleydyr yyhhk6 zhmch

senna.js's Issues

Cacheable screens are not caching the correct content

Improve Blog responsive sidebar usability

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

Adds senna css utility

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

Adds travis integration

Adds App utility class

Senna's behavior for plain JS and Data Attributes

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?

Adds Cacheable utility

Adds point of interests on examples

Senna should not handle states that are not ours

Make the "table of contents" fixed

It's important to guide your user through the content topics

Adds HTMLScreen utility class

Adds transport layer

Transition & nProgress

Hello everyone,

I would like to know how does the framework support page transitions and a loading indicator as nProgress ?

Thanks

Register names

sennajs.com
github
npm
bower

Global pragma strict

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.

Adds browser stack or sauce labs integration

Question regarding data-attribute initialization

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 data-attribute initialization method, what is the best way to get access to the senna instance that is created? For example in the email demo, how would one use setTransitionFn( ) for each data-senna-surface ?

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?

Similar question, what would be the proper format for using navigate(path) when using the data-initialize 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!

Make Senna.js work for form elements

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?

Adds EventEmitter utility

Use feature detection to disable senna when used in a unsupported browser environment

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)

Who uses Senna?

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.

Adds core utilities

Dom manipulation
Basic selector matcher

Console thowing error when "gulp watch"

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>

This is not an Issue but a question

It is simply to know why it is not compatible with IE9 :)

Scroll position on the email demo

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).

Fixes scroll history handling when back or forward pages doesn't have enough height to scroll to the history position

Create a page "thanks for downloading"

Use this approach to invite users to share the love about SennaJS on Twitter with a predefined tweet.

Open Source + Love = Engagement :)

Would be able to use sennajs with angularjs?

When i navigate to a second page i wish to execute a controller, is this possible?

Improve gallery demo usability

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

@bernarddeluna

Adds Surface utility class

Adds inherits utility

Adds ability to handle xhr error status

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?

Adds Route utility

Adds data attribute handler to initialize senna.App

Allows surfaces to be created before domready

Cache invalidation

Yesterday @marcellustavares told me about a issue which I describe bellow with an example.

Given the mapping /posts/<post-id>,

navigate to /posts/100
navigate to /posts/batch-editing and edit the blog title for the post with id = 100 to something else
navigate to any other place without a full page refresh
navigate again to /posts/100

You're going to see the old version of /posts/100.

Some options to solve this:

Create a cache invalidation method that once called should invalidate all the routes that match the given pattern.
Create an option to always verify the content freshness with ETag headers. With this option, if the content wasn't updated the request would basically be like a HEAD request, otherwise the content would be sent to the client for updating. We've have to decide if it's more appropriate to show content and replacing it later in case of invalidation or block the UI while the verification is being made.

Non-HTML5 support

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.

Adds parse content utility

Add test case for firefox right mouse button triggering bug

Related to: #58

Adds promise layer

Triggering ajax request at first load

I was playing with the blog example, and it is firing an ajax request at the first page load, is it actually needed?

No loading on scroll occurs if screen is bigger than content

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

Semantic way for loading styles

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?