I've started using famo.us for a meteor app, and Famo.us seems to not "play nice"
it takes over the main rendering of the app such that normal scrolling and other html like behavior is lost.
I disabled the famous.css but it seems deeper inside famo.us javascript, or maybe the shims. I was wondering if anyone can comment on a way to toggle famous?
for example it maybe great to use famo.us for a flashy topmenu, but then the internals of a site with texty views you don't want the interference. An example of an "all famous" site is their own university, where many docs pages would be more usable as plain html, just like Flash had its place.
tips appreciated!
Just like you mentioned, most technology has it's place. It's about finding the right tool for the right job. You are correct that the documentation on the site feels a little strange, but it could have been done better with either technology. Famo.us will stand out for building apps that look like desktop/mobile apps, and not apps that look like webpages. It will also be a wonderful choice for games.
Though I have little familiarity with how meteor rendering works, The ideas around using Famo.us for what you may need should be the same. The most important thing not to do in Famo.us is to battle the Context object. Battling is never good. I threw together a quick example that brought back the default browser scrollbars. You simply use a single surface as your 'body-wrapper' div, and set it's overflow property to scroll. Then inject the rest of the HTML into that surface.
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var context = Engine.createContext();
var context_size = context.getSize();
lorem = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\nproident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
content = "<div style='overflow:scroll;width:100%;height:100%'><div style='width:100%;height:200%;background-color:#aaffaa;font-size:72px;line-height:72px'>" + lorem + "</div></div>";
surface = new Surface({
size: context_size,
content: content
});
context.add(surface);
There are few other ways you could incorporate Famo.us elements into webpages. Similar to how Facebook widgets work, you could simply use an iframe.. This goes either way. You could host a Famo.us widget and inject it into an HTML website, or you could inject an html document into a Famo.us app.
Also remember Famo.us is still just a baby. They want to hear your feedback. I assume there will be a lot on using Famo.us for more fluid layouts similar to those that can be achieved with the box-model.
I hope some of this helped!
Good Luck!
Partial duplicate of How do Meteor's blaze and Famo.us play together? My answer from there:
I just released a preview of famous-components, which is an attempt at a tight integration between Blaze and Famous. All the other approaches I've seen so far side step most of Blaze, and require writing large amounts of code in JavaScript, which felt very unnatural to me in Meteor. Meteor code should be small, concise and easy with powerful results. Here are a few examples of what it looks like: (each template forms a renderNode, any HTML gets put on a Surface. Modifiers/views/options are specified as a component attributes)
<template name="test">
{{#Surface size=reactiveSizeHelper}}
<p>hello there</p>
{{/Surface}}
{{#if loggedIn}}
{{>SequentialView direction="X" template='userBar' translate="[0,50]"}}
{{else}}
{{>Surface template='pleaseLogIn' origin="[0.5,0.5]"}}
{{/if}}
</template>
Scrollview (can be split into sub templates):
<template name="famousInit">
{{#Scrollview size="[undefined,undefined]" items=items}}
{{#famousEach items}}
{{#Surface size="[undefined,100]"}} {{name}} {{/Surface}}
{{/famousEach}}
{{/Scrollview}}
</template>
Template.famousInit.items = function() { return Items.find() };
Events:
Template.blockSpring.events({
'click': function(event, tpl) {
var fview = FView.dataFromTemplate(tpl);
fview.modifier.setTransform(
Transform.translate(Math.random()*500,Math.random()*300),
springTransition
);
}
});
It also works out the box with iron-router. Live demo with sample code:
http://famous-views.meteor.com/
Regarding scrolling, etc, as per johntraver's answer, you can change the CSS overflow property to scroll to get the scroll bars backs, and for everything inside that, use Meteor templates as usual. The package doesn't get in the way of Meteor's templates at all but rather just gives some extra helpers for declaring surfaces, views, etc from inside templates (e.g. a Scrollview for lists, which could run over a Meteor-coded infinite scrolling mechanism with no extra work).
There's a plugin on Atmosphere that should help you with Famo.us and Meteor integration: it is called famono.
And there is this nice video on Youtube explaining some rational with a bit of codes that should also help you a lot:
https://www.youtube.com/watch?feature=player_embedded&v=bmd-cXSGQAA
As you are, I'm in the plain middle of checking if Famo.us will suite my needs with Meteor. I'll post my progression on my blog: http://pem-musing.blogspot.fr/
Previewing [Famous-Components with Meteor] (https://atmospherejs.com/package/famous-components) and so far its helped me reduce the CSS I would have to write.
But can it set surface properties like below?
var firstSurface = new Surface({
content: 'hello world',
properties: {
color: 'white',
textAlign: 'center',
backgroundColor: '#FA5C4F'
}
});
or
firstSurface.setproperties({color: 'red'})
Related
We are developing a multimedia dictionary system. The idea is that, if you're on a webpage, and there's a word you don't know, you double-click on a word and a dictionary pops up.
The dictionary differs from google's dictionary for chrome, in that is contains multimedia, is multilingual, and it contains supplemental info beyond the mere meaning of the word.
Our problem is this: we can't possibly define all the words on every page in the web in our database. That means that many words on a page might not be defined. Rather than having users double-click a word to see if there's a definition, we want to check against our database which words on the page are defined as the page is loading. We then want to highlight the defined words on the webpage, so readers can see which words are defined.
We've got the pop-up mostly working the way we want it. The challenge is that it has to work on webpages where we aren't the page owners (such as when we develop our system as a browser extension), meaning we can't do
<span class="dict">consetetur</span>
Here's what we've done so far - only works in Chrome: gwizz demo page. Click through the security, the server is not yet secure.
On our page, most of the words are defined, so you can double-click any word, and it will display the pop-up. On most pages, however, there will be many words not defined in the database. Readers will eventually get frustrated if they click on too many words with no definition in the database. That's what we want to avoid by signalling the words which are defined.
In my mind, that would require starting at the top of the page, and testing every word against the database, and if it is defined, to hgihlight the word in another colour, for example, and then testing the next word. That sounds to me as if it will be a fairly slow process. I was wondering if there would be a faster way?
You should use AJAX for this, it's pretty simple
So that you wrap any word in a tag like that
Lorem ipsum dolor sit amet, <span class="dict">consetetur</span> sadipscing elitr.
For easier AJAX you can use jQuery, it's the most used library for this, so it would look like:
$('span.dict').bind('click', function() {
$.ajax("lookup.php", {
data: {word: $(this).text()}, // the word 'consetetur' in this example
success: function(data) {
/* show your popup - data contains here the content of lookup.php
you can use something like bootstrap modals or sweetalert for this
*/
},
error: function(error) {
alert('Error:\n' + JSON.stringify(error));
// always handle your ajax errors!
}
});
});
And your lookup.php should be very simple too:
<?php
/* setup the database connection*/
$word = $_POST['word'];
$result = $db->query("SELECT text FROM dict WHERE word = '$word' );
echo $result;
Remember, this is example code! Not safe, not tested. But it shows how to solve your problem :)
In a default SS3 setup, the CMS fields are placed in tab Root.Main. However, I wish to create two new tabs Main Content and Form so that the default CMS fields will be in Root.Main.MainContent.
I took a look at SiteTree.php to see how the fields are placed into the tab. It seems quite difficult to get between there.
Q: How to move default cms fields from Root.Main into Root.Main.MainContent?
In 3.3.2, the default fields are automatically placed into a tab named Main Content. This Main Content tab is actually the Root.Main tab referenced in code. If the Main Content tab is the only tab then it is hidden since there is not much use to having only one tab.
To do you what you want simply create your fields and then add them to the new Form tab:
$myNewField = new LiteralField("Lipsum","Ipsum dolor sit amet enim.");
$fields->addFieldToTab('Root.Form', $myNewField );
AlphaCactus' answer should be what you want, but if you want to create a third level tabset, you can use code similar to:
$fields->addFieldsToTab('Root.Main', Tabset::create('MainTabset',
Tab::create('MainContent',
TextField::create('Field1'),
TextField::create('Field2')
),
Tab::create('Form',
TextField::create('Field3'),
TextField::create('Field4')
)
));
I am currently using Meteor 0.9.2.2. I am trying to better understand how to build a form in Meteor + Famous without having to put each form element into a Famous surface.
I am using the "gadicohen:famous-views 0.1.7" and "mjnetworks:famous 0.2.2 "
I am using https://github.com/gadicc/meteor-famous-views and have looked at some of the samples of events. I can generate events on the view but seems to have lost the ability to generate events using Jquery (probably Famous alarm bells going off) for fields on the template.
(Note I fid try following What is a recommended way to get data into your meteor template from the front-end for a famous surface? but that just directed me to the examples I am following - sorry still stuck)
For example, if I wanted to have a "blur" event when a contenteditable field changed and used that to update the database, I am not sure how I do it.
BTW, I am bringing in the template via Iron-router:
this.route('someTemplate', {
path: '/',
});
Here's some sample of code of what I have been playing around with:
<template name="someTemplate">
{{#Scrollview target="content" size="[undefined,100]"}}
{{#Surface class="green-bg"}}
<h4 id="main-edit-title" class="editable" data-fieldname="title" data-resourceid="{{_id}}" contenteditable=true>Heading</h4>
<p id="main-edit-message" class="mediumEditable editable" data-fieldname="message" data-resourceid="{{_id}}" contenteditable=true>Summary</p>
{{/Surface}}
{{/Scrollview}}
</template>
Template.someTemplate.events({
'blur .editable': function (e) {
e.preventDefault();
//e.stopPropagation();
var item = $(e.currentTarget);
DO SOME UPDATE STUFF TO THE DATABASE
item.removeClass('resourceUpdated');
},
});
I looked at the 'famousEvents' too and could not seem to get that working. Ie no events fired and that would only be at the surface level, not the field level.
At the view level I was fine and code below worked fine:
Template.someTemplate.rendered = function() {
var fview = FView.from(this);
var target = fview.surface || fview.view._eventInput;
target.on('click', function() {
clickeyStuff(fview);
});
}
I tried the other variants from this page: https://famous-views.meteor.com/examples/events
So the core questions, I think, is: Do I have to move every form element to a Famous Surface? This would be a killer. I am hoping I can still use Jquery or access the DOM for stuff within the template. Note I do see stuff in the Famous FAQ http://famo.us/guides/pitfalls that says don't touch the DOM... so happy to find out how else I should be doing this???
I tried to make this clearer on the events example page, but I guess I'm still not there yet. I'll answer below but please feel free to chime in with how I can improve the documentation.
Inside of a Surface is basically regular Meteor. But outside of a Surface is the realm of famous-views. So you need to have a Meteor template inside of a Surface for events to attach themselves properly - and, as noted in the docs - that template needs to have at least one element in side of it to attach the events. So either (and in both cases, renaming the outer template wrapper but leaving Template.someTemplate.events as is):
<template name="someTemplateWrapper">
{{#Scrollview target="content" size="[undefined,100]"}}
{{#Surface class="green-bg"}}
{{> someTemplate}}
{{/Surface}}
{{/Scrollview}}
</template>
or simply:
<template name="someTemplateWrapper">
{{#Scrollview target="content" size="[undefined,100]"}}
{{>Surface template="someTemplate" class="green-bg"}}
{{/Scrollview}}
</template>
and then move all the Meteor stuff that needs events to it's own template where the events are handled:
<template name="someTemplate">
<h4 id="main-edit-title" class="editable" data-fieldname="title" data-resourceid="{{_id}}" contenteditable=true>Heading</h4>
<p id="main-edit-message" class="mediumEditable editable" data-fieldname="message" data-resourceid="{{_id}}" contenteditable=true>Summary</p>
</template>
Hope that makes sense, just rushing out... let me know if anything is not clear and I'll ammend the answer later.
I was wondering if anyone has came up with a good solution for footnotes.
I'm looking to implement footnotes within Tridion on a page that has multiple components and I want all footnotes to display at the bottom of the page with the correct footnote numbers that was generarted in the content section as well.
http://i.stack.imgur.com/dAxeh.png
In the content
"orem ipsum dolor sit amet, consectetur*1* adipiscing elit. Vivamus blandit, ligula pharetra laoreet porta, nibh augue*2* fringilla tellus, et aliquet quam lacus mattis risus. Praesent rutrum, leo eu ornare sagittis, tellus ante blandit arcu."
End of the page
1 footnote info
For example user will create component with content and that component will have component links to footnote component and at publish time it should collects all footnotes and render. It should match the numbers that are placed in the content itself.
Thanks
One option could be using the linking which supports anchor tridion:anchor linking, also anchor linking is OOTB available from Tridion RTF.
Documentation around anchor links:
http://sdllivecontent.sdl.com/LiveContent/content/en-US/SDL_Tridion_2011_SPONE/task_INSHYP2DDAFF2CF95E4430AA0F27AD7A91B5F8
http://sdllivecontent.sdl.com/LiveContent/content/en-US/SDL_Tridion_2011_SPONE/idheading-359728360
Other option, could be writing a custom TBB which process at the end of you page and generate the anchor tags. This approach may not work well if you have dynamic CTs as you could publish them independently.
If you are able to rely on JavaScript being available, that might be the most straightforward way to tackle this. You could simply publish the footnotes "in-line" in hidden elements, and compose the desired output in the browser.
If you want to do it in Tridion, I would suggest that your page template might first render the component presentations normally, and then render the relevant components again using a "Footnotes" component template. The hardest part would be to get the numbers correct, but you could do this by ensuring that each run through the components treats them in the order they are in the page, and then managing counters using context variables.
The standard context variable technique won't work in this scenario, as you're relying on one component render being able to 'inform' the next one where it's up to. (And then of course, repeating the whole thing for the footnotes). I've written a simple illustration of a technique to get round this over at Tridion Practice. This should point the way, but I imagine your implementation will need to be rather more complex.
EDIT: My answer assumes that your footnote data is in the same component as the text it refers to, but on re-reading your question, I see that you have separate components. Still - some of the technique may still apply.
Depending on your implementation model (static/dynamic/hybrid) you could also choose to generate these at render time using custom controls:
Lorem ipsum dolor sit amet, consectetur<dominic:FootNote>Footnote text goes here</dominic:FootNote> adipiscing elit.
Vivamus blandit, ligula pharetra laoreet porta, nibh augue<dominic:FootNote>Footnote text goes here</dominic:FootNote> fringilla tellus,
et aliquet quam lacus mattis risus. Praesent rutrum, leo eu ornare sagittis, tellus ante blandit arcu.
End of page you would use a FootnoteContainer:
<dominic:FootNoteContainer />
FootNote controls would assign themselves an autoincrement number and render as
<sup>number</sup>
or whatever you would prefer as the presentation form of a footnote link.
The container would then find all of the FootNote controls on the page and write out the inner text of each FootNote in a list:
<ul>
<li>number 1 footnote info</li>
<li>...</li>
</ul>
or a similar presentation form.
Advantage of this approach is that it would not rely on the component presentations being static and it would greatly simplify your templated solution. Disadvantage would obviously be that you're sacrificing some request performance...
We have an asp app on which people can take tests. On the test page, there is an asp control that shows the time remaining. When you right click that control, the javascript that provides the time is interrupted. To solve that, we disabled right-clicking. But now i've noticed that if you do a selection of some text and click the IE8 accelerator blue button, the javascript is also interrupted. Disabling the left-click is of course no option.
I've found an option in IE that disables the accelerator, so for us internally, the issue is solved. But we would like to find another solution, just because we cannot ask every one of our users to go disable that option on all their computers.
We prefer a solution that we integrate a fix in our code, so that the issue is resolved with an upgrade of our program. So if anyone knows if and how it is possible to disable/bypass/... Ie accelerator...
Thanks in advance.
Edit
Working with both a timer on the server and one on the client raises a new problem : where will you draw the line between the time difference on the server and the client. Anyway, this problem has not occured so far, so i guess people are too busy concentrating on the test then on finding a way to break down our system.
Edit 2
I tried using the method with onSelectStart, but no luck. This is my test html:
<html xmlns="http://www.w3.org/1999/xhtml" >
<SCRIPT LANGUAGE="JavaScript">
function showObj() {
//alert('?');
return false;
}
</SCRIPT>
<head>
<title>Untitled Page</title>
</head>
<body onSelectStart="showObj()">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</body>
If you are using a completely client-based timer to actually validate that people submit something in a certain time, cheating will always be possible. Someone can just drop a script on top of your page that kills the timer entirely, no matter what you do.
Seems that you should be using a server clock. If some customer does something that breaks an onscreen timer, well, there's nothing you can do about that. But as long as you validate the time on the server when people submit an answer, it will always be accurate.
Check out this post:
Disabling IE8 accelerators for an entire site
#EricLaw says no, you can't disable them for a site.
#mbenny says that you can mark content as contentEditable or unselectable
Same as validation, never trust data that comes from the client. What you really should be doing is recording, on the server side, the time that the test started, and then the time that the test was submitted. The clock on the user side should only be a nicety, but not relied upon, as there's no way to guarantee that it's accurate (for half a dozens reasons posted above).
The nearly fault-proof way is the user something on the server-side that is not in any way known of, interacted with, or modifiable by the end user.
The solution is to disable the ability to select text. It doesn't sound like copy+paste is going to be necessary in the environment you're working in.
In most browsers, this is done using CSS: user-select: none; (with browser prefixes as applicable).
However, this CSS isn't available in IE (I'm not sure about IE9 though, so it may be worth including anyway), and since you're specifically asking about IE, you need an alternative solution. Fortunately, IE does provide one:
<div unselectable="on">...</div>
Unfortunately, the attribute isn't inherited, so you'll need to specify it on every element that contains text. (or you could write a Javascript or JQuery function that applies it to every element once the page has loaded)
Finally, and possibly the best option: There's also a onselectstart method which can be tied to an element. Something like this would disable text selection: onselectstart = function(){ return false; }. Even better, that should be inherited by child tags, so you could just put it on your <body> tag and be done with it.