The Homebox Packery module is base on the homebox module that allows site administrators to create dashboards for their users, using blocks as widgets.
But i wanted to use a different JavaScript layout library to create
a more flexible layout, like Packery Layout Library.
Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around. With this flexibility, the user experience if for me more interactive and fun !
This module add some settings options to the homebox settings page to active Packery and set all the available options of Packery.
Requirements
- Homebox (version 7.x-2.0-betaX)
- Libraries
- Jquery update (1.10)
Installations
- Download the Packery layout library from http://packery.metafizzy.co/
- And place it in the library directory at sites/all/libraries/packery
My Background
Worked with Drupal for more than 5 years as Lead Developer.
Sandbox Link
https://www.drupal.org/sandbox/tomefa/2330865
Git Clone Command
git clone --branch 7.x-1.x http://git.drupal.org/sandbox/Tomefa/2330865.git homebox_packery
cd homebox_packery
Pareview Report
http://pareview.sh/pareview/httpgitdrupalorgsandboxtomefa2330865git
Comment | File | Size | Author |
---|---|---|---|
#7 | packery_settings.jpg | 41.62 KB | balagan |
#7 | packery.jpg | 18.69 KB | balagan |
#5 | packery.png | 40.93 KB | Tomefa |
#5 | homebox.png | 37.46 KB | Tomefa |
Comments
Comment #1
Tomefa CreditAttribution: Tomefa commentedComment #2
Tomefa CreditAttribution: Tomefa commentedComment #3
PA robot CreditAttribution: PA robot commentedWe are currently quite busy with all the project applications and we prefer projects with a review bonus. Please help reviewing and put yourself on the high priority list, then we will take a look at your project right away :-)
Also, you should get your friends, colleagues or other community members involved to review this application. Let them go through the review checklist and post a comment that sets this issue to "needs work" (they found some problems with the project) or "reviewed & tested by the community" (they found no major flaws).
I'm a robot and this is an automated message from Project Applications Scraper.
Comment #4
balagan CreditAttribution: balagan commentedI am trying to use the module, but I am stuck.
I cannot really see much difference when I use the packery library. Only the gutter becomes 0, and my packery settings do not take effect. I see that packery.pkgd.min.js is included on the page, and I also see the settings in the Drupal.settings. I am not familiar with the Homebox module either. Maybe I forgot something?
Comment #5
Tomefa CreditAttribution: Tomefa commentedHi Balagan,
after you install the module and have the packery library in the folder sites/all/libraries/packery/
When you are going in your Homebox settings page : admin/structure/homebox/settings/my_page
You can enable the use of packery. Do you have check the checkbox input ?
If you turn it off, you will see that your block or all in one column in your page (standard homebox) (cf : screenshot homebox.png). And you can only move the block up and down.
With packery on, you have the block layout (cf : screenshot packery.png). And you can move your block wherever you want, and see the layout moving.
What change have you made on the packery settings so i can try it also.
Comment #6
balagan CreditAttribution: balagan commentedThanks for tips, the library was in the sites/all/libraries/ directory, now I will try again. There was only one column, even if I checked or unchecked the enable packery library checkbox, and it was not possible to move them horizontally.
I will give it another try now, thanks for your help.
Well, your instructions were clear before too, I have just neglected them.
Comment #7
balagan CreditAttribution: balagan commentedI see the script is loaded on the page. I see the collapse and close buttons change, otherwise no change in behavior. If I change the column width in the Packery settings or the Horizontal layout, I see no changes, and I can only reorder items vertically. I have enclosed 2 screenshots.
Comment #8
Tomefa CreditAttribution: Tomefa commentedThanks for the screenshot.
Try with the settings isHorizontal = False
and Is init layout = True
That will load the packery when you launch the page.
With which browser are you testing ?
May be there is a javascript error that i don't have with firefox or chrome.
Comment #9
Tomefa CreditAttribution: Tomefa commentedOhh and something i forget is Packery needs Jquery >= 1.10
Add jquery_update module and select 1.10 as the default jquery version.
Comment #10
balagan CreditAttribution: balagan commentedI am using Chrome on Windows. In the JavaScript console there is a warning when moving the elements: 'Attr.nodeValue' is deprecated. Please use 'value' instead.
I have made the changes you suggested, but still not able to move the elements side by side.
Comment #11
Tomefa CreditAttribution: Tomefa commentedThat's strange Balagan, i just make right now a fresh installation of a drupal 7.31
and just add this modules :
- Homebox
- Libraries
- Jquery update
- Homebox packery (from my sandbox)
And by just checking the Add Packery Library, it's working as design.
May be try with a fresh install too or did you add also the module libraries (https://www.drupal.org/project/libraries) ?
Comment #12
Tomefa CreditAttribution: Tomefa commentedComment #13
balagan CreditAttribution: balagan commentedWell, jquery update was not installed, I thought that is only needed for D6 for Homebox. I will try again tonight.
Comment #14
balagan CreditAttribution: balagan commentedWell, I still had time to try it, made a fresh install, installed libraries, homebox, your module, jquery_update, copied packery library, but it is still one column layout. I can reorder the items, but only in 1 column. The previous JS warning is gone on both sites, I guess jquery_update fixed that.
Comment #15
Tomefa CreditAttribution: Tomefa commentedOk i will create a demo website tonight and make it available online so you will be able to try directly on my fresh install.
Comment #16
balagan CreditAttribution: balagan commentedSome notes: When you enable the packery library, you set the number of columns to 1, and the width of the first column to 100% but you do not set the other columns to zero. I ran into this problem, and the homebox module displayed some warnings, and did not save the settings until I did not set these columns to zero. I think it would be more user friendly if you would set the other column widths to zero with a for loop.
Comment #17
Tomefa CreditAttribution: Tomefa commentedThanks for the note, it's a good idea, i will do that tomorrow :) (it's done!)
Here is the demo website : http://homebox-demo.yogarik.com/ (new demo website)
Drupal 7.31
+ homebox
+ jquery update
+ libraries
+ homebox packery
And of course the packery layout library in sites/all/libraries/packery/packery.pkgd.min.js
You can use the account demo/demo to change the homebox settings.
But first try the homepage with your machine to see if it's working :)
Comment #18
naveenvalechaAssigning to myself for next review that might be in tonight.
Comment #19
naveenvalechaFirstly, Thanks for your Contribution! Awesome Module :) Sorry for coming late, was too tired yesterday.
Automated Review
Best practice issues identified by pareview.sh / drupalcs / coder. See http://pareview.sh/pareview/httpgitdrupalorgsandboxtomefa2330865git
homebox_packery.info:8:1: error - Files must end in a single new line character
Manual Review : Review of the 7.x-1.x branch (commit 7103eb5)
The starred items (*) are fairly big issues and warrant going back to Needs Work. Items marked with a plus sign (+) are important and should be addressed before a stable project release. The rest of the comments in the code walkthrough are recommendations.
If added, please don't remove the security tag, we keep that for statistics and to show examples of security problems.
This review uses the Project Application Review Template.
I have done manual review.I have not found any blocker into this one.
I would recommend you, please help to review other project applications to get a review bonus back. This will put you on the high priority list, then git administrators will take a look at your project right away :)
Comment #20
wwedding CreditAttribution: wwedding as a volunteer commentedLooks like this stopped being a sandbox project at some point and got approved or a co-maintainer with git vetting was added.