Stuck modus components

Taxsola · November 20, 2021, 7:09pm

I’m implementing Modus UI on my extension.
I’ve downloaded and linked “modus.min.css” and “modus-icons.css” locally.

Most of components works fine but not accordions, dropdowns and tabs.
They stay frozen/stuck on first state, can’t select other options.

Is it a “bootstrap.js” issue? How to fix it?

Basically a copy-paste from modus docs Im using for tests:
(I’m testing on SU2018, Win10)

dialog = UI::HtmlDialog.new({
  :dialog_title => "Modus UI tabs test (stuck error)",
  :preferences_key => "com.sample.plugin",
  :resizable => false,
  :style => UI::HtmlDialog::STYLE_DIALOG
})
(html = "<!DOCTYPE html>
<html>

	<link rel="stylesheet" href="https://modus.trimble.com/css/modus.min-1.3.1.css">
	<link rel="stylesheet" href="https://modus.trimble.com/assets/0.5.1/fonts/modus-icons.css">
	<body class='m-3 bg-panel-background'>


<ul class='nav nav-tabs' id='exampleTab' role='tablist'>
  <li class='nav-item'>
    <a class='nav-link active' id='exampleFirstTab' data-toggle='tab' href='#exampleFirst' role='tab' aria-controls='exampleFirst' aria-selected='true'>First tab</a>
  </li>

  <li class='nav-item'>
    <a class='nav-link' id='exampleSecondTab' data-toggle='tab' href='#exampleSecond' role='tab' aria-controls='exampleSecond' aria-selected='false'>Second tab</a>
  </li>

  <li class='nav-item'>
    <a class='nav-link' id='exampleThirdTab' data-toggle='tab' href='#exampleThird' role='tab' aria-controls='exampleThird' aria-selected='false'>Third tab</a>
  </li>
</ul>


<div class='tab-content py-3' id='exampleTabContent'>
  <div class='tab-pane fade show active' id='exampleFirst' role='tabpanel' aria-labelledby='exampleFirstTab'>
    <h5 id='first-tab-content'>First Tab Content</h5>
    <p>TEXT TEXT TEXT.<br></p>
  </div>

  <div class='tab-pane fade' id='exampleSecond' role='tabpanel' aria-labelledby='exampleSecondTab'>
    <h5 id='second-tab-content'>Second Tab Content</h5>
    <p>TEXT TEXT TEXT.<br></p>
  </div>

  <div class='tab-pane fade' id='exampleThird' role='tabpanel' aria-labelledby='exampleThirdTab'>
    <h5 id='third-tab-content'>Third Tab Content</h5>
    <p>TEXT TEXT TEXT.<br></p>
  </div>
</div>



<div class='accordion' id='accordionCodeExample'>
  <div class='card'>
    <div class='card-header' id='accordionHeadingOne' data-toggle='collapse' data-target='#codeCollapseOne' aria-expanded='true' aria-controls='codeCollapseOne'>
      <h6 class='mb-0' id='collapsible-group-item-1'>Collapsible Group Item #1</h6>
    </div>
    <div id='codeCollapseOne' class='collapse show' aria-labelledby='accordionHeadingOne' data-parent='#accordionCodeExample'>
      <div class='card-body'>
        This is the first item's accordion body.
      </div>
    </div>
  </div>
  <div class='card'>
    <div class='card-header' id='accordionHeadingTwo' data-toggle='collapse' data-target='#codeCollapseTwo' aria-expanded='false' aria-controls='codeCollapseTwo'>
      <h6 class='mb-0' id='collapsible-group-item-2'>Collapsible Group Item #2</h6>
    </div>
    <div id='codeCollapseTwo' class='collapse' aria-labelledby='accordionHeadingTwo' data-parent='#accordionCodeExample'>
      <div class='card-body'>
        This is the second item's accordion body.
      </div>
    </div>
  </div>
  <div class='card'>
    <div class='card-header' id='accordionHeadingThree' data-toggle='collapse' data-target='#codeCollapseThree' aria-expanded='false' aria-controls='codeCollapseThree'>
      <h6 class='mb-0' id='collapsible-group-item-3'>Collapsible Group Item #3</h6>
    </div>
    <div id='codeCollapseThree' class='collapse' aria-labelledby='accordionHeadingThree' data-parent='#accordionCodeExample'>
      <div class='card-body'>
        This is the third item's accordion body.
      </div>
    </div>
  </div>
</div>



<div class='modal-footer'>
	<div class='dropdown'>
		<button class='btn btn-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Dropdown</button>
		<div class='dropdown-menu' aria-labelledby='dropdownMenuButton'>
			<a class='dropdown-item active' href='#'>Action1</a>
			<a class='dropdown-item' href='#'>Action2</a>
			<a class='dropdown-item disabled' href='#'>Action3</a>
		</div>
	</div>
</div>


</html>
")

dialog.set_html(html)
dialog.set_size(500, 600)
dialog.show

Thanks

DanRathbun · November 20, 2021, 8:40pm

I don’t know whether it is the cause, but your HTML has 2 errors.

(1) The <link> elements should be in either <head> or <body> depending upon whether their rel type is body-ok. Your <link> elements are in neither as your HTML document does not have a <head> element.

(2) Your document’s <body> element has no closing </body> tag.

dezmo · November 20, 2021, 9:23pm

…as well as some error in your Ruby code:

You are using " (double quote ) inside others " (double quote ), I guess you got some error if your code really looks like that…

I would rather writing like this:

.
html = %{
<!DOCTYPE html>
<html>

	<link rel="stylesheet"

.
.
.
</html>
}

I’m not sure about the Modus UI (did not checked before…), but I guessing that will Requires JavaScript component, but I do not see anything like this in your code.
(There’s a lot you can do with just CSS, so I might be wrong.)

Taxsola · November 20, 2021, 11:24pm

You guys are completely right, thanks.
It’s now working perfectly!

I’ve:

created head block for the links
closed the body block
replaced double quotes from " to '. (also good to know about % thing)
Yeah, that wouldn’t run. Those are the online links; I forgot the " before posting, sorry.
added more dependencies including that “bootstrap.js” one.

I just couldn’t find the file to download. Thanks for @eneroth3 and @thomthom for all github work. It should be easier to get from trimble’s page.

Modus dependencies files: (missing just “modus-icons.css”)

obs: I’ve yet no clue about what they do exactly, linked them all just so I have not to worry about such dependencies anymore. It works! don’t judge me!

Working code:

dialog = UI::HtmlDialog.new({
  :dialog_title => "Modus UI example",
  :preferences_key => "com.sample.plugin",
  :resizable => false,
  :style => UI::HtmlDialog::STYLE_DIALOG
})
(html = "<!DOCTYPE html>
<html>

	<head>
		<link href='../modus.css' rel='stylesheet'>
		<link href='../modus-icons.css' rel='stylesheet'>
		<script src='../jquery.js'></script>
		<script src='../bootstrap.bundle.min.js'></script>
		<script src='../vue.js'></script>
	</head>

	<body class='m-3 bg-panel-background'>


		<ul class='nav nav-tabs' id='exampleTab' role='tablist'>
		  <li class='nav-item'>
			<a class='nav-link active' id='exampleFirstTab' data-toggle='tab' href='#exampleFirst' role='tab' aria-controls='exampleFirst' aria-selected='true'>First tab</a>
		  </li>

		  <li class='nav-item'>
			<a class='nav-link' id='exampleSecondTab' data-toggle='tab' href='#exampleSecond' role='tab' aria-controls='exampleSecond' aria-selected='false'>Second tab</a>
		  </li>

		  <li class='nav-item'>
			<a class='nav-link' id='exampleThirdTab' data-toggle='tab' href='#exampleThird' role='tab' aria-controls='exampleThird' aria-selected='false'>Third tab</a>
		  </li>
		</ul>


		<div class='tab-content py-3' id='exampleTabContent'>
		  <div class='tab-pane fade show active' id='exampleFirst' role='tabpanel' aria-labelledby='exampleFirstTab'>
			<h5 id='first-tab-content'>First Tab Content</h5>
			<p>TEXT TEXT TEXT.<br></p>
		  </div>

		  <div class='tab-pane fade' id='exampleSecond' role='tabpanel' aria-labelledby='exampleSecondTab'>
			<h5 id='second-tab-content'>Second Tab Content</h5>
			<p>TEXT TEXT TEXT.<br></p>
		  </div>

		  <div class='tab-pane fade' id='exampleThird' role='tabpanel' aria-labelledby='exampleThirdTab'>
			<h5 id='third-tab-content'>Third Tab Content</h5>
			<p>TEXT TEXT TEXT.<br></p>
		  </div>
		</div>



		<div class='accordion' id='accordionCodeExample'>
		  <div class='card'>
			<div class='card-header' id='accordionHeadingOne' data-toggle='collapse' data-target='#codeCollapseOne' aria-expanded='true' aria-controls='codeCollapseOne'>
			  <h6 class='mb-0' id='collapsible-group-item-1'>Collapsible Group Item #1</h6>
			</div>
			<div id='codeCollapseOne' class='collapse show' aria-labelledby='accordionHeadingOne' data-parent='#accordionCodeExample'>
			  <div class='card-body'>
				This is the first item's accordion body.
			  </div>
			</div>
		  </div>
		  <div class='card'>
			<div class='card-header' id='accordionHeadingTwo' data-toggle='collapse' data-target='#codeCollapseTwo' aria-expanded='false' aria-controls='codeCollapseTwo'>
			  <h6 class='mb-0' id='collapsible-group-item-2'>Collapsible Group Item #2</h6>
			</div>
			<div id='codeCollapseTwo' class='collapse' aria-labelledby='accordionHeadingTwo' data-parent='#accordionCodeExample'>
			  <div class='card-body'>
				This is the second item's accordion body.
			  </div>
			</div>
		  </div>
		  <div class='card'>
			<div class='card-header' id='accordionHeadingThree' data-toggle='collapse' data-target='#codeCollapseThree' aria-expanded='false' aria-controls='codeCollapseThree'>
			  <h6 class='mb-0' id='collapsible-group-item-3'>Collapsible Group Item #3</h6>
			</div>
			<div id='codeCollapseThree' class='collapse' aria-labelledby='accordionHeadingThree' data-parent='#accordionCodeExample'>
			  <div class='card-body'>
				This is the third item's accordion body.
			  </div>
			</div>
		  </div>
		</div>



		<div class='modal-footer'>
			<div class='dropdown'>
				<button class='btn btn-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Dropdown</button>
				<div class='dropdown-menu' aria-labelledby='dropdownMenuButton'>
					<a class='dropdown-item active' href='#'>Action1</a>
					<a class='dropdown-item' href='#'>Action2</a>
					<a class='dropdown-item disabled' href='#'>Action3</a>
				</div>
			</div>
		</div>


	</body>
</html>
")

dialog.set_html(html)
dialog.set_size(500, 600)
dialog.show

Thanks yall saved the day again

tt_su · November 22, 2021, 10:34am

We’ve be very interested in seeing the final result with Modus if you’d be willing to share with us.

Taxsola · November 22, 2021, 5:51pm

Sure!

I’ve just posted (it’s not the above code, it was just testing components):
Update preview (modus UI implementation)

There I’ll be posting updates

Maybe I should open another thread for showing my modus 1st contact experience while suggesting some improvements.

tt_su · November 23, 2021, 10:04am

Yes please!