Make Lectora more developer friendly.

klaatu
klaatu Community Member Posts: 988
Some suggestions and comments.

1. Please change the end of file scripting so that it is inserted just before the closing </body> tag (not after it). Pages with scripts after the body tag is not good practice, pages contained will not validate and it would depend on browser tolerance for them to work at all. The best place for linking to JavaScript is just before the closing body tag.

2. Why does Lectora generate and employ inline styling? Please do not inline or embed; put all styling on it's own sheet.

3. Combine the external JavaScripts into one sheet (same with CSS) to reduce the number of HTTP requests thereby allowing pages to load faster.

4. Whats with the coded buttons? Just use CSS so we can add functionality and change classes on the fly.

5. If your going to provide HTML names, make sure they are the correct names that can actually be used to assign classes. While i am at it, why not provide that name in the explorer instead of the generics used now. They would still be able to be changed which I suppose most people do anyway.

6. For those of us who write scripts and css, please do not break naming conventions on future releases (not that you have, I just want to ensure the add-in modules I am making will continue to work down the line).

If others agree or disagree let's hear it. Perhaps if a lot agree it will come to fruition faster.

Thanks for listening.

Darrel R. Somoza

elearningcode.com

Comments

  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    Commenting so I can follow this conversation.
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    Did you know you can add classes to object in Lectora? Pretty much solves your #5 and #6 problems.
    https://us.v-cdn.net/6032433/uploads/attachments/2014/09/Screen-shot-2014-09-11-at-10.38.17-AM.png
  • klaatu
    klaatu Community Member Posts: 988
    They're not really problems.  It would be nice adding classes like that if it worked consistently but unfortunately it doesn't. Take a text entry for instance. You cannot add a class in its appearance tab and then target it with CSS. It won't work.  While Lectora supplies an HTML name of something like 'entry63', the element that needs to be selected is 'entry63id' which is not provided for. You have to add a class with JavaScript.

    Don't take my post the wrong way. It is not in any way meant to disparage Lectora or Trivantis. I'm just trying to help make a great program even better.

    DRS
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    You cannot add a class in its appearance tab and then target it with CSS. It won’t work.
    But you can! Here's an example (also, attached as ZIP)

    1. In Lectora, add class "myclass" to an entry field.
    2. In Lectora, add Ext HTML object (or use any other method to add CSS) with the following code:
    <style>
    .myfield {
    border: 4px solid blue;
    }
    .myfield input {
    color:red !important;
    }
    </style>

    See the result (attached pic).
  • klaatu
    klaatu Community Member Posts: 988
    Sergey, thank you however I'm thinking about something a little more advanced than changing the text color and border. Hey, it's all good. One of the benefits of this forum is if someone needs assistance doing something that Lectora might not be capable of out of the box someone, like yourself, is always willing to help out.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Agreeing with Darrel on this... Most elements can have classes applied, but now and then i also run into a scenario where i can only achieve what i want by adding the class in Javascript.

    Also i would love support for SVG in Lectora. I can use it, when coding it, but would be great if a designer could add SVGs by just creating them in Illustrator or whatever tool and import it, see it, position it and do his thing, and then as a developer i could target those SVGs to animate/script/morph do whatever i want with them.

    Canvas support. Allthough you can work around it by adding a empty DIV and creating a canvas of it, would be great to have it more embedded in Lectora so all the nice 3rd party libraries that depend on Canvas work directly with Lectora.
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    > I’m thinking about something a little more advanced than changing the text color and border.

    You said, and I quote, "Take a text entry for instance. You cannot add a class in its appearance tab and then target it with CSS. It won’t work." I've just demonstrated that you can add a class to a text entry in its appearance tab and then target it with CSS and it will work. Once you do that, you can do absolutely anything with it.
  • timk
    timk Community Member Posts: 1,195 ♦ Idol ♦
    @ Darrels point 5:

    Usually the html name is the id of the DIV that contains the element and from my experience this is working correctly. This DIV is what gets the CSS class by the way.

    There is one Lectora element for that this isn't true. There is something wrong with html extensions of the type "Custom Div". That Div doesn't get the html name (other1234) as its id, but its name in Lectora (without any blanks). So it can be "htmlextension" or "customdiv" depending on the name Lectora gives it when you add it. If you have more than one "Custom Div" you'll have to make sure to give the copy a different name in order to make the ids unique.

    Tim
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    And Groups dont accept Classes...
  • pjackson2462
    pjackson2462 Community Member Posts: 69 ☆ Roadie ☆
    I would like to see the undocumented features list and have it available for members to vote on the items and this way the priority will be based on requirement and not just the squeaky door.  Undocumented features are things that don't work and have been reported and are know issues, like:
    • TOC not scrolling in iPad and other iOS. e.g.: works OK in Android
    • Button graphics being duplicated
    This would save so much time trying to debug or asking for help.

    I would like to see a much better Action system and when published instead of two or more style sheets and 8 or more JavaScript files there should only be one of each.  The publish process already know which js file to include so why not build a single one and apply that to all pages, these are some of the reasons for page flashing.

    Regards, Peter
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    @mnotermans5114 YES! Groups not being able to accept CSS classes is something I asked for a long time ago.
  • klaatu
    klaatu Community Member Posts: 988
    Hi Tim, can you elaborate? Are you saying that Lectora overwrites the ID (and/or classes) you assign to the DIV?
  • timk
    timk Community Member Posts: 1,195 ♦ Idol ♦
    Good morning Darrel,

    nothing's overwritten. I'm talking about the div that Lectora produces automatically that wraps your code. It gets its id in an uncommon way. This means when you add another custom div it will also get the id "customdiv" which will cause issues.

    Tim
  • klaatu
    klaatu Community Member Posts: 988
    Eww, that is not good. Thanks for the explanation.
  • klaatu
    klaatu Community Member Posts: 988
    Tim, I'm not getting the same thing as you. Are you sure you're not accidentally providing the same ID to more than one DIV? See attached.
  • timk
    timk Community Member Posts: 1,195 ♦ Idol ♦
    This is probably exactly the same thing. As i mentioned in my initial post, the divs don't all get the id "customdiv", the id is made up from the elements name in Lectora. So if the element is called "mydiv1" that will be the id. If you copy it, there'll be another div with the same id. If you rename the copy you'll be fine.

    Tim

     
  • klaatu
    klaatu Community Member Posts: 988
    Tim, what I'm saying is that I think there is an error in your example. There is no conflict of names in any of the code as long as you provide unique ID's in the DIV's you create.  Look at the sample I posted. I believe in your example you assigned an ID of "myid" to 2 DIV's. Try naming them differently and you should be fine.
  • timk
    timk Community Member Posts: 1,195 ♦ Idol ♦
    Hi Darrel,

    thank you very much for the example. In my title, there are only two divs: the "Custom Div" (the Lectora element) itself (id = "customdiv") and the div I've inserted in the custom div (id = "myId"), so no two divs with the same id.

    The issue I wanted to mention is (just), that Lectora is not following its usual way of using the html name for the id of the "HTML Extension (Type: Custom Div)". In your example the issue is not occuring because you renamed the two elements to "myDiv_1" and "myDiv_2", but it would have happened if you had left the default name "Custom Div". Normally the ids of your Custom divs should be "other47" and "other53" (their html names). Now i just mentioned that the last update brought a different default naming for HTML extensions, that includes numbering. They still use the elements name instead of the html name for the id, but at least the names are unique by default.

    Tim
  • klaatu
    klaatu Community Member Posts: 988
    Thanks for your patience and for clarifying further; I can be a little dense.. Unlike regular HTML authoring, I rarely copy and paste elements in Lectora. That sometimes gave unexpected results in ToolBook, the prior application I used to employ for e-learning authoring. I suppose the rule of thumb for custom DIV's should be don't copy and paste them and make sure you provide each an ID. You also touched on one of the original points I was making. You mentioned that the naming convention changed with the last update. That could be problematic for reusing scripts and style sheets.

    Darrel
  • chrystalb
    chrystalb Community Member Posts: 32
    I agree on all points. I have run across a situation before where the published file wrapped an object in a div, but then in another release it was a span (or vice versa, can't remember which), but would break any jquery or css that targeted that way. I'd also add it would be great to not have any additional css styling on external html divs ...the clipping mask that was added was kind of a pain.