dilatorily / packery-angular Goto Github PK

View Code? Open in Web Editor NEW

7.0 3.0 2.0 624 KB

AngularJS module for Packery

Home Page: http://dilatorily.github.io/packery-angular

License: MIT License

JavaScript 98.62% HTML 1.38%

packery angular

packery-angular's Introduction

packery-angular

Installation

Installation is easy since packery-angular has minimal dependencies.

Requirements

This module requires the following libraries to be already installed:

Install using NPM

$ npm install packery-angular

Install using bower

$ bower install packery-angular

Import the necessary files

Add the necessary scripts to your HTML page.

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <!-- Include the necessary libraries -->
        <script src="js/angular.min.js"></script>
        <script src="js/draggabilly.pkgd.min.js"></script>
        <script src="js/packery.pkgd.min.js"></script>

        <!-- Include the packery-angular script -->
        <script src="js/packery-angular.min.js"></script>
    </head>
</html>

Inject the module to your project

When all of the dependencies are installed, inject this module to the list of dependencies of your application.

angular.module('app', ['packery-angular']);

Usage

This module exposes a couple of directives to simplify the usage of the Packery instance.

HTML

<pa-packery pa-options="options">
    <pa-packery-item class="pa-item">Sample item 1</pa-packery-item>
    <pa-packery-item class="pa-item">Sample item 2</pa-packery-item>
    <pa-packery-item class="pa-item">Sample item 3</pa-packery-item>
</pa-packery>

JavaScript

$scope.options = {
    columnWidth: 1,
    dragSelector: '',
    isAppended: true,
    isDraggable: true,
    itemSelector: '.pa-item',
    rowHeight: 1,
    stamp: '.pa-stamp'
};

Changelog

Please check the CHANGELOG.md for the list of changes.

Contributing

I am open for modifications on this project. Please check the CONTRIBUTING.md for the contribution guidelines.

License

This repository is open source and distributed under the MIT License.

Packery is a product of Metafizzy LLC and is distributed under a separate license. Please refer to their website for information on Packery's license.

packery-angular's People

Contributors

Stargazers

Watchers

Forkers

guialmeida fabianvelizok

packery-angular's Issues

stamp and unstamp

Hello,

On stamping an item (div) with pa-stamp class the draggable feature is still working. do you have any idea on this? i am trying to use the packeryInstance.stamp() method.

Resizing of a packery-item

Hi,

Can you please let me know, whether this directive supports the following functionalities.

Resizing of an packery-item
Removing of the item, and can we have a example for this.

Thanks in advance.

Can we have control on each of the pa-packery-item

Hi,

I would like to know, is there any settings or property exposed by this library, whether to have granular control for each of the pa-packery-item.

Let's say that I have 10 blocks (Widgets) pa-packery-items, out of them, I want to pin few widgets, and few should be drag gable, like how we see pinned post in facebook. I tried with isDraggable option, but the settings are applied for all the items in the packery instance.

Please let me know, is this can be achievable with this directive or suggest some alternatives.

Thanks in advance.

REMOVE should have a 'D' appended to it

In packery-angular.js, Line 249:
REMOVE: 'removeComplete' should be:
REMOVED: 'removeComplete'

to match line 510

and line 251:
REMOVE: '$paRemoveComplete' should be:
REMOVED: '$paRemoveComplete'

to match line 526

Generic Question

We are trying to implement this angular directive in to our project, but I am facing few issues with the draggabilly and packery included files.

We are using require.js to load the files in AMD manner. We are facing the issues with the these 2 objects [Draggabilly, Packery] coming as null in the below function in packer-angular.js file.

(function (angular, Draggabilly, Packery) {
    'use strict';

..........
...........
...........
}

When we tried to debug the Draggabilly and Packery un minified files, we found that both the modules are written their code to work with AMD, CommonJS & ES Harmony patterns as shown below. The below code is extracted from the draggabilly and packery unminified files.

/* globals define: false, module: false, require: false */
if ( typeof define == 'function' && define.amd ) {
  // AMD
  define( 'jquery-bridget/jquery-bridget',[ 'jquery' ], function( jQuery ) {
    factory( window, jQuery );
  });
} else if ( typeof module == 'object' && module.exports ) {
  // CommonJS
  module.exports = factory(
    window,
    require('jquery')
  );
} else {
  // browser global
  window.jQueryBridget = factory(
    window,
    window.jQuery
  );
}

I would like to know that whether packer-angular.js file is written to handle these kind of scenario's like loading the modules using AMD manner.

I think that packer-angular.js is trying to execute the code before the [Draggabilly, Packery] files are getting loaded.

Please correct me if I am not correct here and could you please let us know whether packer-angular is going to modify to handle these kind of scenarios.

Thanks in advance for your help

Example

Hello,

If I integrate your code, it does not work, all cards are supperposed.
Do I need to add CSS classes, and what they are the properties of classes ?

Ctrl :

$scope.options = {
        columnWidth: 1, // 300 = same
        dragSelector: '',
        isAppended: true,
        isDraggable: true,
        itemSelector: '.pa-item',
        rowHeight: 1,
        stamp: '.pa-stamp'
    };
$scope.posts = [...]; // data request

View :

<pa-packery pa-options="paoptions">
    <pa-packery-item ng-repeat="data in posts">
        <div>content with img, text, ect..</div>
    </pa-packery-item>
</pa-packery>

Thank you

On Window Resize

On window resize is there a way to publish an event from angular-packery directive? In plain jquery implementation on window resize the guttersize are maintained and the cards are responsive, the item style left position is calculated dynamically and assigned. ".js-packery" class helps to do this (.js-packery is formed in runtime by packery.min.js)

Please share your suggestions and ideas.

Unable to add items with $timeout(initializePackery);

I found that I had to change line 310 from:
$timeout(initializePackery);

to:
initializePackery();

or else when the link function for the PackeryItemDirective runs, this check fails:

  if (controller.packery) {
                controller.add(element[0]);
            }

and controller.add() is never called. Thanks for any help