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

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

CommentFileSizeAuthor
#7 packery_settings.jpg41.62 KBbalagan
#7 packery.jpg18.69 KBbalagan
#5 packery.png40.93 KBTomefa
#5 homebox.png37.46 KBTomefa
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Tomefa’s picture

Issue summary: View changes
Tomefa’s picture

Issue summary: View changes
PA robot’s picture

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

balagan’s picture

I 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?

Tomefa’s picture

FileSize
37.46 KB
40.93 KB

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

balagan’s picture

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

balagan’s picture

FileSize
18.69 KB
41.62 KB

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

Tomefa’s picture

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

Tomefa’s picture

Ohh and something i forget is Packery needs Jquery >= 1.10
Add jquery_update module and select 1.10 as the default jquery version.

balagan’s picture

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

Tomefa’s picture

That'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) ?

Tomefa’s picture

Issue summary: View changes
balagan’s picture

Well, jquery update was not installed, I thought that is only needed for D6 for Homebox. I will try again tonight.

balagan’s picture

Well, 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.

Tomefa’s picture

Ok i will create a demo website tonight and make it available online so you will be able to try directly on my fresh install.

balagan’s picture

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

Tomefa’s picture

Thanks 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 :)

naveenvalecha’s picture

Assigned: Unassigned » naveenvalecha

Assigning to myself for next review that might be in tonight.

naveenvalecha’s picture

Assigned: naveenvalecha » Unassigned
Issue summary: View changes

Firstly, 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)

Individual user account
Yes: Follows the guidelines for individual user accounts.
No duplication
Yes: Does not cause module duplication and/or fragmentation.
Master Branch
Yes: Follows the guidelines for master branch.
Licensing
Yes: Follows the licensing requirements.The library has GPL v3 License
3rd party assets/code
Yes: Follows the guidelines for 3rd party assets/code.
README.txt/README.md
Yes: Follows the guidelines for in-project documentation and/or the README Template.
Code long/complex enough for review
Yes: Follows the guidelines for project length and complexity.
Secure code
Yes: Meets the security requirements
Coding style & Drupal API usage
  1. template_preprocess_homebox_packery : You are adding js/css files using drupal_add_js/drupal_add_css rather use #attached to add the JS/CSS file.
  2. You should also implement hook_requirements as well about the status of the library installation.See
  3. Readme.txt is nice. Regarding the sponsored by section, you can also add that organization in the 'supporting organization' section in module edit page https://www.drupal.org/node/2330865/edit#field-supporting-organizations-... and also specify how they helped you.
  4. As the functions in the file homebox_packery.admin.inc are hook implementations.So I would suggest either move it to .module file or rename the file name from homebox_packery.admin.inc to some more generic name because the file not contains the admin function.
  5. homebox_packery_form_homebox_configure_form_alter : Wrong doc block.Its hook_form_fomid_alter
  6. It would be nice if you will add the hook_help in the module.It will be nice if you will also specify on the project page which dependent module version have you tested the module.
  7. homebox_packery.admin.inc : homebox_packery_settings_form_submit Instead of typcasting the values here into integer you should validate the values using the element_validate in homebox_packery_form_homebox_configure_form_alter. That will also remove the typecasting from this function homebox_packery_load_settings as well.
  8. homebox_packery.admin.inc : homebox_packery_settings_form_submit Instead of typcasting the values here into integer you should validate the values using the element_validate in homebox_packery_form_homebox_configure_form_alter
  9. template_preprocess_homebox_packery : It looks that this function is passing the user provided inputs directly without sanitization.So sanitize the appropriate values.Simlarly this function template_preprocess_homebox_block_packery
  10. template_preprocess_homebox_block_packery : drupal_substr is preffered over substr.

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

wwedding’s picture

Status: Needs review » Closed (won't fix)

Looks like this stopped being a sandbox project at some point and got approved or a co-maintainer with git vetting was added.