Commit 4cbc1904 authored by Tristan Cavelier's avatar Tristan Cavelier Committed by Sebastien Robin

Adding Spreadsheets to OfficeJS.

parent 7811ddcd
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<title>jQuery.sheet - The Web Based Spreadsheet</title>
<!--Required-->
<link rel="stylesheet" type="text/css"
href="lib/jquery.sheet/jquery.sheet.css" />
<link rel="stylesheet"
type="text/css"
href="lib/jquery.sheet/jquery-ui/theme/jquery-ui.css" />
<script type="text/javascript" src="lib/jquery/jquery.js">
</script>
<script type="text/javascript" src="lib/jquery.sheet/jquery.sheet.js">
</script>
<script type="text/javascript" src="lib/jquery.sheet/parser.js">
</script>
<!--/Required-->
<!--Optional-->
<!--ScrollTo-->
<script type="text/javascript"
src="lib/jquery.sheet/plugins/jquery.scrollTo-min.js"></script>
<!--/ScrollTo-->
<!--jQuery UI-->
<script type="text/javascript"
src="lib/jquery.sheet/jquery-ui/ui/jquery-ui.min.js"></script>
<!--/jQuery UI-->
<!--Raphaeljs - for charts-->
<script type="text/javascript"
src="lib/jquery.sheet/plugins/raphael-min.js"></script>
<script type="text/javascript"
src="lib/jquery.sheet/plugins/g.raphael-min.js"></script>
<!--/Raphaeljs-->
<!--ColorPicker-->
<link rel="stylesheet"
type="text/css"
href="lib/jquery.sheet/plugins/jquery.colorPicker.css" />
<script type="text/javascript"
src="lib/jquery.sheet/plugins/jquery.colorPicker.min.js"></script>
<!--/ColorPicker-->
<!--Theme Switcher Tool-->
<!--<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/"></script>-->
<!--/Theme Switcher Tool-->
<!--Elastic-->
<script type="text/javascript"
src="lib/jquery.sheet/plugins/jquery.elastic.min.js"></script>
<!--/Elastic-->
<!--Advanced_Math-->
<script type="text/javascript"
src="lib/jquery.sheet/jquery.sheet.advancedfn.js"></script>
<!--/Advanced_Math-->
<!--Finance-->
<script type="text/javascript"
src="lib/jquery.sheet/jquery.sheet.financefn.js"></script>
<!--/Finance-->
<!--/Optional-->
<script type="text/javascript">
<!--
$(function(){
//Here is where we initiate the sheets
//every time sheet is created it creates a new jQuery.sheet.instance (array), to manipulate each sheet, the jQuery object is returned
$('#jQuerySheet0').sheet({
title: '',
inlineMenu: inlineMenu($.sheet.instance),
urlGet: 'component/newspreadsheet.html',
autoFiller: true
});
//examples of how to use jQuery.sheet
/*
//Inline sheet(s), non-editable (like a gridview)
$('.jQuerySheet').sheet({
title: 'jQuery.sheet - The Web Based Spreadsheet Demo',
buildSheet: true, //will turn object #jQuerySheet's child tables into sheets
editable: false,
calcOff: true
});
//New single custom sized sheet
$('#jQuerySheet').sheet({
title: 'jQuery.sheet - The Web Based Spreadsheet Demo',
inlineMenu: inlineMenu(jQuery.sheet.instance),
buildSheet: '5x100'
});
//Custom object sheet(s)
$('#jQuerySheet').sheet({
title: 'jQuery.sheet - The Web Based Spreadsheet Demo',
inlineMenu: inlineMenu(jQuery.sheet.instance),
buildSheet: $('#jQuerySheet').find('table')
});
//Custom object sheet(s)
$('#jQuerySheet').sheet({
title: 'jQuery.sheet - The Web Based Spreadsheet Demo',
inlineMenu: inlineMenu(jQuery.sheet.instance),
buildSheet: $.sheet.makeTable.fromSize('5x100').add($.sheet.makeTable.fromSize('5x100'))
});
*/
//This is to give a themeswitcher on the page
//$('#themeSwitcher').themeswitcher();
//This is for some fancy menu stuff
var o = $('#structures');
var top = o.offset().top - 300;
$(document).scroll(function(e){
if ($(this).scrollTop() > top) {
$('#lockedMenu').removeClass('locked');
}
else {
$('#lockedMenu').addClass('locked');
}
}).scroll();
});
//This function builds the inline menu to make it easy to interact with each sheet instance
function inlineMenu(I){
I = (I ? I.length : 0);
//we want to be able to edit the html for the menu to make them multi
//instance
var html = $('#inlineMenu').html().
replace(/sheetInstance/g,
"$.sheet.instance[" + I + "]");
var menu = $(html);
//The following is just so you get an idea of how to style cells
menu.find('.colorPickerCell').colorPicker().change(function(){
$.sheet.instance[I].cellChangeStyle('background-color', $(this).val());
});
menu.find('.colorPickerFont').colorPicker().change(function(){
$.sheet.instance[I].cellChangeStyle('color', $(this).val());
});
menu.find('.colorPickers').children().eq(1).
css('background-image',
"url('lib/jquery.sheet/images/palette.png')");
menu.find('.colorPickers').children().eq(3).
css('background-image',
"url('lib/jquery.sheet/images/palette_bg.png')");
return menu;
}
function goToObj(s){
$('html, body').animate({
scrollTop: $(s).offset().top
}, 'slow');
return false;
}
//-->
</script>
<!--Page styles-->
<style>
.wrapper {
margin: 10px;
background-color: #CCCCCC;
}
.locked {
position: fixed;
top: expression(eval(document.body.scrollTop) + "px");
left:
20px;
z-index:
100;
}
#lockedMenu * {
font-size: .85em ! important;
}
#structures {
text-align: left;
font-size: 1.5em;
padding: 10px;
border: none;
}
#header {
text-align: left;
font-size: 1.5em;
padding: 18px;
border: none;
padding-left: 150px;
}
#footer {
text-align: center;
color: white;
font-size: .9em;
}
#footer a {
font-size: 1.2em;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="jQuerySheet0" class="jQuerySheet" style="height: 450px;">
</div>
<span id="inlineMenu" style="display: none;">
<span>
<a href="#"
onclick="sheetInstance.controlFactory.addRow(); return false;"
title="Insert Row After Selected">
<img alt="Insert Row After Selected" src="lib/jquery.sheet/images/sheet_row_add.png"/>
</a>
<a href="#"
onclick="sheetInstance.controlFactory.addRow(null, true);
return false;"
title="Insert Row Before Selected">
<img alt="Insert Row Before Selected"
src="lib/jquery.sheet/images/sheet_row_add.png"/>
</a>
<a href="#"
onclick="sheetInstance.controlFactory.addRow(null, null, ':last');
return false;"
title="Add Row At End">
<img alt="Add Row" src="lib/jquery.sheet/images/sheet_row_add.png"/>
</a>
<a href="#"
onclick="sheetInstance.controlFactory.addRowMulti();
return false;"
title="Add Multi-Rows">
<img alt="Add Multi-Rows"
src="lib/jquery.sheet/images/sheet_row_add_multi.png"/>
</a>
<a href="#"
onclick="sheetInstance.deleteRow(); return false;"
title="Delete Row">
<img alt="Delete Row" src="lib/jquery.sheet/images/sheet_row_delete.png"/>
</a>
<a href="#"
onclick="sheetInstance.controlFactory.addColumn(); return false;"
title="Insert Column After Selected">
<img alt="Insert Column After Selected"
src="lib/jquery.sheet/images/sheet_col_add.png"/>
</a>
<a href="#"
onclick="sheetInstance.controlFactory.addColumn(null, true);
return false;"
title="Insert Column Before Selected">
<img alt="Insert Column Before Selected"
src="lib/jquery.sheet/images/sheet_col_add.png"/>
</a>
<a href="#"
onclick="sheetInstance.controlFactory.
addColumn(null, null, ':last');
return false;"
title="Add Column At End">
<img alt="Add Column At End" src="lib/jquery.sheet/images/sheet_col_add.png"/>
</a>
<a href="#"
onclick="sheetInstance.controlFactory.addColumnMulti();
return false;"
title="Insert Multi-Columns">
<img alt="Add Multi-Columns"
src="lib/jquery.sheet/images/sheet_col_add_multi.png"/>
</a>
<a href="#"
onclick="sheetInstance.deleteColumn();
return false;"
title="Delete Column">
<img alt="Delete Column" src="lib/jquery.sheet/images/sheet_col_delete.png"/>
</a>
<a href="#"
onclick="sheetInstance.getTdRange(
null, sheetInstance.obj.formula().val());
return false;"
title="Get Cell Range">
<img alt="Get Cell Range" src="lib/jquery.sheet/images/sheet_get_range.png"/>
</a>
<a href="#"
onclick="sheetInstance.s.fnSave();
return false;"
title="Save Sheets">
<img alt="Save Sheet" src="lib/jquery.sheet/images/disk.png"/></a>
<a href="#"
onclick="sheetInstance.deleteSheet(); return false;"
title="Delete Current Sheet">
<img alt="Delete Current Sheet" src="lib/jquery.sheet/images/table_delete.png"/>
</a>
<a href="#"
onclick="sheetInstance.calc(sheetInstance.i);
return false;"
title="Refresh Calculations">
<img alt="Refresh Calculations" src="lib/jquery.sheet/images/arrow_refresh.png"/>
</a>
<a href="#"
onclick="sheetInstance.cellFind();
return false;"
title="Find">
<img alt="Find" src="lib/jquery.sheet/images/find.png"/>
</a>
<a href="#"
onclick="sheetInstance.cellStyleToggle('styleBold');
return false;"
title="Bold">
<img alt="Bold" src="lib/jquery.sheet/images/text_bold.png"/>
</a>
<a href="#"
onclick="sheetInstance.cellStyleToggle('styleItalics');
return false;"
title="Italic">
<img alt="Italic" src="lib/jquery.sheet/images/text_italic.png"/>
</a>
<a href="#"
onclick="sheetInstance.cellStyleToggle('styleUnderline',
'styleLineThrough'); return false;"
title="Underline">
<img alt="Underline" src="lib/jquery.sheet/images/text_underline.png"/>
</a>
<a href="#"
onclick="sheetInstance.cellStyleToggle('styleLineThrough',
'styleUnderline'); return false;"
title="Strikethrough">
<img alt="Strikethrough" src="lib/jquery.sheet/images/text_strikethrough.png"/>
</a>
<a href="#"
onclick="sheetInstance.cellStyleToggle('styleLeft',
'styleCenter styleRight'); return false;"
title="Align Left">
<img alt="Align Left" src="lib/jquery.sheet/images/text_align_left.png"/>
</a>
<a href="#"
onclick="sheetInstance.cellStyleToggle('styleCenter',
'styleLeft styleRight'); return false;"
title="Align Center">
<img alt="Align Center" src="lib/jquery.sheet/images/text_align_center.png"/>
</a>
<a href="#"
onclick="sheetInstance.cellStyleToggle('styleRight',
'styleLeft styleCenter'); return false;"
title="Align Right">
<img alt="Align Right" src="lib/jquery.sheet/images/text_align_right.png"/>
</a>
<a href="#"
onclick="sheetInstance.fillUpOrDown(); return false;"
title="Fill Down">
<img alt="Fill Down" src="lib/jquery.sheet/images/arrow_down.png"/>
</a>
<a href="#"
onclick="sheetInstance.fillUpOrDown(true); return false;"
title="Fill Up">
<img alt="Fill Up" src="lib/jquery.sheet/images/arrow_up.png"/>
</a>
<span class="colorPickers">
<input title="Foreground color"
class="colorPickerFont"
style="background-image: url('lib/jquery.sheet/images/palette.png') ! important;
width: 16px; height: 16px;"/>
<input title="Background Color"
class="colorPickerCell"
style="background-image: url('lib/jquery.sheet/images/palette_bg.png') ! important;
width: 16px; height: 16px;"/>
</span>
<a href="#"
onclick="sheetInstance.obj.formula().val('=HYPERLINK(\'' + prompt('Enter Web Address', 'http://www.visop-dev.com/') + '\')').keydown(); return false;"
title="HyperLink">
<img alt="Web Link" src="lib/jquery.sheet/images/page_link.png"/>
</a>
<a href="#"
onclick="sheetInstance.toggleFullScreen();
$('#lockedMenu').toggle(); return false;"
title="Toggle Full Screen">
<img alt="Web Link" src="lib/jquery.sheet/images/arrow_out.png"/>
</a>
<!-- <a href="#" -->
<!-- onclick="insertAt('jSheetControls_formula', -->
<!-- '~np~text~'+'/np~');return false;" -->
<!-- title="Non-parsed"> -->
<!-- <img alt="Non-parsed" src="lib/jquery.sheet/images/noparse.png"/> -->
<!-- </a> -->
</span>
</span>
</body>
</html>
......@@ -19,7 +19,7 @@
OfficeJS.open({app:'textEditor'});
return false;">
<i class="icon-font"></i>
Writer
New Text Document
</a>
</li>
<li class="imgeditor">
......@@ -28,7 +28,7 @@
OfficeJS.open({app:'imgEditor'});
return false;">
<i class="icon-pencil"></i>
Image Editor
New Image
</a>
</li>
<li class="spreadsheet">
......@@ -37,7 +37,7 @@
OfficeJS.open({app:'speadsheet'});
return false;">
<i class="icon-signal"></i>
Spreadsheet
New Spreadsheet
</a>
</li>
<li class="editpreferences">
......
<TABLE title="Spreadsheet 1"
class="jSheet ui-widget-content"
border="1px"
cellpadding="0"
cellspacing="0">
<TBODY>
<TR height="18" style="height: 18px;">
<TD id="0_table0_cell_c0_r0" class=""></TD>
<TD id="0_table0_cell_c1_r0" class=""></TD>
<TD id="0_table0_cell_c2_r0" class=""></TD>
<TD id="0_table0_cell_c3_r0" class=""></TD>
<TD id="0_table0_cell_c4_r0" class=""></TD>
<TD id="0_table0_cell_c5_r0" class=""></TD>
</TR>
<TR height="18" style="height: 18px;">
<TD id="0_table0_cell_c0_r1" class=""></TD>
<TD id="0_table0_cell_c1_r1" class=""></TD>
<TD id="0_table0_cell_c2_r1" class=""></TD>
<TD id="0_table0_cell_c3_r1" class=""></TD>
<TD id="0_table0_cell_c4_r1" class=""></TD>
<TD id="0_table0_cell_c5_r1" class=""></TD>
</TR>
<TR height="18" style="height: 18px;">
<TD id="0_table0_cell_c0_r2" class=""></TD>
<TD id="0_table0_cell_c1_r2" class=""></TD>
<TD id="0_table0_cell_c2_r2" class=""></TD>
<TD id="0_table0_cell_c3_r2" class=""></TD>
<TD id="0_table0_cell_c4_r2" class=""></TD>
<TD id="0_table0_cell_c5_r2" class=""></TD>
</TR>
<TR height="18" style="height: 18px;">
<TD id="0_table0_cell_c0_r3" class=""></TD>
<TD id="0_table0_cell_c1_r3" class=""></TD>
<TD id="0_table0_cell_c2_r3" class=""></TD>
<TD id="0_table0_cell_c3_r3" class=""></TD>
<TD id="0_table0_cell_c4_r3" class=""></TD>
<TD id="0_table0_cell_c5_r3" class=""></TD>
</TR>
</TBODY>
</TABLE>
<div>
Test
</div>
<div id="texteditor_field"></div>
<script type="text/javascript">
<!--
TabbularGadget.addNewTabGadget(
'component/'+OfficeJS.getPreference('textEditor')+'.html',
'texteditor_field');
//-->
</script>
......@@ -17,7 +17,9 @@
leftnavbar:'leftnavbar',
documentLister:'slickgrid',
editpreferences:'simplepreferenceeditor',
textEditor:'elrte'
textEditor:'elrte',
imgEditor:'svg-edit',
speadsheet:'jquery-sheet'
};
priv.app_object = {
topnavbar: {
......@@ -71,6 +73,16 @@
}
// TODO : onunload, are you sure? leave without saving?
},
'jquery-sheet': {
type:'editor',
path:'component/jquery-sheet.html',
gadgetid:'page-content'
},
'svg-edit': {
type:'editor',
path:'component/svg-edit.html',
gadgetid:'page-content'
},
slickgrid: {
type:'editor',
path:'component/slickgrid_document_lister.html',
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment