Re: Sagecell - issue with embedding

[Jason Grout]

Ccing the sage-notebook list, who I've been meaning to CC so that the
solution could be more widely disseminated.

For the notebook list: Florian asked about linking two cells together
that may have different properties (for example, one cell might be
read-only, but another one a normal cell). Currently, when linking two
cells together, they have to have exactly the same configuration.
However, you can use the callback to manually set up one of the cells if
you want. For example, here is a solution to making one sage cell readonly:

<script>
sagecell.makeSagecell({
inputLocation: 'div.compute',
linked:true,
evalButtonText: 'Evaluate',
callback: function() {
$('div.compute.readonly .CodeMirror').each(function() {
this.CodeMirror.options.readOnly='nocursor';})
}
});
</script>

<div class="readonly compute"><script type="text/x-sage">x=4</script></div>
<div class="compute"><script type="text/x-sage">print x</script></div>

The callback above will change the 'readonly' cell to have the input be
read only.

Okay, continuing below...


On 1/24/14 3:29 AM, Florian Gellert wrote:
> Hi again,
>> Hmmm...Do you have an example page somewhere on the internet?
> You can find a now working example at
> http://www.math.uni-bielefeld.de/~fgellert/test.php
>
> So the javascript-workaround does indeed do the job. Regarding these
> controls, could I extend the callback function by two additional
> options? What I have in mind is hiding the output and changing the label
> (evalButtonText) for the readonly option. Is this possible? Is there a
> reference where I can find such javascript controls myself?
>
> Thanks,
> Florian

The easiest thing to do at this point is (again) to write the javascript
to do that. I can see that it would be useful to be able to specify
separate options and then afterwards link separate controls together.
I'll put it on the list of things to look at; that would be a cleaner
solution. Thanks very much for explaining your use-case.

Here is the line that displays the output:
https://github.com/sagemath/sagecell/blob/master/static/embedded_sagecell.js#L571
(I found this by going into the Chrome debugger, finding the output
element, right-clicking and selecting "break on attribute modification",
then running the cell. Chrome stopped when the display was changed to
'block', and put me right at the javascript line that did it.)

So we just need to override that style-changing .show() call. One way
to do it (maybe; I haven't tested) is to use CSS with the !important
tag. In your CSS for the page, I think this might do the trick:

div.compute.readonly .sagecell_output_elements {
display: hidden !important;
}

You can also change the button text using the jquery .text() method.
That could be done in the callback like above (not tested...):

<script>
sagecell.makeSagecell({
inputLocation: 'div.compute',
linked:true,
evalButtonText: 'Evaluate',
callback: function() {
$('div.compute.readonly .CodeMirror').each(function() {
this.CodeMirror.options.readOnly='nocursor';});
// Here is the new line
$('div.compute.readonly button.sagecell_evalButton
.ui-button-text').text('NewEvaluateText');
}
});
</script>

Thanks,

Jason

[kcrisman]

On Friday, January 24, 2014 9:49:55 AM UTC-5, Jason Grout wrote:

Ccing the sage-notebook list, who I've been meaning to CC so that the
solution could be more widely disseminated.

\

Thanks for this.  I hope that your funds for the cell can include paying a student to turn all the many little tricks (like being able to set Codemirror options) into a handy-dandy document that is part of your documentation.