Topics

Anahita Project

Anahita Project's Topics

Rastin Mehr

Rastin Mehr

January 11 2015

Migrating to JQuery before MobileFirst implementation

Before we can start working on the #MobileFirst design we need to rewrite all of our javascript code in #JQuery. Then we can decide whether to use #Bootstrap or #ZurbFoundation as the CSS framework and rebuild all the UIs. I have done the first commit to my personal repository:

https://github.com/rmdstudio/anahita

which contains some of the JQuery code that I have written. Feel free to fork this repository if you want to help out and then do pull requests. Pick a legacy file which is written in mootools and write an equivalent JQuery version which will go into this directory:

https://github.com/rmdstudio/anahita/tree/master/src/media/lib_anahita/js/anahita

and the name of the file needs to be included in this file:

https://github.com/rmdstudio/anahita/blob/master/src/media/lib_anahita/js/site.js

Remember that a lot of legacy JS files may have never been used to being with, so the best way is to start from the user interfaces and wherever a javascript behaviour is missing, it means that the JQuery widget or plugin for it needs to be written.

We don't have to go all the way with JQuery port. Some of the existing UI may be removed for the MobileFirst design so communicate with me in advance before proceeding to port any of the js code.

Thank you!

Nick Swinford
Nick Swinford
January 11 2015 Permalink
Looks good, @Rastin.

So are we basically making the new code as jQuery plugins?

How would you feel about replacing the current editor, TinyMCE, with something a bit more modern? I've been looking into a lot of js editors and the best I've found so far is CKEditor and Squire.

CKEditor has a lot of features, has been around for awhile and we should be able to modify to to be just like the current interface. It also supports multiple formats, so we could implment Markdown in the Pages app if we liked.  Squire though is very modern and has some very nice features, though it is a lot newer.
Rastin Mehr
Rastin Mehr
January 11 2015 Permalink
Yes JQuery code will be either plugins or widgets depending on whether they are stateless or stateful. For example the InfinitScroll is a widget becuase it is statefull.

We will replace the editors. Also I think the best indicator would be how well the new ones perform on a mobile device. For the default distribution of Anahita we would want the lightest and most minimalist list of feaures. Also this time I prefer Markdown over plain html.
Rastin Mehr
Rastin Mehr
January 11 2015 Permalink
Also try to follow the latest patterns and conventions that JQuery website has provided as much as possible. I've seen so many variations and bad coding styles around the web.
Rastin Mehr
Rastin Mehr
January 24 2015 Permalink
A lot of the mootools files are helpers and they are nolonger needed. If you want to help out start with a feature on the UI that isn't working and implement that. You do need to read the current code and understand what it does first really well. Then you can write a JQuery code that does the same job or better. So far all my JQuery code has been a lot shorter.
Rajkumar Mundel liked this
Rastin Mehr
Rastin Mehr
January 27 2015 Permalink
@NicholasJohn16 have you had any success checking out and installing the code? Did you have any questions or needed guidence on where to start? Feel free to start a topic.
Nick Swinford
Nick Swinford
February 07 2015 Permalink
@Rastin, sorry for the delay. Life's been busy for me lately. I've installed the fork and got everything working. I've been spending time reading jQuery UI documention in the mean time and gotten familiar with it. Plan to take a crack at it soon.

I looked over your todos, but I didn't see the registration modal listed. I was thinking of tackling that first, unless you have other plans for it.
Rastin Mehr liked this
Rastin Mehr
Rastin Mehr
February 07 2015 Permalink
That's good. I am working on the delete and comment actions. If you had any questions post here or start a new topic. I am going to add a bootstrap modal layout which can be used by JQuery plugins and widgets.
Rastin Mehr
Rastin Mehr
February 08 2015 Permalink
Nick, don't worry about the registration modal. Quite likely we are going to use a simple button link to the login page or just put the form on the homepage. There are other todos that you can pick from.
Rastin Mehr
Rastin Mehr
February 09 2015 Permalink
@NicholasJohn16 this would be a good start for you https://github.com/rmdstudio/anahita/blob/master/src/site/templates/base/html/menus/viewer.php it is the notification counter.

I'll do the popup
Nick Swinford
Nick Swinford
February 10 2015 Permalink
I've created a plugin and created a pull request.  Take a look at it and tell me if its okay. I need to test it, but I wasn't sure how to compile site.js. How do you do that?
Rastin Mehr liked this
Rastin Mehr
Rastin Mehr
February 10 2015 Permalink
Great work Nick thank you. I will test it later today.Just switch on the debug mode and all the javascript paths defined in the https://github.com/rmdstudio/anahita/blob/master/src/media/lib_anahita/js/site.js  are merged in the https://github.com/rmdstudio/anahita/blob/master/src/media/lib_anahita/js/production/site.uncompressed.js

Then we will run a Grunt script to compress the code. The same script may later be used for merging all the code as well.
Nick Swinford
Nick Swinford
February 10 2015 Permalink
I was able to get the script to compile, but for some reason, I'm getting this error in my console:

GET http://localhost/anahita-workspace/anahita-jquery/www%5Cmedia%5Clib_anahita%5Cjs%5Cproduction%5Csite.uncompressed.js [HTTP/1.1 404 Not Found 1ms]

The only thing I can think is that this is a Windows issue. I'd like to investigate further, but I can't find where in the code the site.uncompressed.js is added to the html. Could you point me to the right direction?
Nick Swinford liked this
Rastin Mehr
Rastin Mehr
February 10 2015 Permalink
Is this a windows filepath issue? This is where site.uncompressed.js is being included https://github.com/rmdstudio/anahita/blob/master/src/site/templates/base/html/tmpl/js.php
Nick Swinford
Nick Swinford
February 10 2015 Permalink
I think the problem was with DS. I changed line 4 to:

<?php $path = JURI::root(true).'/media/lib_anahita/js/production/'; ?>

And it fixed the issue. I don't think we need DS anymore as PHP now converts forward-slashes to the appropriate character. I know Joomla removed the constant a few releases ago.
Rastin Mehr liked this
Nick Swinford
Nick Swinford
February 10 2015 Permalink
Also, I can already tell you there's problems with the plugin cause I'm getting an error from it in the console. :P I'll fix it tonight.
Rastin Mehr liked this
Nick Swinford
Nick Swinford
February 11 2015 Permalink
I created another pull request to fix the issues with the plugin. Looks like its working now.
Rastin Mehr liked this
Rastin Mehr
Rastin Mehr
February 11 2015 Permalink
got it, thank you!
Nick Swinford
Nick Swinford
February 13 2015 Permalink
@Rastin, just created another pull request for a paginator widget. I based the functionality off and tested it with Topics. The only part I couldn't get working was the spinner. It looks like we were using a part of MooTools More for the previous implementation. I tried to get a basic CSS implementation going, but couldn't figure it out without making a bunch of changes so I saved that for you. :P Take a look and tell me what ya think. I'm happy to fix anything with it.

PS: That should be a widget right? Not a plugin?
Rastin Mehr liked this
Rastin Mehr
Rastin Mehr
February 13 2015 Permalink
Don't worry about spinner at this moment. Also I think the paginator can be a plugin, becuase it is stateless. I'll take a look at it tomorrow. 

Thank you so much for the help. I reworked your code for the notifications counter. just minor organizations. It works well.
Nick Swinford
Nick Swinford
February 13 2015 Permalink
Glad to hear it's working well!

I was thinking of taking the inline editing on next, but the only place I can think of to test it is in Photos, but photos can't be added currently. Is there another place to test it?  That should be a widget right?

Untill Photos is working, what else do you think would be good for me to take on next?

Powered by Anahita