Symphony.

I broke it again. I now get the following javascript error on the page:

Error: continue must be inside loop
Source File: http://symphonytest.designbyadmiral.com/extensions/subsectionmanager/assets/symphony.subsectionmanager.js
Line: 309, Column: 29
Source Code:
      if(value == undefined) continue; 

What I see on the page is the set of listings but no “create new” controls or similar and clicking on a listing does not open up the edit dialogue.

It also lists “There are no selected items” at the top of the list.

Latest version of Firefox on the Mac. I simply replaced the old files with your updated ones.

Could you please try if replacing continue with return solves the problem? Thanks!

That fixed it.

There are a couple of usability concerns I’m starting to pick up on. Firstly, there is no hover state on the caption for editing. A simple underline would fix this and it would be good to remind users that by clicking something will happen. The second, with dragging you would almost expect that clicking and dragging anywhere would work, clicking on the image isn’t overly intuitive. What about either a specific grab area on the left of each entry or simply making it so any time you drag an entry, no mater where you grip, it’ll sort it?

I always like those “grippy texture areas” to convey “drag here” instead of making the whole item draggeable. Thinking of it, Order Entries could make use of such a thing as well.

I share the usability concerns. The problem is that editing is triggered by a click event while reodering is triggered by mousedown and mouseup: if you click an item all three events are executed. So how to distinguish the actions?

Currently the left 50 pixels are uses as handle.

Any ideas or suggestions?

I like Phoque’s suggestion of a “grippy” area. Say there’s a 20px area on the left with no other purpose than if you grab it you can reorder. It’s a UI convention that people will be used to.

To give you an idea of what I’m talking about I’ve created a rough mockup (attached).

Attachments:

mockup.png

To give you an idea of what I’m talking about I’ve created a rough mockup (attached).

Exactly what I was thinking about, although you should aim for a slightly higher contrast there… :-)

I cant get this thing to work. It seems to be a good extenstion, but the installation and setup documentation is a bit blury (at least for me who is not a very experienced developer).

So, I’ve created a Gallery section with a title and upload-field. And in my Project section I’ve added a mediathek field with related section = Gallery and include elements = title and image.

But when I go to content -> project, only the “Gallery” title pop up and nothing else. There is no way to select or create new images. Thats not right is it?

Am I doing something stupidly wrong? Is it possible to improve the installation / setup doc?

Are you getting any javascript errors? Normally when Mediathek doesn’t fire it’s because of a javascript error.

What version of Mediathek and what version of Symphony are you running?

As Doug said above this sounds like a JavaScript bug unrelated to Mediathek. Do you know how to check your browser’s JavaScript console? Which OS and browser are you using?

Is it possible to improve the installation / setup doc?

The installation works exactly the same way as for all the other Symphony extensions:

• Download the source from GitHub and unzip it.
• Rename the folder to mediathek.
• Upload the mediathek folder to /extensions.
• Go to /symphony/system/extensions/ and enable the extension.
• Go to your sections settings and add a Mediathek field.

It seems like you’ve done all that. Concerning the configuration of the Mediathek everything should be documented on GitHub.

What version of Mediathek and what version of Symphony are you running?

That would be one of my next questions as well:

• Your Symphony version number.
• Your Mediathek version number.
• Any errors and warnings in your activity log.
• Any errors in your Java Script console.

I like Phoque’s suggestion of a “grippy” area.

While I acknowledge that it’s a widely used metaphor I think it complicates both the visual style and the usability in this context.

Do we agree that the most intuitive behaviour would be an item that is fully clickable and draggable? E. g.:

• If you click the item anywhere and don’t move the mouse for than a few pixels this would open the edit drawer.
• If you click the item anywhere and move the mouse more than a few pixels this would start the ordering process.
• If you click the item anywhere and move the mouse outside the list this would start drop functionallity.

For those keeping track of the Subsection Manager development process: Please have a look at the current code which now allows the entire item to be clicked or dragged.

Don’t forget to update the Stage submodule and please download the new draggable plugin as well: http://github.com/nilshoerrmann/draggable (it’s a submodule of the main repository)

Feedback is welcome.

Nils and Doug: Thank you for your response. I run Mediathek 2.0.5 and Symphony 2.0.7. No errors in the activity log. A whole lot of MIME Type warnings in the console, and this error from admin.js: TypeError: Result of expression ‘string’ [undefined] is not an object.

Nothing directly related to extension I believe.

@Jorngeorg: I’ve gotten that one every time I’ve installed 2.0.7 so far, the issue is with the translation mechanisms in Symphony.

The solution is to download and replace these two files.

@Nils: Found another weird little bug. In some instances instead of dragging or opening you can highlight the text.

This does not seem to be the case for entries who’s title extends to a second line. However, if they only sit on one line and even then not fully if you click anywhere that’s not on or very near the text instead of dragging it will allow you to highlight the text.

If you’d like I can e-mail you a set of login details for my Symphony test site and you can see for yourself, if you’re unable to recreate.

I’m getting it in Firefox and Chrome for the Mac.

Does this happen across different browsers?

I’m not if this behaviour can be prevented as highlighting text is a browser features. And furthermore: should we try to prevent highlighting. If so, this means the user can never ever copy text from the list.

Okay, I think I know when it’s possible to highlight text: If you start dragging within the right 42 pixels of an item. This area is specified by a padding to keep the caption in distance to the remove button.

doug: Brilliant! fixed it.

It happens in Firefox and Chrome on the Mac for certain.

I did some poking and I’m finding a javascript error with line 45 of symphony.draggable.js:

coordinate: event.pageY

The error in Firefox is:

Error: event is not defined
Source File: http://symphonytest.designbyadmiral.com/extensions/subsectionmanager/lib/draggable/symphony.draggable.js
Line: 45

In Chrome it works whenever I click on the SPAN but still seems a bit buggy… I’m going to re-download all the bits from GitHub to make sure I have the lastest of everything, though I think I do already.

@Jorngeorg: Twas Nils who fixed it for me, he deserves the thanks. :D

@Nils: Still getting the same error in Firefox, same issues in Chrome. Same behavior in Safari as in Chrome.