poetic / ember-cli-photoswipe Goto Github PK

When items are modified, the current implementation does not update the gallery. On first "post-update" click you'll still see the images from the previous initialisation.

Pull request following - added items observer that re-initialises the gallery

Clone dummy app, set msrc attributes for each item in the items array and run.
For the first clicked image I can see that the larger image is downloaded however it is not shown.
For the next clicked image the larger version is not even downloaded.
In both cases, the short image is shown when expanded.

ember-cli-photoswipe: 1.2.0
ember-cli: 2.14.0
node: 6.10.2
os: win32 x64

Default UI Options

Options for PhotoSwipeUI_Default (dist/ui/photoswipe-ui-default.js) are added the same way and to the same object as core options.

-Source

Specifically, I am interested in these

shareButtons: [
{id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
{id:'twitter', label:'Tweet', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
{id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'},
{id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
],

Edit

It looks like there was already some work towards this already?
#10

Currently, the whole div (career-path-headshot) causes the photoswipe to open. I would like it to only open if the img (red section of included image) is clicked. I want a custom action (test) to fire if the user clicks the text-ribbon-primary div (green section of included image).

Is the above possible? Or, can I programmatically interact with Photoswipe in my test action to prevent it from opening?

{{#photo-swipe items=model as |img|}}
  <div class='career-path-headshot col-xs-12 col-sm-6 col-md-6 m-b'>
    <img src='{{img.src}}' class='img-responsive' style='transform: none; margin: auto;' alt='{{img.title}}'/>

    <div class='text-ribbon-bottom text-ribbon-primary text-ribbon-opaque' {{action 'test'}}>
      <h2 class='text-uppercase'>{{img.title}}</h2>
    </div>
  </div>
{{/photo-swipe}}

When using the photoswipe component in this way, the actual index of the element is not being passed to the click() function, so it always ends up rendering the first element.

{{#photo-swipe}}
  <a href="http://placekitten.com/g/600/400" data-width="600" data-height="400">
    <img src="http://placekitten.com/g/300/200" alt="kitty!">
  </a>
{{/photo-swipe}}

Right now, ember g photoswipe needs to run every time the bower_components/photoswipe directory is removed or regenerated. This is because the addon creates a custom build of photoswipe without the history module, given that it breaks ember routing.

It would be nice if the generator does not need to be run every time this happens.

I am trying to set ember-cli.photoswipe locally and i come across to these issues

Cannot convert a Symbol value to a string
TypeError: Cannot convert a Symbol value to a string
Symbol.hasOwnProperty

Symbols don't coerce to strings on their own

after all these steps

• git clone https://github.com/DanyHunter/ember-cli-photoswipe.git

• ember install:addon ember-cli-photoswipe

• ember server

  My ember cli version is : "ember-cli": "0.1.7"

How can i sort it out?

I'm on ember 2.2.0 and installed the package:

ember install ember-cli-photoswipe

then restarted ember watch to reload deps and added:

{{#photo-swipe items=model.userimageobjects as |img|}}
        <img class="thumb" src={{img.src}} alt={{img.title}}>
{{/photo-swipe}}

which is showing the images so far.

when hovering them, I can click. but the click does not do anything and no errors show instantly. anyway a few seconds later console shows:

Framework Event Listeners API Errors:
    event listener's handler isn't a function or empty
    event listener's handler isn't a function or empty
    event listener's handler isn't a function or empty
    event listener's handler isn't a function or empty
    event listener's handler isn't a function or empty
    event listener's handler isn't a function or empty
...

I'd be very happy with any advice as I'm a Ember newbie and would love to use this great lib here...

THX!

This is in order to show/hide things such as the share button.

This was generated using 0.1.4, we should upgrade it to use 0.1.7

Readme should say

ember install:addon ember-cli-photoswipe

The package.json would need to be updated to have the defaultBlueprint specified as photoswipe so that this will automatically run the generator for you

Can't use the addon, [email protected]

When I click a thumbnail I get Uncaught TypeError: Cannot assign to read only property 'initialLayout' of false.

Offending code:

_registerModule('Controller', {
    ....
    _listen('initialLayout', function() {
                self.currItem.initialLayout = _options.getThumbBoundsFn && _options.getThumbBoundsFn(_currentItemIndex);
            });

My template:

{{#photo-swipe}}
      {{#each model.bar.photos as |image|}}
        <a class="photo-item" href="{{image.url}}" data-width="{{image.width}}" data-height="{{image.height}}">
          <img src="{{image.url}}" alt="" />
        </a>
      {{/each}}
{{/photo-swipe}}

Latest one is 0.2.0-beta.1

I created items on model on route and used the {{photoswipe}} as in this dummy app but nothing renders and no error is given

The test suite right now basically makes sure that the addon can be run with the generator and rendered. It should probably have more coverage for some of its features. Maybe we can do an acceptance test to make sure photoswipe is in fact working?

The Bower project no longer recommends using Bower for managing dependencies, instead recommending using NPM or Yarn.

It seems that there is an NPM package for PhotoSwipe, so it likely makes sense to switch to that so that the bower dependency can be removed.

https://www.npmjs.com/package/photoswipe

So I'm using the example code/data to try to get this working, and I keep getting these two errors. I'm using the button action approach that opens the gallery.

Using ember-cli-photoswipe without an items attribute is deprecated. and
Cannot read property 'init' of undefined (in regards to this.get('myGallery').init();)

this is what the code looks like

//handlebars
<button class="btn" {{action 'initGallery'}}>Open PhotoSwipe</button>
 {{photo-swipe gallery=myGallery options=psOpts items=items}}

//component
 psOpts: {  
   index: 1
 },
items: [
    {
      src: 'http://placekitten.com/g/600/400',
      w: 600,
      h: 400,
      title: 'whooa'
    },
    {
      src: 'http://placekitten.com/g/1200/900',
      w: 1200,
      h: 900
    }
  ]

actions: {
   initGallery() {
      this.get('myGallery').init();
    }
}

This is a deeper issue perhaps, but one that basically cripples this addon for use in Ember 2.0. This is based on the workarounds found in #26.

• Render a template containing the photo-swipe component with some photos nested inside
• Update the model that contains the photos
• Click on the photo-swipe component to open the gallery

Result: The old model's photos are displayed, not the new model's
This is because the photo-swipe component is not compatible with Glimmer and Ember 1.13+. Rather than relying on model bindings on the component, it depends on the didInsertElement hook to inspect its contents. This is a big no-no in Glimmer, as this hook is not guaranteed to fire when the contents have changed.

Additionally, these workarounds contradict the documented usage of the addon based on the README. In fact, the addon's own code marks the usage of the items argument as deprecated. I would strongly recommend restoring the items argument and yielding the individual items as a block.

Right now is set to 4.0.1
Some of the src files have changed for 4.0.5 and the blueprint needs updating.

Steps to reproduce:

1. Take sample photoswipe code.
2. Set src of some property for the gallery to empty string (anything that does not resolve to image will do).
3. Display the gallery in browser and click on the image to enlarge it.
4. Observe that there is error in console.

Sample data:

  moo: [
  {
    src: 'http://placekitten.com/g/600/400',
    w: 600,
    h: 400,
    title: 'whooa',
    msrc: '(optional) larger image'
  },
  {
    src: '',
    w: 600,
    h: 400,
    title: 'whooa',
    msrc: '(optional) larger image'
  }
]

With that data I get following error:

ember.debug.js:16591 Uncaught Error: Assertion Failed: You must use Ember.set() to set the `h` property (of [object Object]) to `0`.

and following stack trace.

I found the line in photoswipe source which causes this.

In general, I think ember-cli-photoswipe should pass only plain JSON objects to photoswipe library, because there might be also other cases in which photoswipe changes input data and thus makes EmberJS freak out.