diff --git a/editions/appear/tiddlers/content/appear-Attributes.tid b/editions/appear/tiddlers/content/appear-Attributes.tid index 0598269..4efe065 100644 --- a/editions/appear/tiddlers/content/appear-Attributes.tid +++ b/editions/appear/tiddlers/content/appear-Attributes.tid @@ -1,14 +1,14 @@ created: 20151209181001150 creator: Tobias Beer -modified: 20151218155746917 +modified: 20151229094011629 modifier: Tobias Beer title: appear-Attributes type: text/vnd.tiddlywiki Some attributes of the ''appear'' widget directly specify its behavior while others map to the corresponding <> or <> it creates: -|!Name |!Description |!Default | -|>|>|!Globals | +| !Name | !Description | !Default | +|>|>| !Globals | |''show''|the label for the button|»
see [[defaults|appear-Defaults]]| |''hide''|the label for the hide-button|same as ''show''| |''type''|to output a popup, set this attribute to `popup`
» if unspecified, the inner reveal will be rendered as either an inline- or block-level element, e.g. a slider|| @@ -18,11 +18,12 @@ Some attributes of the ''appear'' widget directly specify its behavior while oth |''handle''|specifies a handler type for an appear widget used in a placeholder template tagged ''$:/tags/PageTemplate'' to remotely output the contents of all appear widgets whose ''handler'' attribute matches the same type
» by default handled via the state `$:/temp/appear-handlers/`|| |''handler''|specifies the handler type of the remote appear widget that is configured to ''handle'' this appear widget's inner reveal|| |''variables''|should you have specified a remote ''handler'', specify context variables you wish preserved for the inner reveal as it is rendered in a different context|`currentTiddler`| -|>|>|!Button Attributes| -|''button-tag''|maps to the ''tag'' attribute of the button|| +|>|>| ![[Button Attributes|http://tiddlywiki.com/#ButtonWidget]] | |''button-class''|maps to the ''class'' attribute of the button|see [[Defaults|appear-Defaults]]| -|''tooltip''|a tooltip applied to the button|| -|''style''|css applied to the button|| -|''selectedClass''|css class applied to the button when the slider / popup is open|| -|>|>|!Reveal Attributes| -|''class'',
''position'',
''retain'',
''state'',
''style'',
''tag''|see <>
» note that the type attribute of the reveal is explicitly handled by the appear widget|| \ No newline at end of file +|''button-style''|maps to the ''style'' attribute of the button|~| +|''button-tag''|maps to the ''tag'' attribute of the button|~| +|''tooltip''|a tooltip applied to the button|~| +|''style''|css applied to the button|~| +|''selectedClass''|css class applied to the button when the slider / popup is open|~| +|>|>| ![[Reveal Attributes|http://tiddlywiki.com/#RevealWidget]] | +|''class'',
''position'',
''retain'',
''state'',
''style'',
''tag''|see <>
» note that the type attribute of the reveal is explicitly handled by the appear widget|see [[Defaults|appear-Defaults]]| \ No newline at end of file diff --git a/editions/appear/tiddlers/content/appear-Info.tid b/editions/appear/tiddlers/content/appear-Info.tid index 1f0447b..93e121c 100644 --- a/editions/appear/tiddlers/content/appear-Info.tid +++ b/editions/appear/tiddlers/content/appear-Info.tid @@ -1,6 +1,6 @@ created: 20151209180941139 creator: Tobias Beer -modified: 20151218035422612 +modified: 20151229094127992 modifier: Tobias Beer title: appear-Info type: text/vnd.tiddlywiki @@ -12,4 +12,6 @@ The ''appear'' widget displays a button which when clicked reveals hidden conten * accordion ''menus'' * interactive ''stories'' -Under the hood, there is at least one <> and one <> it creates which may be wrapped in further elements, e.g. more reveal widgets, as needed, so as to achieve the desired output. \ No newline at end of file +Under the hood, there is at least one <> and one <> created by the appear widget which may be further wrapped in more reveal widgets, as needed, so as to achieve the desired output. + +<> \ No newline at end of file diff --git a/editions/appear/tiddlers/content/appear-Styles.tid b/editions/appear/tiddlers/content/appear-Styles.tid index 783b713..63e6aae 100644 --- a/editions/appear/tiddlers/content/appear-Styles.tid +++ b/editions/appear/tiddlers/content/appear-Styles.tid @@ -1,9 +1,28 @@ created: 20151216094336360 creator: Tobias Beer -modified: 20151216094449945 +modified: 20151229093643685 modifier: Tobias Beer tags: title: appear-Styles type: text/vnd.tiddlywiki -The default styles for the appear-widget are defined in <> \ No newline at end of file +The default styles for the appear-widget are defined in <> + + !! CSS Classes + +The following css classes are automatically set by the appear widget: + +; appear +: set at all buttons or reveals created by the appear widget +; appear-button +: set at each button widget to trigger an appear popup or slider +; appear-reveal +: set at each reveal widget being the popup or slider +; appear-inline, appear-block +: set at both button and reveal depending on the specified mode +; appear-show +: set at the button widget that opens the slider +; appear-hide +: set at the button widget that closes the slider +; appear-once +: set at both button and reveal when an appear widget is specified to only show the button once \ No newline at end of file diff --git a/editions/appear/tiddlers/content/appear.tid b/editions/appear/tiddlers/content/appear.tid index 984c35e..df6cb32 100644 --- a/editions/appear/tiddlers/content/appear.tid +++ b/editions/appear/tiddlers/content/appear.tid @@ -1,12 +1,10 @@ created: 20151209180857097 creator: Tobias Beer -modified: 20151216114439777 +modified: 20151229092638950 modifier: Tobias Beer tabs: Info Attributes Examples Defaults Modes States Styles Install tags: Plugins Widgets title: appear type: text/vnd.tiddlywiki -<> - -<> \ No newline at end of file +<> \ No newline at end of file diff --git a/plugins/tobibeer/appear/appear.js b/plugins/tobibeer/appear/appear.js index 9181b0e..55b0d85 100644 --- a/plugins/tobibeer/appear/appear.js +++ b/plugins/tobibeer/appear/appear.js @@ -7,4 +7,4 @@ Use the appear widget for popups, sliders, accordion menus @preserve \*/ -(function(){"use strict";var t=require("$:/core/modules/widgets/widget.js").widget,e=require("$:/core/modules/utils/dom/popup.js").Popup,i=function(t,e){this.initialise(t,e)};i.prototype=new t;i.prototype.render=function(t,e){this.parentDomNode=t;this.computeAttributes();this.execute();var i,s,r,a,h,n,u=[];if(this.handle){this.handlerState=this.checkHandler();$tw.utils.each(this.handlerState,function(t){u.push(t)})}else{s={type:"button"};s.attributes=this.setAttributes(s,"button");i=s.attributes["class"].value.trim();s.attributes["class"].value=i+" appear-show"+(this.handler?" tc-popup-absolute":"");s.children=this.wiki.parseText("text/vnd.tiddlywiki",this.show,{parseAsInline:true}).tree;h={type:"reveal",children:this.parseTreeNode.children};h.attributes=this.setAttributes(h,"reveal");h.isBlock=!(this.mode&&this.mode==="inline");if(h.attributes.type&&h.attributes.type.value==="popup"){s.attributes.popup=h.attributes.state;u.push(s);if(!this.handler){u.push(h)}else{s.attributes.handler=this.handler}}else{h.attributes.type={type:"string",value:"match"};h.attributes.text={type:"string",value:this.currentTiddler};s.attributes.set=h.attributes.state;s.attributes.setTo={type:"string",value:this.currentTiddler};a={type:"reveal",isBlock:this.block,children:[s],attributes:{type:{type:"string",value:"nomatch"},state:h.attributes.state,text:{type:"string",value:this.currentTiddler}}};if(!this.once){r=$tw.utils.deepCopy(s);r.attributes["class"].value=i+" appear-hide "+(this.attr.button.selectedClass?this.attr.button.selectedClass:"");r.attributes.setTo={type:"string",value:""};r.children=this.wiki.parseText("text/vnd.tiddlywiki",this.hide,{parseAsInline:true}).tree}n=$tw.utils.deepCopy(a);n.children=[];if(!this.once){n.children.push(r)}if(!this.handler){n.children.push(h)}n.attributes.type.value="match";u.push(a,n)}}this.makeChildWidgets(u);this.renderChildren(this.parentDomNode,e);if(this.handler){this.checkHandler(h)}};i.prototype.execute=function(){var t=this;this.attr={map:{reveal:{"class":1,position:1,retain:1,state:1,style:1,tag:1,type:1},button:{"button-class":1,"button-style":1,"button-tag":1,tooltip:1,selectedClass:1}},rename:{"button-class":"class","button-style":"style","button-tag":"tag"},button:{},reveal:{}};$tw.utils.each(this.attributes,function(e,i){var s;$tw.utils.each(t.attr.map,function(r,a){$tw.utils.each(Object.keys(r),function(r){if(r==i){t.attr[a][i]=e;s=false;return false}});return s})});this.currentTiddler=this.getVariable("currentTiddler");this.show=this.getValue(this.attributes.show,"show");this.hide=this.getValue(this.attributes.hide,"hide");if(!this.hide){this.hide=this.show}this.once=this.attributes.once&&this.attributes.once!=="false";this.$state=this.attributes.$state;this.mode=this.getValue(this.attributes.mode,"mode");this.handle=this.attributes.handle;this.handler=this.attributes.handler;this.handlerVariables=(this.attributes.variables||"")+" currentTiddler";if(!this.attr.reveal.state){this.attr.reveal.state=this.getValue(undefined,"default-state")+this.currentTiddler+this.getStateQualifier()+"/"+(this.attr.reveal.type?this.attr.reveal.type+"/":"")+(this.mode?this.mode+"/":"")+(this.once?"once/":"")+(this.$state?"/"+this.$state:"")}};i.prototype.refresh=function(t){var e=this.computeAttributes();if(Object.keys(e).length){this.refreshSelf();return true}else if(this.handle){if(this.handlerState!=this.checkHandler()){this.refreshSelf();return true}}return this.refreshChildren(t)};i.prototype.getValue=function(t,e){var i,s,r={show:"»","default-state":"$:/temp/appear/"};if(t===undefined){i=this.wiki.getTiddler("$:/plugins/tobibeer/appear/defaults/"+e);if(i){s=i.getFieldString("undefined");if(!s||s==="false"){t=i.getFieldString("text")}}}if(t===undefined){t=r[e]}return t};i.prototype.setAttributes=function(t,e){var i=this,s={};$tw.utils.each(Object.keys(this.attr.map[e]),function(r){var a,h=i.attr.rename[r];if(!h){h=r}a=i.getValue(i.attr[e][r],r);if(h==="class"){a=["appear",i.mode?"appear-"+i.mode:"",i.once?"appear-once":"",a||""].join(" ")}if(a!==undefined){if(h==="tag"){t.tag=a}else{s[h]={type:"string",value:a}}}});return s};i.prototype.checkHandler=function(t){var e,i={},s=this,r="$:/temp/appear-handlers/"+(this.handler||this.handle),a=this.wiki.getTiddler(r);if(a){i=JSON.parse(a.getFieldString("text")||"{}")}if(this.handler){e={type:"vars",children:[t],attributes:{}};$tw.utils.each((this.handlerVariables||"").split(" "),function(t){t=t.trim();if(t){e.attributes[t]={type:"string",value:(s.getVariable(t)||"").toString()}}});if(i[t.attributes.state.value]!==e){i[t.attributes.state.value]=e;s.wiki.setText(r,"text",undefined,JSON.stringify(i))}}return i};e.prototype.show=function(t){var e=t.domNode,i=(e.getAttribute("class")||"").indexOf("tc-popup-absolute")>=0,s=this.popupInfo(e),r=function(t){var e=0,i=0;do{i+=t.offsetTop||0;e+=t.offsetLeft||0;t=t.offsetParent}while(t);return{left:e,top:i}},a={left:e.offsetLeft,top:e.offsetTop};this.cancel(s.popupLevel);this.popups.push({title:t.title,wiki:t.wiki,domNode:e});a=i?r(e):a;t.wiki.setTextReference(t.title,"("+a.left+","+a.top+","+e.offsetWidth+","+e.offsetHeight+")");if(this.popups.length>0){this.rootElement.addEventListener("click",this,true)}};exports.appear=i})(); \ No newline at end of file +(function(){"use strict";var t=require("$:/core/modules/widgets/widget.js").widget,e=require("$:/core/modules/utils/dom/popup.js").Popup,i=function(t,e){this.initialise(t,e)};i.prototype=new t;i.prototype.render=function(t,e){this.parentDomNode=t;this.computeAttributes();this.execute();var i,s,r,a,h,n,u=[];if(this.handle){this.handlerState=this.checkHandler();$tw.utils.each(this.handlerState,function(t){u.push(t)})}else{s={type:"button"};s.attributes=this.setAttributes(s,"button");i=s.attributes["class"].value.trim();s.attributes["class"].value=i+" appear-show"+(this.handler?" tc-popup-absolute":"");s.children=this.wiki.parseText("text/vnd.tiddlywiki",this.show,{parseAsInline:true}).tree;h={type:"reveal",children:this.parseTreeNode.children};h.attributes=this.setAttributes(h,"reveal");h.isBlock=!(this.mode&&this.mode==="inline");if(h.attributes.type&&h.attributes.type.value==="popup"){s.attributes.popup=h.attributes.state;u.push(s);if(!this.handler){u.push(h)}else{s.attributes.handler=this.handler}}else{h.attributes.type={type:"string",value:"match"};h.attributes.text={type:"string",value:this.currentTiddler};s.attributes.set=h.attributes.state;s.attributes.setTo={type:"string",value:this.currentTiddler};a={type:"reveal",isBlock:this.block,children:[s],attributes:{type:{type:"string",value:"nomatch"},state:h.attributes.state,text:{type:"string",value:this.currentTiddler}}};if(!this.once){r=$tw.utils.deepCopy(s);r.attributes["class"].value=i+" appear-hide "+(this.attr.button.selectedClass?this.attr.button.selectedClass:"");r.attributes.setTo={type:"string",value:""};r.children=this.wiki.parseText("text/vnd.tiddlywiki",this.hide,{parseAsInline:true}).tree}n=$tw.utils.deepCopy(a);n.children=[];if(!this.once){n.children.push(r)}if(!this.handler){n.children.push(h)}n.attributes.type.value="match";u.push(a,n)}}this.makeChildWidgets(u);this.renderChildren(this.parentDomNode,e);if(this.handler){this.checkHandler(h)}};i.prototype.execute=function(){var t=this;this.attr={map:{reveal:{"class":1,position:1,retain:1,state:1,style:1,tag:1,type:1},button:{"button-class":1,"button-style":1,"button-tag":1,tooltip:1,selectedClass:1}},rename:{"button-class":"class","button-style":"style","button-tag":"tag"},button:{},reveal:{}};$tw.utils.each(this.attributes,function(e,i){var s;$tw.utils.each(t.attr.map,function(r,a){$tw.utils.each(Object.keys(r),function(r){if(r==i){t.attr[a][i]=e;s=false;return false}});return s})});this.currentTiddler=this.getVariable("currentTiddler");this.show=this.getValue(this.attributes.show,"show");this.hide=this.getValue(this.attributes.hide,"hide");if(!this.hide){this.hide=this.show}this.once=this.attributes.once&&this.attributes.once!=="false";this.$state=this.attributes.$state;this.mode=this.getValue(this.attributes.mode,"mode");this.handle=this.attributes.handle;this.handler=this.attributes.handler;this.handlerVariables=(this.attributes.variables||"")+" currentTiddler";if(!this.attr.reveal.state){this.attr.reveal.state=this.getValue(undefined,"default-state")+this.currentTiddler+this.getStateQualifier()+"/"+(this.attr.reveal.type?this.attr.reveal.type+"/":"")+(this.mode?this.mode+"/":"")+(this.once?"once/":"")+(this.$state?"/"+this.$state:"")}};i.prototype.refresh=function(t){var e=this.computeAttributes();if(Object.keys(e).length){this.refreshSelf();return true}else if(this.handle){if(this.handlerState!=this.checkHandler()){this.refreshSelf();return true}}return this.refreshChildren(t)};i.prototype.getValue=function(t,e){var i,s,r={show:"»","default-state":"$:/temp/appear/"};if(t===undefined){i=this.wiki.getTiddler("$:/plugins/tobibeer/appear/defaults/"+e);if(i){s=i.getFieldString("undefined");if(!s||s==="false"){t=i.getFieldString("text")}}}if(t===undefined){t=r[e]}return t};i.prototype.setAttributes=function(t,e){var i=this,s={};$tw.utils.each(Object.keys(this.attr.map[e]),function(r){var a,h=i.attr.rename[r];if(!h){h=r}a=i.getValue(i.attr[e][r],r);if(h==="class"){a=["appear","appear-"+e,i.mode?"appear-"+i.mode:"",i.once?"appear-once":"",a||""].join(" ")}if(a!==undefined){if(h==="tag"){t.tag=a}else{s[h]={type:"string",value:a}}}});return s};i.prototype.checkHandler=function(t){var e,i={},s=this,r="$:/temp/appear-handlers/"+(this.handler||this.handle),a=this.wiki.getTiddler(r);if(a){i=JSON.parse(a.getFieldString("text")||"{}")}if(this.handler){e={type:"vars",children:[t],attributes:{}};$tw.utils.each((this.handlerVariables||"").split(" "),function(t){t=t.trim();if(t){e.attributes[t]={type:"string",value:(s.getVariable(t)||"").toString()}}});if(i[t.attributes.state.value]!==e){i[t.attributes.state.value]=e;s.wiki.setText(r,"text",undefined,JSON.stringify(i))}}return i};e.prototype.show=function(t){var e=t.domNode,i=(e.getAttribute("class")||"").indexOf("tc-popup-absolute")>=0,s=this.popupInfo(e),r=function(t){var e=0,i=0;do{i+=t.offsetTop||0;e+=t.offsetLeft||0;t=t.offsetParent}while(t);return{left:e,top:i}},a={left:e.offsetLeft,top:e.offsetTop};this.cancel(s.popupLevel);this.popups.push({title:t.title,wiki:t.wiki,domNode:e});a=i?r(e):a;t.wiki.setTextReference(t.title,"("+a.left+","+a.top+","+e.offsetWidth+","+e.offsetHeight+")");if(this.popups.length>0){this.rootElement.addEventListener("click",this,true)}};exports.appear=i})(); \ No newline at end of file diff --git a/plugins/tobibeer/appear/plugin.info b/plugins/tobibeer/appear/plugin.info index e20ba06..e99a72c 100644 --- a/plugins/tobibeer/appear/plugin.info +++ b/plugins/tobibeer/appear/plugin.info @@ -2,7 +2,7 @@ "title": "$:/plugins/tobibeer/appear", "description": "Create popups, sliders or accordion menus with the appear widget.", "author": "Tobias Beer", - "version": "0.5.4", + "version": "0.5.5", "core-version": ">=5.1.9", "source": "https://github.com/tobibeer/tw5-appear", "documentation": "https://tobibeer.github.io/tw5-appear", diff --git a/plugins/tobibeer/appear/styles.tid b/plugins/tobibeer/appear/styles.tid index 91153d4..193111e 100644 --- a/plugins/tobibeer/appear/styles.tid +++ b/plugins/tobibeer/appear/styles.tid @@ -13,9 +13,9 @@ tags: $:/tags/Stylesheet padding: 0 1em; background: <>; } -.tc-reveal.appear-inline{ +.appear-reveal.appear-inline{ margin-left:5px; } -.tc-reveal.appear-inline.appear-once{ +.appear-reveal.appear-inline.appear-once{ margin-left:0; } \ No newline at end of file diff --git a/src/appear.js b/src/appear.js index 1a0de39..50b9c3f 100644 --- a/src/appear.js +++ b/src/appear.js @@ -319,6 +319,7 @@ AppearWidget.prototype.setAttributes = function(node,element) { // Construct classes val = [ "appear", + "appear-" + element, (self.mode ? "appear-" + self.mode : ""), (self.once ? "appear-once" : ""), (val || "") diff --git a/src/plugin.info b/src/plugin.info index e20ba06..e99a72c 100644 --- a/src/plugin.info +++ b/src/plugin.info @@ -2,7 +2,7 @@ "title": "$:/plugins/tobibeer/appear", "description": "Create popups, sliders or accordion menus with the appear widget.", "author": "Tobias Beer", - "version": "0.5.4", + "version": "0.5.5", "core-version": ">=5.1.9", "source": "https://github.com/tobibeer/tw5-appear", "documentation": "https://tobibeer.github.io/tw5-appear", diff --git a/src/styles.tid b/src/styles.tid index 91153d4..193111e 100644 --- a/src/styles.tid +++ b/src/styles.tid @@ -13,9 +13,9 @@ tags: $:/tags/Stylesheet padding: 0 1em; background: <>; } -.tc-reveal.appear-inline{ +.appear-reveal.appear-inline{ margin-left:5px; } -.tc-reveal.appear-inline.appear-once{ +.appear-reveal.appear-inline.appear-once{ margin-left:0; } \ No newline at end of file