Topic Closed
feniweb
297 Posts

1. Es gibt Situationen, die nicht Sie mehr auf das Stiftsymbol Zoom bekommen und dan kann dieses Element nicht mehr bearbeiten.


2. Wenn ich einen Bereich in den Abschnitten Manager kopieren und versuchen zu arbeiten, ist immer Produziert die darüberliegende, die an die Redaktion sehr verwirrend ist.
Muss man zuerst schließen je nach Alle kopieren und nur dan Sie das Element bearbeiten können.


3. Die Sektionen-Manager fortgesetzt Bedinungshürden. Warum ist immer ein Element auf den Abschluss eingefügt können Sie nicht in den Bereich klicken und es direckt das gewünschte Element einzufügen.

(Auch hier kein Symbol für Bilder hier im Editor herunterladen. In Chrome 48)

 

Bitte, bitte, BITTE Josh, überarbeiten Standard-Bildschirm Desktop-Elemente und Text-Bild-Element oder durch ResponsivImage ersetzen.


Siehe Proble hier: http://www.gpeasy.com/Forum?show=t2071

Edited: 3 years ago#8827

Josh S.
2K Posts
263K Downloads
16 Themes
18 Plugins

Sorry, I'm having a hard time understanding everything in your message.

I miss Current Page -> Editable Areas

The list of editable areas still exists. It's just broken up into "Page" elements (ie Section Manger) and "Extra Content" elements. In the top right of the page, click on "Extra Content" to get a list of all editable areas that aren't included in the Section Manager.

PLEASE Josh, revise standard screen desktop elements and text-image element or by ResponsivImage Replace

I understand the image element isn't ideal. (I think saying that it's "Absolutely Useless" is going a bit far). Let's aim for version 5.1 for an improved image type.

 

3 years ago#8828

juergen
1.4K Posts
50.2K Downloads
16 Plugins
design, web development & visual effects

Hi, if I may join in ;-)

Sorry, I'm having a hard time understanding everything in your message

Felix's first point is about editing different sections within one session. Sometimes we have to close the editor and re-open it to access the editing icon/context menu.

I'm uncertain if this only occurs when certain plugins are involved, but at least in some cases it definifely is and I'm currently reworking all my section-based plugins to play nicely with TS 5.
It took me some time to figure out how the new handling of different editor components works and I eventually managed to make at least my current Responsive Image beta/rc version work reasonably.
It became a bit more complicated than it was before when plugin editors were loaded separately for every section editing session.
Josh, maybe you could give us plugin devs a brief list of what's critical/where to pay special attention. E.g., if a custom CKEditor instance is invoked, I figured out that it must not use gp_ckconfig but a different variable name... such things.

 

For the current image element:
Well, it's sort of limited to certain situations, where we deal with rather static page layouts. It definitely would benefit from a revision. My Responsive Image section type is completely different, it has advantages and drawbacks. Felix, I have to disagree with you here. I would not consider Responsive Image - in the current form - to serve well as default image section type.

What I would love to have was the-mighty-one-for-all-purposes image section type. So this would be my boldfaced wishlist:

  • Serving multiple resolutions for different display sizes, maybe using the HTML5 srcset/sizes technology + polyfill (like picturefill).
    Classic img/src fallback for the now becoming rare cases where HTML5 is not applicable.
  • Caption/Source attribution. figure/figcaption markup in HTML5 context. Selectable style variants/display options for captions.
  • SVG support with legacy image format fallback.
  • rgba overlay color. Set of overlay patterns (dots, hatchings, canvas, noise, ...)
  • Linking with "open in ColorBox" option.
  • Dynamic, non-destructive cropping (meaning that the original image should be available again when editing, cropped version served to visitors)
  • Frame/Section sizing options (mostly for section height), support for emerging flexbox standard.
  • Different image sizing methods (static, responsive downscale, responsive down- and upscale, cover frame, contain frame, repeat/tile)
  • Interactive image sizing and alignment/positioning inside the section frame for "static" and "contain frame" sizing. Via mouse input. All values stored as % for responsivity.
  • Focuspoint for "cover frame" sizing.
  • Parallax scrolling options for "cover frame" and "tile" sizing methods.
  • Optional preset optimized for background usage (inside a wrapper togehter with other content in the foreground).
  • Visibility detection (and dynamic css class application). Set of transition-in and -out effects (implemented as section css classes to be extensible by designers/developers)
  • Lazy loading option (based on visibility)

And, of course, all the above packed into a pretty, intuitive and clear user interface.

This will keep us busy for quite a few hours. LOL.

