hi all,
here's another component for you to try out- this one is called Tidbits. it's based off of the text component and adds the ability for a span to launch a Notify popup. for the component to be completed, all popups must be visited. therefore, it will require at least one link.
Amazing Aaron!
It's going on the community list if that's ok with you :)
Thank you
Helen
it sure is [thumbs up]
thanks, helen
Hi Aaron,
I found the Tidbits are vey useful component for one of my requirements. If there are five links, then the users have to visit all the five links for the component to be completed. Is there a way, we can make a few links optional. So that they do not need be visited and still meet the completion criteria?
Thanks!
Suresh
hi suresh- it's possible but you will need to modify the component's code. the checkDone function is where the component checks to see if all tidbits are visited. comment out the getAllBitsVisited condition and write a condition to specify which tidbit(s) to check. here's an example that completes the component if only one tidbit has been visited:
hello again suresh,
forget the answer i provided above. although it will work, it's not reusable.
i reworked the component and updated the repository at GitHub. in version 0.0.2.0, only tidbits that are required must be visited in order to complete the component.
As this plugin looks very useful to me, I installed it successfully today into my authoring tool v0.3.0.
However I experience the following problem:
When I enter <span class="tidbit-trigger tidbit-color" data-bitnum="0">your text here</span>
into the body text window of the tidbits component (as source code), data-bitnum="0"
is erased automatically after saving. Everything else in the span tag remains.
As I found in other text components that the editor accepts only very basic formatting html code, I thought this is a general behaviour. I wonder now, what I am doing wrong.
hi wolfgang,
the editor window strips attributes for some reason. see this thread.
adding the links is the last thing i do. i also keep a separate text file to preserve everything so i can just copy and paste back into the AT if i have to.
once it's set, you're golden - attributes only strip once you go back into the component to edit stuff.
Hi Aaron,
thanks a lot, I was able to get it working now.
Theoretically, I understand there is the possibility to customize the content filter of the CKEditor and also the CKEditor CDN, but how to achieve this within the authoring tool with reasonable effort is currently beyond my knowledge. It would give some substantial flexibility, though.
hi wolfgang,
you saying "there is the possibility to customize the content filter of the CKEditor" was all the motivation i needed to go look it up. i found some info here about the Advanced Content Filter (ACF). there are examples showing how to allow and disallow elements, attributes, classes and styles.
so where to put it in adapt? thanks to finder in osx, these four files came up when searching for CKEditor:
i opened each file in my code editor and i found this inside of both origin.js and scaffoldOverrides.js:
i changed line 125 in scaffoldOverrides.js to this:
and line 36886 in origin.js to this:
result? data- attributes remain, as do other attributes - styles remain, too
FIXED :)
Hi Aaron,
that is really perfect! It worked for me, as well.
Thank you very much!
This post was really useful, I was looking to embed images and have buttons within the text component but the CKeditor filter was preventing it and I had to do it manually post export which was very time consuming...
For me the fix above (substituting img and button for span) didn't work for some reason, however I added the line allowedContent: true, to each of the scripts and that did the trick.
hi lee,
you said you added the line allowedContent: true, to each of the scripts?
will you please show me where you added that code?
when i replaced extraAllowedContent: 'span(*)[*]{*}', with allowedContent: true on line 125 of scaffoldOverrides.js, i was able to copy and paste
<p><svg width="35px" height="35px" viewBox="613 -39 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch --><desc>Created with Sketch.</desc><defs></defs><g id="Previous" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(630.500000, -21.500000) scale(1, -1) rotate(90.000000) translate(-630.500000, 21.500000) translate(613.000000, -39.000000)" stroke-linecap="round" stroke-linejoin="round"><g id="Icon" transform="translate(1.750000, 3.500000)" stroke="#36434D"><polyline id="Line-26" points="15.75 0 0.700000167 14 15.75 28"></polyline><path d="M1.75,14 L29.75,14" id="Line-25"></path></g></g></svg></p><h2>An Unordered HTML List</h2><ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul><h2>An Ordered HTML List</h2><ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol><p><button>click me</button></p><p><span class="tidbit-color tidbit-trigger" data-bitnum="0"><strong><u>shankle</u></strong></span></p>
which is everything from issue #1619, but i would also get extra <p>%nbsp<p> added everytime i toggled the source button if i didn't have certain elements wrapped in a <p></p>. do you experience that at all, because it sounds like you're doing something slightly different?
Hi Wolfgang,
I'm also doing the components tidbits and I wasn't able to get it working, I already paste this code in my editor
<span class="tidbit-trigger tidbit-color" data-bitnum="0">your text here</span> data-bitnum="0" was erased after I clicked the source code.
I have 2 popup links to open. I have uploaded a screenshot as sample, screenshots with mark yellow that's the link where the user need to click to open the popup window. 2nd image is the pop up window content.
Would please share or have a screenshots of how did you do it?
Thanks a lot.
