DNN Forums

Ask questions about your website to get help learning DNN and help resolve issues.
Prev
Next

SEO Character Counter GitHub Issue related to PersonaBar (React)

Forums > Building DNN Modules, Providers etc.
Sort:
You are not authorized to post a reply.





Cody

Growing Member



Posts:95
Growing Member




11/27/2019 2:49 AM

    GitHub Issue #3342

    It has to do with adding a character counter that changes colors.  Any changes to some simple modifications below let me know.

    • Will be displayed next to the label example: "Description | Help Icon | Counter"
    • Wont add any type of maximum characters allowed so you can go red like a color meter.
    • Title characters changes from green to red after about 70 Characters
    • Description characters change from blue to green at 120 then red after 320 (googles max)
      blue can be another color such as black... it is to help indicate a short description and let me know any preferences here.
    • Keywords green to red at 68 Characters old best practices...or is it?!

    This is just something I have requested in the past and so I can relate to the request.  I am going to do my best to put in a PR that can be accepted, and if not at least I tried.  Once I figure how all this works hopefully... I will add counters like this in other places desired such as ones that show how many characters are left if there is a max lenght set on the field.  I will see about putting these in other parts of modules as well such as Events and this forum.  I believe places like the profile page could use them as well.

    I have a few issues maybe someone can help with:

    1. I am not sure I am putting my javascript code in the proper place.  I am digging up information as I can to help with this issue.  I put in SiteSettings.js file... sounds right but then React or the way all the persona bar modules are batched together makes my head think it can be done in so many ways...   which one is the correct one going forward so I can put my script there.
    2. Is it ok to create ID's on the label and text areas to select them with the JS?  and did I do that properly or am I off it is so hard to find so many different documentations on what can do what and how.. a link to something that explains this "simple" system we have now or a great explanation would be awesome.
    3. Would passing the character count to a language file (0) be another way of doing so and if so can you link me to information on how that is done from javascript to the language file to update that one variable with the current number, and would that pass color of the text as well?  Or would I still need to select things by ID?  Or am I able to select these differently?

    Any help is greatly appreciated, quote or pick a number and give the best you can.  Hoping some of it makes sense to someone :)  Thank you!

    Help Contribute GitHub DNN Community Platform .NET Foundation Open Source Project!
    also: dnndocs.com you can Contribute on GitHub!





    Cody

    Growing Member



    Posts:95
    Growing Member




    11/27/2019 11:28 AM

      https://reactjs.org/docs/jsx-in-depth.html

      This page has enlightend me.  Looks like I can make a make my own components... lowercase first letter is for general html and can be self closing. Anything capitalized is a user defined component.

      This is a fairly simple task that really helps me understand React and Personabar so it is great to learn for the fun of it to help me take that next step up that developer staircase.

      So now I wonder if I should create and add some settings that possibly could get set using the CSS file such as when the colors change and what color to change to.  But not looking to get too crazy here if I dont have to.  Whatever is clever...  There is probably a much easier way to do what I have created.

      I am going to put for now after the title however Timo suggests wrapping the label with it which probably makes sense as well.  The forms are set to a width so I dont think there will be a problem with room.

      I will test some things out some more see what happens.  I am looking for best direction here, especially if I put the javascript in the right place.  It might go deeper in the SiteSettings.js script file. Or it might go in the JSX file, or maybe I need to create a new one...

       

      Help Contribute GitHub DNN Community Platform .NET Foundation Open Source Project!
      also: dnndocs.com you can Contribute on GitHub!
      You are not authorized to post a reply.

      These Forums are dedicated to the discussion of DNN Platform.

      For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

      1. If you have (suspected) security issues, please DO NOT post them in the forums but instead follow the official DNN security policy. 
      2. No Advertising. This includes the promotion of commercial and non-commercial products or services which are not directly related to DNN.
      3. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
      4. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
      5. No Flaming or Trolling.
      6. No Profanity, Racism, or Prejudice.
      7. Site Moderators have the final word on approving / removing a thread or post or comment.
      8. English language posting only, please.

      Would you like to help us?

      Awesome! Simply post in the forums using the link below and we'll get you started.

      Get Involved