But, joke apart, I have already implemented many of the mentioned features in different projects, partially they are already implemented in some of my plugins, not all are yet released.
The high art is to pack them togehter and provide a logical and uncluttered UI.

So the questions arise:

Is it doable?
If it's too bloated, which are the key features to reduce it to?
If we only create a subset, what should be considered to make it extensible and future-proof?
What have I forgotten to mention?

 

Edited: 3 years ago#8833

feniweb
297 Posts

Hello Josh

Until version TS4.6.1 there was the Editable area-> Manage sections.

This I find not in the version TS5.x.

Write a extra content in this I can not find this element.

These areas I can not edit.

It true very helpful this Editable area-> Manage sections.

I appreciate your work very much for Typesetter a great CMS with some small inconsistencies.

 

TS4.6.1

TS5.x

Edited: 3 years ago#8835

feniweb
297 Posts

Hello Josh

The problem is when I copy a wrapper in the Section Manager and want to manage in then, he edited the wrong elements.

See image

I'd like Element 3 edit, but it is edited 1 element.

The label is also so, mouse touches 3 element gray but the red border is around the 1 element.

I have to finish first and then you can edit the correct item.

This effect, there was already up to version 4.6.1 TS.

 

3 years ago#8836

Josh S.
2K Posts
263K Downloads
16 Themes
18 Plugins

The problem is when I copy a wrapper in the Section Manager and want to manage in then, he edited the wrong elements.

Ah ha. Got it.. and fixed it

Until version TS4.6.1 there was the Editable area-> Manage sections.

This I find not in the version TS5.x.

Right. Because we now have the links in the top right of the window: "Page", "Extra Content", and "Layout". The "Page" link gets you the same thing the "Manage Sections" link used to get you.

3 years ago#8837

Josh S.
2K Posts
263K Downloads
16 Themes
18 Plugins

Josh, maybe you could give us plugin devs a brief list of what's critical/where to pay special attention.

