afc-org / js-tailwind Goto Github PK

• Add a script that generates automatically the js-tailwind.js and js-tailwind.min.js files.

• When overriding the deafult classes by calling again the initTabs funtion, another event listener will be added for all the tabs, make this only happen for those overriden tabs
• Change the active classes object, maybe you will have to change normal classes object as well
  The issue is that, the following code:

  let activeElement = ulElement.querySelector("li > a" + queryActiveClasses);

Has errors if the queryActiveClasses is an array with more than one class:
Example:

queryActiveClasses === [".class-1",".class-2"];
// then
"li > a" + queryActiveClasses === "li > a.class-1,.class-2"
// should be
"li > a" + queryActiveClasses === "li > a.class-1.class-2"

Notice the comma.

This issue refers to the fact that at the moment, when you open a Collapse component, it is opened quite rapidly, and it would be better to have a smooth transition on it's opening.
Example of nice transitions:

• https://getbootstrap.com/docs/4.4/components/navbar/#external-content
• https://codepen.io/mbxtr/pen/pCfcy
• https://www.w3schools.com/howto/howto_js_collapsible.asp
• We could make use of one of these from tailwindcss:
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/transition-delay/
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/translate/

Right now, when you close an Alert component, it suddenly disappears from the page. We could add a nice fading transition to it, like some of these examples:

• https://animate.style/ (check fade out animation)
• https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_animate_fading
• We could make use of one of these from tailwindcss:
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/transition-delay/
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/translate/

Right now, the Tooltips appears suddenly when you hover the elements with them. We want to change this behavior and make them appear with some nice transition.
Here are a few examples of what we're looking todo:

• https://www.javatpoint.com/oprweb/test.jsp?filename=css-tooltip-animation (but a bit faster with the transition)
• https://webdesign.tutsplus.com/tutorials/css-tooltip-magic--cms-28082 (these are quite nice, with the movement towards the place they are going to be rendered)
• https://tympanus.net/Development/TooltipAnimations/ (the best to the last place <3 )
• We could make use of one of these from tailwindcss:
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/transition-delay/
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/translate/

Add JS code for dynamic closing Alerts:

• https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/documentation/javascript/alerts

Right now, the Dropdowns appears suddenly when you click the elements with them. We want to change this behavior and make them appear with some nice transition.
Here are a few examples of what we're looking todo (they are the same as for the Tooltips, but they should work on click, not on hover):

• https://www.javatpoint.com/oprweb/test.jsp?filename=css-tooltip-animation (but a bit faster with the transition)
• https://webdesign.tutsplus.com/tutorials/css-tooltip-magic--cms-28082 (these are quite nice, with the movement towards the place they are going to be rendered)
• https://tympanus.net/Development/TooltipAnimations/ (the best to the last place <3 )
• We could make use of one of these from tailwindcss:
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/transition-delay/
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/translate/

Add JS code for modals:

• https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/documentation/javascript/modal/regular

This issue refers to the fact that at the moment, when you open a Modal component, the transition is sometimes lagging, and we'll need a refactor on this transition, or change it altogether with something a bit better.
Example of nice transitions:

• https://tympanus.net/Development/ModalWindowEffects/
• https://codepen.io/designcouch/pen/obvKxm
• https://zurb.com/playground/drop-in-modals
• We could make use of one of these from tailwindcss:
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/transition-delay/
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/translate/

Add JS code for responsive menus and navbars:

• https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/documentation/javascript/menus
• https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/documentation/javascript/navbars

Add JS code for dynamic drop-downs and drop-ups:

• https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/documentation/javascript/dropdown
• https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/documentation/javascript/dropup

Add JS code for Tabs:

• https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/documentation/javascript/tabs/icons

This issue refers to the fact that at the moment, when you change the current opened tab with it's content the old active element will suddenly disappear and the new content will suddenly appear. We want to change this behavior and make some nice animations between the changes of the current active element, and the next one.
Example of nice transitions:

• https://getbootstrap.com/docs/4.4/components/navs/#javascript-behavior
• https://react-swipeable-views.com/demos/demos/#tabs
• https://codemyui.com/accordion-tab-navigation-menu-hero-section-slider/
• We could make use of one of these from tailwindcss:
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/transition-delay/
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/translate/

Add JS code for popperjs:

• Popovers: https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/documentation/javascript/top/popover
• Tooltips: https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/documentation/javascript/top/tooltip

NOTE: Popperjs is used for both Tooltips and Popovers

Right now, the Popovers appears suddenly when you click the elements with them. We want to change this behavior and make them appear with some nice transition.
Here are a few examples of what we're looking todo (they are the same as for the Tooltips, but they should work on click, not on hover):

• https://www.javatpoint.com/oprweb/test.jsp?filename=css-tooltip-animation (but a bit faster with the transition)
• https://webdesign.tutsplus.com/tutorials/css-tooltip-magic--cms-28082 (these are quite nice, with the movement towards the place they are going to be rendered)
• https://tympanus.net/Development/TooltipAnimations/ (the best to the last place <3 )
• We could make use of one of these from tailwindcss:
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/transition-delay/
• • https://tailwindcss.com/docs/transition-property/
• • https://tailwindcss.com/docs/translate/