Definitely. (I'll get it started here even though it's not the best spot...)

  • As you know, the first piece is the gp_editor object. Each plugin that adds a custom section needs to create a gp_editor with functions like gp_editor.checkDirty(), gp_editor.resetDirty() and so on
  • When switching edit areas, Typesetter caches the current gp_editor object to allow the new gp_editor object to take over. It also caches the $gp.links, $gp.inputs and $gp.response objects (more on these below).
  • Important: Typesetter only manages the objects listed above. Any other functions or objects loaded for editing a section (like gp_ckconfig) will exist for all other sections. This is particularly important with jQuery. Defining something like $('a').click(function({ ... }); for a section editor will affect all sections.
  • This is where $gp.links, $gp.inputs and $gp.response come in handy. If you want to handle a click on an anchor element, instead of using jQuery directly. Use the following:

$gp.links

<a data-cmd="MySectionEditFunction">Do Something</a>

....

$gp.links.MySectionEditFunction = function(evt){

    $(this).... // this points to the <a> element that was clicked

}

$gp.inputs

Similarly for inputs or buttons (note the use of $gp.inputs here):

<input data-cmd="MySectionEditFunction" value="Do Something" />

$gp.inputs.MySectionEditFunction = function(evt){

    $(this).... // this points to the <input> or <button> element that was clicked

}

$gp.response

This helps making ajax calls to the server and handling the responses easier. Using the following:

<a data-cmd="gpajax" href="?cmd=DoSomething">Do something</a> or <button data-cmd="gpajax" name="cmd" value="DoSomething">Do Something</button>

Then in php:

function DoSomething(){

global $page;

$page->ajaxReplace = array();

$page->ajaxReplace[] = array('DoResponse','arg1','arg2');

}

And back in js the

$gp.response.DoResponse = function(response_obj){

   $(this).... // this points to the <a>, <input> or <button> that triggered the ajax call

}

How does that look Juergen? Is that as clear as mud?

3 years ago#8838

Josh S.
2K Posts
263K Downloads
16 Themes
18 Plugins
... I may have just figured out a solution for the gp_ckconfig issue. I'm going to test some things out
3 years ago#8839

juergen
1.4K Posts
50.2K Downloads
16 Plugins
design, web development & visual effects

When switching edit areas, Typesetter caches the current gp_editor object to allow the new gp_editor object to take over. It also caches the $gp.links, $gp.inputs and $gp.response objects (more on these below). Important: Typesetter only manages the objects listed above. Any other functions or objects loaded for editing a section (like gp_ckconfig) will exist for all other sections. This is particularly important with jQuery. Defining something like $('a').click(function({ ... }); for a section editor will affect all sections.

Is gp_init_inline_edit() called again everytime an editor gets re-activated?

So guess it would be a good practice to move as many variables as possible away from global scope into the gp_editor object?

E.g.

gp_editor.edit_div = gp_editing.get_edit_area(area_id);

instead of

edit_div = gp_editing.get_edit_area(area_id);

 

 

This is where $gp.links, $gp.inputs and $gp.response come in handy.

I did not need to use $gp.links and $gp.inputs yet so much but this makes sense. Have to try it.

<a data-cmd="gpajax" href="?cmd=DoSomething">  --> PHP function DoSomething()

Until now I used PageRunScript hook and filtered the cmd for that purpose. Again, have to try it.

 

How does that look Juergen? Is that as clear as mud?

I cannot yet see through the mud but when I jump into it, I feel there is a ground. Just hurts a bit when taking a header :-)

Thanks a lot Josh!

 

Umm... and...

I want                 this

3 years ago#8840

juergen
1.4K Posts
50.2K Downloads
16 Plugins
design, web development & visual effects

The problem is when I copy a wrapper in the Section Manager and want to manage in then, he edited the wrong elements.
Ah ha. Got it.. and fixed it

Great! Thanks Felix for pointing to this!

3 years ago#8841

juergen
1.4K Posts
50.2K Downloads
16 Plugins
design, web development & visual effects

Hmm, just another question (we definitely should separate the topics here, anyway...)

When switching edit areas, Typesetter caches the current gp_editor object to allow the new gp_editor object to take over

Is the gp_editor object cached for every section or for every section type?

3 years ago#8842

Josh S.
2K Posts
263K Downloads
16 Themes
18 Plugins

Is gp_init_inline_edit() called again every time an editor gets re-activated?

It's only called once per section. There are two new methods available however: gp_editor: gp_editor.wake() and gp_editor.sleep()

gp_editor.wake() is called when the editor is activated and re-activated. (I wonder if it would be better not to call it when initially activated for better backwards compatibility)

gp_editor.sleep() is called when the editor is deactivated.

So guess it would be a good practice to move as many variables as possible away from global scope into the gp_editor object?

Yes. Or, if not a property of the gp_editor object, make sure the scope of the variable is contained:

(function(){
   var local_variable    = true;
   global_variable        = true;
   gp_editor = {
     ....
   };

})();

Here, the scope of the local_variable is limited to this instance of gp_editor.

Note, I've added that anonymous function wrapping to the Ajax response for all section editing.

<a data-cmd="gpajax" href="?cmd=DoSomething">  --> PHP function DoSomething()

Until now I used PageRunScript hook and filtered the cmd for that purpose. Again, have to try it.

Sorry, just to be clear, the DoSomething() method isn't called automatically in php.

... I want this [edit link]

I agree!

Is the gp_editor object cached for every section or for every section type?

every section

3 years ago#8845

juergen
1.4K Posts
50.2K Downloads
16 Plugins
design, web development & visual effects

every section

Hmm, so we should even avoid any IDs for editor elements and better reference them all as objects inside the gp_editor object? Like

gp_editor.element1 = $("<element>Do something</element>").on( event, function );
gp_editor.element1.on( otherEvent, function );

instead of

$("<element id="myPluginEditor-element1">Do something</element>").on( event, function );
$("#myPluginEditor-element1").on( otherEvent, function );

or is it better to consistently use data-cmd and $gp.links/$gp.inputs here? If so, how to deal with different events like keyup, change, paste etc.?

 

edit: or even better...

gp_editor.ui.element1 = ...

 

 

Edited: 3 years ago#8868

Josh S.
2K Posts
263K Downloads
16 Themes
18 Plugins

I guess it depends on where the element with the id is located in the DOM. If the element is within #ckeditor_wrap, then it's ok to use ids. (The html of the editing interface is also cached for each section).

how to deal with different events like keyup, change, paste

Right, $gp.links/$gp.inputs don't do anything for keyup, change, etc unfortunately. Those have to be handle using pure js or jquery.

3 years ago#8872

juergen
1.4K Posts
50.2K Downloads
16 Plugins
design, web development & visual effects

The html of the editing interface is also cached for each section

Ok, yes, I was thinking of the editor UI elements. Thx.

3 years ago#8874

Topic Closed

 

News

Typesetter 5.1
8/12/2017

Typesetter 5.0.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

Over 8 Times Faster Than Wordpress
5/3/2016

We've known for a long time that Typesetter is fast. It's something we take pride ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register