Commit 2db0dac89c62c0896c1e4ec24ae91c31ec9586aa

Ajay kulkarni <ajaykools @gm…l.com>
Tue May 08 17:20:42 IST 2012

Tree SHA1: 036af6a
Parent SHA1: 756a43b (Merge pull request #80 from arvindkhadri/master)
raw diff | raw patch

Used media query and icons for buttons

Diff rendering mode:
inline
side by side


65	65	root.body.append(style)
66	66	style.set("rel","stylesheet")
67	67	style.set("type", "text/css")
	68	style.set("media", "screen")
68	69	style.set("href", conf.APPURL[0] + "/server/stylesheet.css")
69	70
70	71	jit_script = root.makeelement('script')


1		.alipi {
2		font-weight:normal;
3		font-size:100%;
4		}
	1	@media screen and (max-width:1400px) {
5	2
6		#targetoverlay .alipi {
7		font-size:15px;
8		font-weight:bold;
9		}
	3	.alipi { font-weight:normal; font-size:100%; }
10	4
11		#renarrated_overlay {
12		position:fixed;
13		clear:both;
14		width:99%;
15		left:0.5%;
16		text-align:center;
17		z-index:2147483645;
18		display:block;
19		}
	5	#renarrated_overlay { position:fixed; left:0.5%; width:99%; text-align:center; z-index:2147483645; display:block; }
	6	#renarrated_overlay .ui-button { text-align:justify; }
20	7
21		#edit-current, #see-narration, #see-links, #go, #share {
22		display:none;
23		}
	8	#edit-current { display:none; }
	9	#see-narration { display:none; }
	10	#see-links { display:none; }
	11	#go { -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; -khtml-border-bottom-left-radius:0px;
	12	border-bottom-left-radius:0px; -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; -khtml-border-top-left-radius:0px;
	13	border-top-left-radius:0px; display:none; }
	14	#share { display:none; }
24	15
25		#blog-filter {
26		min-width:200px;
27		max-width:200px;
28		}
	16	#blog-filter { right:-3px; min-width:225px; max-width:225px; height:42px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px;
	17	-khtml-border-bottom-right-radius:0px; border-bottom-right-radius:0px; -moz-border-radius-topright:0px;
	18	-webkit-border-top-right-radius:0px; -khtml-border-top-right-radius:0px; border-top-right-radius:0px; display:none; }
29	19
30		#renarrated_overlay .ui-button{
31		height:25px;
32		text-align:justify;
33		padding:0.1em 0.8em 0.2em 0.8em;
34		font-weight:normal;
35		}
	20	#outter-down-button { display:none; }
	21	#outter-up-button { display:none; }
36	22
37		#outter-down-button, #outter-up-button {
38		display:none;
39		}
	23	#icon-down { display:none; }
	24	#icon-up { display:none; }
40	25
41		#icon_on_overlay {
42		display:none;
43		position:fixed;
44		left:10px;
45		min-width:100px;
46		max-width:120px;
47		text-align:center;
48		z-index:2147483645;
49		}
50		#icon_on_overlay .ui-button {
51		height:25px;
52		text-align:justify;
53		padding:0.1em 0.8em 0.1em 0.8em;
54		font-weight:normal;
55		}
	26	#pub_overlay { position:fixed; left:10%; width:80%; text-align:center; z-index:2147483645; display:none; }
	27	#pub_overlay .ui-button { margin-left:10px; text-align:justify; font-weight:normal; }
56	28
57		#icon-down, #icon-up {
58		display:none;
59		}
	29	#element_edit_overlay { position:fixed; text-align:center; z-index:2147483645; display:none; }
60	30
61		#pub_overlay {
62		display:none;
63		position:fixed;
64		left:150px;
65		min-width:200px;
66		width:40%;
67		text-align:center;
68		z-index:2147483645;
69		}
	31	#edit-text { text-align:justify; font-weight:bold; font-size:100%; display:none; }
	32	#add-audio { text-align:justify; font-weight:bold; font-size:100%; display:none; }
	33	#replace-image { text-align:justify; font-weight:bold; font-size:100%; display:none; }
	34	#delete-image { text-align:justify; font-weight:bold; font-size:100%; display:none; }
	35	#close-element { position:absolute; top:-5px; left:-2px; width:10px; font-size:100%; }
	36	#cant-edit { width: 450px; margin:15px; font-size:100%; display:none; }
70	37
71		#exit-mode, #help-window, #undo-button, #publish-button {
72		/* display:none; */
73		}
	38	#editoroverlay { min-width:90%; display: none; }
	39	#editoroverlay a { color:#1C94C4; }
74	40
75		#pub_overlay .ui-button {
76		height:25px;
77		text-align:justify;
78		padding:0.1em 0.8em 0.2em 0.8em;
79		font-weight:normal;
80		}
	41	#adv-reference { position: absolute; top:15%; left:2%; min-width:48%; max-width:48%; min-height:100%; border:solid 3px; padding:10px; font-size:90%;
	42	color:#aaa; overflow:show; background:none; display:none; }
81	43
82		#element_edit_overlay {
83		display:none;
84		position:fixed;
85		right:10px;
86		min-width:200px;
87		width:40%;
88		text-align:center;
89		z-index:2147483645;
90		}
	44	#reference { position: absolute; top: 15%; left:2%; min-width:46%; max-width:46%; min-height:100%; border:solid 3px; padding:10px; font-size:90%;
	45	text-align:justify; color:#aaa; overflow:show; background:none; }
91	46
92		#element_edit_overlay .ui-button {
93		height:25px;
94		text-align:justify;
95		padding:0.1em 0.8em 0.2em 0.8em;
96		font-weight:normal;
97		}
	47	#editor { position:absolute; top:15%; left:52%; min-width:45%; max-width:45%; min-height:96%; border:3px solid; padding:10px; font-size:90%;
	48	text-align:justify; color:#000; background-color:#ffe; }
98	49
99		#editoroverlay {
100		display: none;
101		}
102		#editoroverlay label {
103		position: absolute;
104		top: 5%;
105		color: #000;
106		font-size: 25px;
107		}
	50	#ref-lab { position:absolute; top:5%; font-size:120%; color:#aaa; }
	51	#edit-lab { position:absolute; top:5%; font-size:120%; color:#aaa; }
108	52
109		#editoroverlay a {
110		color:#1C94C4;
111		}
	53	#close-adv { position:absolute; top:7%; right:51%; font-size:90%; }
	54	#adv-ref { position:absolute; top:7%; right:51%; font-size:90%; }
112	55
113		#reference {
114		position: absolute;
115		top: 15%;
116		left:2%;
117		min-width:45%;
118		max-width:45%;
119		min-height:80%;
120		max-height:80%;
121		border:solid 3px;
122		padding:10px;
123		font-size:100%;
124		text-align:justify;
125		color:#000;
126		font-weight:normal;
127		}
	56	#mag-demag { position:absolute; bottom:5%; left:10%; font-size:100%; }
	57	#mag { position:absolute; left:3%; font-size:100%; }
	58	#demag { position:absolute; left:30%; font-size:100%; }
	59	#add-link { position:absolute; left:54%; font-size:100%; }
128	60
129		#editor {
130		position:absolute;
131		top:15%;
132		left:52%;
133		min-width:45%;
134		max-width:45%;
135		min-height:80%;
136		max-height:80%;
137		border:solid 3px;
138		padding:10px;
139		font-size:100%;
140		text-align:justify;
141		color:#000;
142		font-weight:normal;
143		}
	61	#save-changes { position:relative; font-size:100%; }
144	62
145		#forPrevData {
146		display:none;
147		height:1px;
148		width:1px;
149		}
	63	.highlightElement { box-shadow: 0 0 20px #000; }
	64	.highlightOnSelect { box-shadow: 0 0 50px #000; }
150	65
151		.highlightElement {
152		box-shadow: 0 0 20px #000;
153		}
	66	.barOnBottom { bottom:0px; }
	67	.barOnTop { top:0px; }
154	68
155		.highlightOnSelect {
156		box-shadow: 0 0 50px #000;
157		}
	69	#tar-lab1 { position:absolute; top:5%; left:110px; font-size:80%; color:#aaa; }
	70	#tar-lab2 { position:absolute; top:20%; left:125px; font-size:80%; color:#aaa; }
	71	#tar-lab3 { position:absolute; top:35%; left:125px; font-size:80%; color:#aaa; }
	72	#tar-lab4 { position:absolute; top:50%; left:125px; font-size:80%; color:#aaa; }
	73	#tar-lab5 { position:absolute; top:65%; left:125px; font-size:80%; color:#aaa; }
	74	#tar-lab6 { position:relative; font-size:80%; color:#aaa; }
	75	#tar-lab7 { position:relative; font-size:80%; color:#aaa; }
	76	#tar-p { position:absolute; top:90%; left:210px; font-size:80%; }
	77	#blogset { position:absolute; top:80%; right:100px; left:125px; font-size:80%; color:#aaa; }
158	78
159		.barOnBottom {
160		bottom:0px;
161		}
162	79
163		.barOnTop {
164		top:0px;
165		}
	80	#loc-select { position:absolute; top:25%; left:210px; width:256px; font-size:80%; color:#000; }
	81	#loc-img { position:absolute; top:25.5%; left:440px; height:20px; width:25px; font-size:80%; color:#000; display:none; }
	82	#lang-select { position:absolute; top:40%; left:210px; width:256px; font-size:80%; color:#000; }
	83	#lang-img { position:absolute; top:41%; left:440px; height:18px; width:25px; font-size:80%; color:#000; display:none; }
	84	#style-select { position:absolute; top:55%; left:210px; width:256px; font-size:80%; color:#000; }
	85	#auth-select { position:absolute; top:70%; left:210px; width:256px; font-size:80%; color:#000; }
166	86
167		#blogset{ /* Our blog & your blog div so whole set can adjustable */
168		position:absolute;
169		}
	87	#our-check { position:relative; }
	88	#your-check { position:relative; margin-left:25px; }
170	89
171		#infovis {
172		position:absolute;
173		top:3%;
174		left:0%;
175		width:60%;
176		height:95%;
177		overflow:hidden;
178	90	}
179		#infovis-canvaswidget, infovis-canvas {
180		height:95%
181		}
	91	/****************************************************************************************************************************/
182	92
183		#infonar {
184		position:relative;
185		top:2%;
186		left:0;
187		width:35%;
188		height:90%;
189		overflow:show;
190		}
	93	@media screen and (max-width:1000px) {
191	94
192		#narrations-div {
193		position:fixed;
194		top:5%;
195		bottom:2%
196		right:0.1%;
197		width:30%;
198		height:93%;
199		overflow:show;
200		background-color: rgba(0,0,0,0.5);
201		z-index:999999999;
	95	#renarrated_overlay { position:fixed; clear:both; width:99%; left:0.5%; text-align:center; z-index:2147483645; font-size:80%; display:block; }
	96	#renarrated_overlay .ui-button { text-align:justify; padding:0.1em 0.8em 0.2em 0.8em; font-weight:normal; }
	97
	98	#edit-current { display:none; }
	99	#see-narration { display:none; }
	100	#see-links { display:none; }
	101	#go { -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; -khtml-border-bottom-left-radius:0px;
	102	border-bottom-left-radius:0px; -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; -khtml-border-top-left-radius:0px;
	103	border-top-left-radius:0px; display:none; }
	104	#share { display:none; }
	105
	106	#blog-filter { right:-3px; min-width:150px; max-width:150px; height:39px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px;
	107	-khtml-border-bottom-right-radius:0px; border-bottom-right-radius:0px; -moz-border-radius-topright:0px;
	108	-webkit-border-top-right-radius:0px; -khtml-border-top-right-radius:0px; border-top-right-radius:0px; display:none; }
	109
	110	#outter-down-button { display:none; }
	111	#outter-up-button { display:none; }
	112
	113	#icon-down { display:none; }
	114	#icon-up { display:none; }
	115
	116	#pub_overlay { position:fixed; left:3%; width:96%; text-align:center; z-index:2147483645; font-size:80%; display:none; }
	117	#pub_overlay .ui-button { margin-left:10px; text-align:justify; font-weight:normal; }
	118
	119	#element_edit_overlay { position:fixed; text-align:center; z-index:2147483645; font-size:80%; display:none; }
	120	#element_edit_overlay .ui-button { text-align:justify; font-weight:normal; }
	121
	122	#edit-text { text-align:justify; font-weight:bold; font-size:100%; display:none; }
	123	#add-audio { text-align:justify; font-weight:bold; font-size:100%; display:none; }
	124	#replace-image { text-align:justify; font-weight:bold; font-size:100%; display:none; }
	125	#delete-image { text-align:justify; font-weight:bold; font-size:100%; display:none; }
	126	#close-element { position:absolute; top:-5px; left:-2px; width:10px; font-size:100%; }
	127	#cant-edit { width: 450px; margin:15px; display:none; font-size:100%; }
	128
	129	#editoroverlay { min-width:90%; display: none; }
	130	#editoroverlay a { color:#1C94C4; }
	131
	132	#adv-reference { position: absolute; top: 20%; left:2%; min-width:48%; max-width:48%; min-height:100%; border:solid 2px; padding:10px; font-size:70%;
	133	text-align:justify; color:#aaa; font-weight:normal; overflow:show; background:none; display:none; }
	134	#reference { position: absolute; top: 24%; left:2%; min-width:46%; max-width:46%; min-height:100%; border:solid 2px; padding:10px; font-size:70%;
	135	text-align:justify; color:#aaa; font-weight:normal; overflow:show; background:none; }
	136
	137	#editor { position:absolute; top:15%; left:52%; min-width:45%; max-width:45%; min-height:96%; border:2px solid; padding:10px; font-size:70%;
	138	text-align:justify; color:#000; font-weight:normal; background-color:#ffe; }
	139
	140	#ref-lab { position:absolute; top:5%; font-size:100%; color:#aaa; }
	141	#edit-lab { position:absolute; top:5%; font-size:100%; color:#aaa; }
	142
	143	#close-adv { position:absolute; top:10%; right:50%; font-size:60%; }
	144	#adv-ref { position:absolute; top:10%; right:50%; font-size:60%; }
	145
	146	#mag-demag { position:absolute; bottom:8%; left:10%; font-size:80%; }
	147	#mag { position:absolute; left:3%; font-size:80%; }
	148	#demag { position:absolute; left:30%; font-size:80%; }
	149	#add-link { position:absolute; left:54%; font-size:80%; }
	150
	151	#save-changes { position:relative; font-size:80%; }
	152
	153	.highlightElement { box-shadow: 0 0 20px #000; }
	154	.highlightOnSelect { box-shadow: 0 0 50px #000; }
	155
	156	.barOnBottom { bottom:0px; }
	157	.barOnTop { top:0px; }
	158
	159	#tar-lab1 { position:absolute; top:5%; left:110px; color:#aaa; }
	160	#tar-lab2 { position:absolute; top:20%; left:125px; color:#aaa; }
	161	#tar-lab3 { position:absolute; top:35%; left:125px; color:#aaa; }
	162	#tar-lab4 { position:absolute; top:50%; left:125px; color:#aaa; }
	163	#tar-lab5 { position:absolute; top:65%; left:125px; color:#aaa; }
	164	#tar-lab6 { position:relative; color:#aaa; }
	165	#tar-lab7 { position:relative; color:#aaa; }
	166	#tar-p { position:absolute; top:90%; left:210px; }
	167	#blogset { position:absolute; top:80%; left:125px; right:80px; color:#aaa; }
	168
	169	#loc-select { position:absolute; top:25%; left:210px; width:256px; color:#000; }
	170	#loc-img { position:absolute; top:25.5%; left:440px; height:20px; width:25px; color:#000; display:none; }
	171	#lang-select { position:absolute; top:40%; left:210px; width:256px; color:#000; }
	172	#lang-img { position:absolute; top:41%; left:440px; height:18px; width:25px; color:#000; display:none; }
	173	#style-select { position:absolute; top:55%; left:210px; width:256px; color:#000; }
	174	#auth-select { position:absolute; top:70%; left:210px; width:256px; color:#000; }
	175
	176	#our-check { position:relative; }
	177	#your-check { position:relative; margin-left:25px;}
	178
202	179	}
	180	/**************************************************************
	181	************************************************************************************************************/
	182
	183	#infovis { position:absolute; top:3%; left:0%; width:60%; height:95%; overflow:hidden; }
	184	#infovis-canvaswidget { height:95% }
	185	#infovis-canvas { height:95% }
	186
	187	#infonar { position:relative; top:2%; left:0; width:35%; height:90%; overflow:show; }
	188	#narrations-div { position:fixed; top:5%; bottom:2%; right:0.1%; width:30%; height:93%; overflow:show; background-color: rgba(0,0,0,0.5);
	189	z-index:999999999; }
203	190	/TOOLTIPS/
204		.tip {
205		color: #fff;
206		width: 140px;
207		background-color: rgba(0,0,0,1);
208		border:1px solid #ccc;
209		-moz-box-shadow:#555 2px 2px 8px;
210		-webkit-box-shadow:#555 2px 2px 8px;
211		-o-box-shadow:#555 2px 2px 8px;
212		box-shadow:#555 2px 2px 8px;
213		opacity:1;
214		/* filter:alpha(opacity=90); */
215		font-size:12px;
216		font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
217		padding:7px;
218		}
	191	.tip { color: #fff; width: 140px; background-color: rgba(0,0,0,1); border:1px solid #ccc; -moz-box-shadow:#555 2px 2px 8px;
	192	-webkit-box-shadow:#555 2px 2px 8px; -o-box-shadow:#555 2px 2px 8px; box-shadow:#555 2px 2px 8px; opacity:1; font-size:12px;
	193	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; padding:7px; }


52	52	}
53	53	},
54	54
55
56		clearMenu: function() {
57		},
58	55	ajax: function() {
59	56	if(a11ypi.flag == '0')
60	57	{
…	…
328	328	},
329	329	loadOverlay: function()
330	330	{
331		var icon_template = '<div id="icon_on_overlay" class="alipi demo ui-widget-header ui-corner-all" '+
332		'onClick="a11ypi.hide_overlays();"> <input id="icon-up" class="alipi" type="submit" value="&#x25B2" down="true">'+
333		'<input id="icon-down" class="alipi" type="submit" value="&#x25BC"'+
334		'</input></div>';
335
336	331	var overlay_template = '<div id="renarrated_overlay" class="alipi ui-widget-header ui-corner-all">'+
337		'<input id="outter-down-button" class="alipi" type="submit" onclick="a11ypi.outterToggle();" value="▲" up="true"> '+
338		'<input id="outter-up-button" class="alipi" type="submit" onclick="a11ypi.outterToggle();" value="▼"> '+
339		'<input id="edit-current" class="alipi" type="submit" onclick="a11ypi.editPage();" value="Re-narrate this page">'+
340		'<input id="see-narration" class="alipi" type="submit" onclick="a11ypi.showBox();" value="See re-narrations">'+
341		'<input id="see-links" class="alipi" type="submit" onclick="a11ypi.showBox1();" value="List of pages narrated">'+
342		'<select id="blog-filter" class="alipi"></select>'+
343		'<input id="go" class="alipi" type="submit" onclick="a11ypi.go();" value="\|Y\|">'+
344		'<input id="share" class="alipi" type="submit" onclick="a11ypi.share();" value="Share"> '+
345		'</div><div id="show-box" title="Choose a narration"></div><div id="show-links" title="List of pages narrated in this domain" '+
346		'class="alipi"></div><div id="share-box" class="alipi" title="Share this page in any following social network"></div>';
	332	'<button id="outter-down-button" class="alipi" onclick="a11ypi.outterToggle();" up="true" title="Move this bar to top">Move</button> '+
	333	'<button id="outter-up-button" class="alipi" onclick="a11ypi.outterToggle();" title="Move this bar to bottom">Move</button> '+
	334	'<button id="edit-current" class="alipi" onclick="a11ypi.editPage();" >Re-narrate Page</button> '+
	335	'<button id="see-narration" class="alipi" onclick="a11ypi.showBox();" >See Re-narrations</button>'+
	336	'<button id="see-links" class="alipi" onclick="a11ypi.showBox1();" >Narrated Links</button>'+
	337	'<select id="blog-filter" class="alipi" title="Select one of the blog name"></select>'+
	338	'<button id="go" class="alipi ui-icon-circle-arrow-e" onclick="a11ypi.go();" title="Filter by blog" >\|Y\|</button>'+
	339	'<button id="share" class="alipi" onclick="a11ypi.share();" >Share</button> </div>'+
	340	'<div id="show-box" title="Choose a narration"></div> '+
	341	'<div id="show-links" title="List of pages narrated in this domain" class="alipi"></div> '+
	342	'<div id="share-box" class="alipi" title="Share this page in any following social network"></div>';
347	343
348	344	var pub_overlay_template = '<div id="pub_overlay" class="alipi ui-widget-header ui-corner-all">'+
349		'<input id="exit-mode" class="alipi" type="submit" onclick="a11ypi.exitMode();" value="Exit">'+
350		'<input id="help-window" class="alipi" type="submit" onclick="a11ypi.help_window();" value="Help">'+
351		'<input id="undo-button" class="alipi" type="submit" onclick="util.undoChanges();" value="Undo" ; >'+
352		'<input id="publish-button" class="alipi" type="submit" onclick="a11ypi.publish();" value="Publish" ></div>';
	345	'<button id="icon-up" class="alipi" down="true" onClick="a11ypi.hide_overlays();" title="Move this bar to top">Move</button>'+ //&#x25B2
	346	'<button id="icon-down" class="alipi" onClick="a11ypi.hide_overlays();" title="Move this bar to bottom">Move</button>'+ //&#x25BC
	347	'<button id="exit-mode" class="alipi" onclick="a11ypi.exitMode();">Exit Editing</button>'+
	348	'<button id="help-window" class="alipi" onclick="a11ypi.help_window();">Help</button>'+
	349	'<button id="undo-button" class="alipi" onclick="util.undoChanges();">Undo last change</button>'+
	350	'<button id="publish-button" class="alipi" onclick="a11ypi.publish();">Publish to blog</button></div>';
353	351
354	352	var element_edit_overlay_template = '<div id="element_edit_overlay" class="alipi ui-widget-header ui-corner-all" >'+
355		'<input id="edit-text" class="alipi" type="submit" onclick="a11ypi.displayEditor();" value="Edit Text" style="display:none;" >'+
356		'<input id="add-audio" type="submit" onclick="a11ypi.addAudio();" class="alipi" value="Add Audio" style="display:none;" >'+
357		'<input id="replace-image" type="submit" onclick="a11ypi.imageReplacer();" class="alipi" value="Replace Image" style="display:none;" >'+
358		'<input id="delete-image" type="submit" onclick="pageEditor.deleteImage();" class="alipi" value="Delete Image" style="display:none;" >'+
359		'<label id="cant-edit" class="alipi" style="display:none;color:#000;font-size:134%;">You can\'t select that portion </label> '+
	353	'<button id="edit-text" class="alipi" onclick="a11ypi.displayEditor();" >Edit Text</button>'+
	354	'<button id="add-audio" class="alipi" onclick="a11ypi.addAudio();" >Add Audio</button>'+
	355	'<button id="replace-image" class="alipi" onclick="a11ypi.imageReplacer();" >Replace Image</button>'+
	356	'<button id="delete-image" class="alipi" onclick="pageEditor.deleteImage();" >Delete Image</button>'+
	357	'<button id="close-element" class="alipi" onclick="pageEditor.cleanUp();" title="Close" ></button>'+
	358	'<label id="cant-edit" class="alipi">No selection / Too large to select </label> '+
360	359	'</div>';
361	360
362
363		$('body').append(icon_template);
364	361	$('body').append(overlay_template);
365	362	$('body').append(pub_overlay_template);
366	363	$('body').append(element_edit_overlay_template);
…	…
366	366	$('#undo-button').button({ disabled: true});
367	367	$('#publish-button').button({ disabled: true});
368	368	$('input:.alipi, select:.alipi').button();
	369
	370	$("#outter-down-button").button({icons:{primary:"ui-icon-circle-arrow-n"},text:false}); $('#outter-down-button').children().addClass('alipi');
	371	$("#outter-up-button").button({icons:{primary:"ui-icon-circle-arrow-s"},text:false}); $('#outter-up-button').children().addClass('alipi');
	372	$("#edit-current").button({icons:{primary:"ui-icon-pencil"}}); $('#edit-current').children().addClass('alipi');
	373	$("#see-narration").button({icons:{primary:"ui-icon-document-b"}}); $('#see-narration').children().addClass('alipi');
	374	$("#see-links").button({icons:{primary:"ui-icon-link"}}); $('#see-links').children().addClass('alipi');
	375	/$("#blog-filter").button({icons:{secondary:"ui-icon-triangle-1-s"}}); / $('#blog-filter').children().addClass('alipi');
	376	$("#go").button({icons:{primary:"ui-icon-arrowthick-1-e"},text:false}); $('#go').children().addClass('alipi');
	377	$("#share").button({icons:{primary:"ui-icon-signal-diag"}}); $('#share').children().addClass('alipi');
	378
	379	$("#icon-up").button({icons:{primary:"ui-icon-circle-arrow-n"},text:false}); $('#icon-up').children().addClass('alipi');
	380	$("#icon-down").button({icons:{primary:"ui-icon-circle-arrow-s"},text:false}); $('#icon-down').children().addClass('alipi');
	381	$("#exit-mode").button({icons:{primary:"ui-icon-power"}}); $('#exit-mode').children().addClass('alipi');
	382	$("#help-window").button({icons:{primary:"ui-icon-help"}}); $('#help-window').children().addClass('alipi');
	383	$("#undo-button").button({icons:{primary:"ui-icon-arrowreturnthick-1-w"}}); $('#undo-button').children().addClass('alipi');
	384	$("#publish-button").button({icons:{primary:"ui-icon-circle-check"}}); $('#publish-button').children().addClass('alipi');
	385
	386	$("#edit-text").button({icons:{primary:"ui-icon-pencil"}}); $('#edit-text').children().addClass('alipi');
	387	$("#add-audio").button({icons:{primary:"ui-icon-circle-plus"}}); $('#add-audio').children().addClass('alipi');
	388	$("#replace-image").button({icons:{primary:"ui-icon-transferthick-e-w"}}); $('#replace-image').children().addClass('alipi');
	389	$("#delete-image").button({icons:{primary:"ui-icon-trash"}}); $('#delete-image').children().addClass('alipi');
	390	$("#close-element").button({icons:{primary:"ui-icon-circle-close"},text:false}); $("#close-element").children().addClass('alipi');
	391
369	392	$('#renarrated_overlay').addClass('barOnTop');
370	393	a11ypi.ajax();
371	394	a11ypi.ajaxLinks1();
…	…
412	412	$('#share').show();
413	413	}
414	414	},
415
	415
416	416	help_window: function() {
417	417	var help_template = '<div id="helpwindow" class="alipi ui-widget-header ui-corner-all">'+
418		'<label id="txtlab" class="alipi" style="color:#000;font-weight:normal;">TEXT :- It will popup a '+
	418	'<label id="txtlab" class="alipi" style="color:#aaa;font-size:100%;">TEXT :- It will popup a '+
419	419	'window and allow you to modify/replace text of select element on editor(right) box.'+
420		'<p class="alipi">To delete - Empty the editor(right) box and press "OK".'+
421		'</p><p class="alipi" style="margin-left:50px";>See narrations - If the selected element has other narrations '+
422		'then it will list, on click.</p><p class="alipi" style="margin-left:50px";>Audio - It allows you to '+
	420	'<p class="alipi">To delete - Empty the editor(right) box and press "Save changes".'+
	421	'</p><p class="alipi" style="margin-left:50px";>Add Audio - It allows you to '+
423	422	'enter audio URL.</p>IMAGE:- <p class="alipi" style="margin-left:50px";> Replace - It allows you to enter '+
424		'image URL.</p><p class="alipi" style="margin-left:50px";> See narrations - If the selected element has other '+
425		'image narration then it will show, on click.</p> UNDO:- Use it when you want to revert back to '+
426		'previous change.<p class="alipi" style="margin-left:50px";> Revert deleted - Press \'Undo\' button twice.</p>'+
427		'PUBLISH:- To publish your crafted changes to database and blog (our/your).'+
428		'<p class="alipi" style="margin-left:50px";>States - To the place you are targetting.</p><p class="alipi" '+
	423	'image URL.</p> UNDO:- Use it when you want to revert back to '+
	424	'previous change.'+
	425	'PUBLISH:- To publish your crafted changes to database and blog (Alipi/Personal).'+
	426	'<p class="alipi" style="margin-left:50px";>States - The place you are targetting to.</p><p class="alipi" '+
429	427	'style="margin-left:50px";>Languages - In language you publishing.</p><p class="alipi" style= '+
430	428	'"margin-left:50px";>Style - In what style you crafted?</p><p class="alipi" style="margin-left:50px";> '+
431	429	'Author - Who is a crafter?</p><p class="alipi" style="margin-left:50px";>'+
432		'Our blog - If you don\'t have blogspot ID then check this to post it to our blog.</p></div>';
	430	'Alipi blog - If you don\'t have blogspot ID then check this to post it to our blog.</p></div>';
433	431
434	432	$('body').append(help_template);
435	433	$(document).unbind('mouseover'); // Unbind the css on mouseover
…	…
457	457	$('#icon-up').attr('down', 'false');
458	458	$('#icon-up').show(); $('#icon-down').hide();
459	459	$('#pub_overlay').addClass('barOnBottom'); $('#pub_overlay').removeClass('barOnTop');
460		$('#element_edit_overlay').addClass('barOnBottom'); $('#element_edit_overlay').removeClass('barOnTop');
461		$('#icon_on_overlay').addClass('barOnBottom'); $('#icon_on_overlay').removeClass('barOnTop');
	460	// $('#element_edit_overlay').addClass('barOnBottom'); $('#element_edit_overlay').removeClass('barOnTop');
	461	// $('#icon_on_overlay').addClass('barOnBottom'); $('#icon_on_overlay').removeClass('barOnTop');
462	462	} else {
463	463	$('#icon-up').attr('down', 'true');
464	464	$('#icon-down').show(); $('#icon-up').hide();
465	465	$('#pub_overlay').addClass('barOnTop'); $('#pub_overlay').removeClass('barOnBottom');
466		$('#element_edit_overlay').addClass('barOnTop'); $('#element_edit_overlay').removeClass('barOnBottom');
467		$('#icon_on_overlay').addClass('barOnTop'); $('#icon_on_overlay').removeClass('barOnBottom');
	466	// $('#element_edit_overlay').addClass('barOnTop'); $('#element_edit_overlay').removeClass('barOnBottom');
	467	// $('#icon_on_overlay').addClass('barOnTop'); $('#icon_on_overlay').removeClass('barOnBottom');
468	468	}
469	469	},
470	470
…	…
538	538	$('#element_edit_overlay').slideUp();
539	539	$('#icon_on_overlay').slideUp();
540	540	if (a11ypi.target == false ) {
541		var publish_template = '<div id="targetoverlay" title="Who are you narrating to??" class="alipi ui-widget-header ui-corner-all"> '+
	541	var publish_template = '<div id="targetoverlay" title="Who are you narrating to?" class="alipi ui-widget-header ui-corner-all"> '+
542	542	// '<div id="infovis" class="alipi"> </div>'+
543		'<label class="alipi" style="position:absolute;top:5%;left:110px;color:#000;">Enter few attributes of the '+
544		'target community </label>'+
545		'<label class="alipi" style="position:absolute;top:20%;left:125px;color:#000;">Location of the target community: </label> '+
546		'<input id="loc-select" class="alipi" style="position:absolute;top:25%;left:210px;width:256px;color:#000; '+
547		'"placeholder="Type city/town name"/> '+
548		'<img id="loc-img" src="http://dev.a11y.in/wsgi/images/db_loading.gif" style="width:25px;height:20px;position:absolute; '+
549		'top:25.5%;left:440px;display:none;" /> '+
550		'<label class="alipi" style="position:absolute;top:35%;left:125px;color:#000;">Language of re-narration: </label> '+
551		'<input id="lang-select" class="alipi" style="position:absolute;top:40%;left:210px;width:256px;color:#000;" '+
552		'placeholder="Type language name"/>'+
553		'<img id="lang-img" src="http://dev.a11y.in/wsgi/images/db_loading.gif" style="width:25px;height:18px;position:absolute;'+
554		'top:41%;left:440px;display:none; "/> '+
555		'<label class="alipi" style="position:absolute;top:50%;left:125px;color:#000;">Select a style of re-narration: </label> '+
556		'<select id="style-select" class="alipi" style="position:absolute;top:55%;left:210px;width:256px;color:#000;"> '+
	543	'<label id="tar-lab1" class="alipi" >Enter few attributes of the target community </label>'+
	544	'<label id="tar-lab2" class="alipi" >Location of the target community: </label> '+
	545	'<input id="loc-select" class="alipi" placeholder="Type city/town name"/> '+
	546	'<img id="loc-img" src="http://dev.a11y.in/wsgi/images/db_loading.gif" /> '+
	547	'<label id="tar-lab3" class="alipi" >Language of re-narration: </label> '+
	548	'<input id="lang-select" class="alipi" placeholder="Type language name"/>'+
	549	'<img id="lang-img" src="http://dev.a11y.in/wsgi/images/db_loading.gif"/> '+
	550	'<label id="tar-lab4" class="alipi" >Select a style of re-narration: </label> '+
	551	'<select id="style-select" class="alipi" > '+
557	552	'<option>Translation</option><option>Technical</option><option>Fun</option><option>Simplification</option> '+
558	553	'<option>Correction</option><option>Evolution</option><option>Other</option></select>'+
559		'<label class="alipi" style="position:absolute;top:65%;left:125px;color:#000;">Enter an author name for your contribution: </label> '+
560		'<input id="auth-select" class="alipi" type="text" style="position:absolute;top:70%;left:210px;width:256px;" placeholder="John"'+
561		'width:256px;" /><div id="blogset" style="position:absolute;top:80%;left:125px;right:100px;color:#000;"> You can choose to post '+
562		'this in your own blog or in the default Alipi blog</div><p style="position:absolute;top:90%;left:210px;"><input id="our-check" '+
563		'class="alipi" style="position:relative;" type="radio"name="blog" /><label class="alipi" style="position:relative;color:#000;"> '+
564		'Alipi Blog</label><input id="your-check" class="alipi" type="radio" name="blog" style="position:relative;margin-left:25px;" /> '+
565		'<label class="alipi" style="color:#000;position:relative;">Personal Blog</label></p></div>';
	554	'<label id="tar-lab5" class="alipi" >Enter an author name for your contribution: </label> '+
	555	'<input id="auth-select" class="alipi" type="text" placeholder="John" /> '+
	556	'<div id="blogset" > You can choose to post this in your own blog or in the default Alipi blog</div> '+
	557	'<p id="tar-p" ><input id="our-check" class="alipi" type="radio"name="blog" /> '+
	558	'<label id="tar-lab6" class="alipi" > Alipi Blog</label><input id="your-check" class="alipi" type="radio" name="blog" /> '+
	559	'<label id="tar-lab7" class="alipi">Personal Blog</label></p></div>';
566	560
567	561	$('body').append(publish_template);
568	562	//document.addEventListener("DOMActivate", init, false);
…	…
570	570
571	571	$('#pub_overlay').slideUp();
572	572	$('#element_edit_overlay').slideUp();
573		$('#icon_on_overlay').slideUp();
	573	// $('#icon_on_overlay').slideUp();
574	574
575	575	$(function() {
576	576	$( "#targetoverlay" ).dialog({
…	…
579	579	modal: true,
580	580	buttons: {
581	581	Publish: function() {
582		var success_template = '<div id="success-dialog" title="Posting your changes" class="alipi ui-widget-header ui-corner-all" '+
583		' style="color:#000"> '+
584		'<p><b>Please wait !!!</b></p><p>Your contribution is being posted</p></div>';
585		$('body').append(success_template);
586		$(function() {
587		$( "#success-dialog" ).dialog({
588		modal: true,
589		});
590		});
591	582	util.publish();
592	583	}
593	584	},
594	585	close: function() {
595	586	$('#pub_overlay').slideDown();
596		$('#element_edit_overlay').slideDown();
597		$('#icon_on_overlay').slideDown();
	587	// $('#element_edit_overlay').slideDown();
	588	// $('#icon_on_overlay').slideDown();
598	589	$( "#targetoverlay" ).hide();
599	590	// document.removeEventListener("DOMActivate", init, false);
600	591	}
…	…
760	760	},
761	761	editPage: function() {
762	762	a11ypi.testContext();
763		$('#icon_on_overlay').show(); $('#icon_on_overlay').addClass('barOnTop'); // When 1st time page entered in edit mode
	763	// $('#icon_on_overlay').show(); $('#icon_on_overlay').addClass('barOnTop'); // When 1st time page entered in edit mode
764	764	$('#pub_overlay').show(); $('#pub_overlay').addClass('barOnTop');
765	765	$('#icon-down').show();
766		$('#element_edit_overlay').addClass('barOnTop');
767
	766	// $('#element_edit_overlay').addClass('barOnTop');
768	767	$('#renarrated_overlay').hide();
769	768
770	769	$('body *').contents().filter(function(){
771	770	{
772	771	try{
773		if(!($(this).hasClass('alipi')) \|\| $(this).attr('m4pageedittype') )
	772	if(!($(this).hasClass('alipi')) && $(this).attr('m4pageedittype') )
774	773	return this;
775		}
	774	}
776	775	catch(err)
777	776	{
778	777	//pass
779	778	}
780	779	}
781	780	}).click(pageEditor.startEdit);
	781
	782	$('body *').contents().filter(function(){
	783	{
	784	try{
	785	if(!($(this).hasClass('alipi')) \|\| $(this).attr('m4pageedittype'))
	786	return this;
	787	}
	788	catch(err)
	789	{
	790	//pass
	791	}
	792	}
	793	}).click(pageEditor.noEdit);
	794
782	795	$(document).mouseover(a11ypi.highlightOnHover);
783	796	$(document).mouseout(a11ypi.unhighlightOnMouseOut);
784	797	},
785	798
786	799	displayEditor: function() {
787	800	var template = '<div id="editoroverlay" title="Editor" class="alipi ui-widget-header ui-corner-all">'+
788		'<label class="alipi" style="left: 20%;">Reference</label>'+
	801	'<div id="close-adv" class="alipi" onclick="a11ypi.closeAdv();">Render source</div><div id="adv-ref" class="alipi" '+
	802	'onclick="a11ypi.showAdv();">View Source</div> '+
	803	'<label id="ref-lab" class="alipi" style="left:3%;">Here is original piece</label>'+
789	804	'<div id="reference" class="alipi" readonly="yes"></div>'+
790		'<label class="alipi" style="left: 70%;">Editor</label>'+
791		'<div id="editor" class="alipi" contenteditable="true"></div>'+
792		'<div id="forPrevData" class="alipi"></div>'+
	805	'<textarea id="adv-reference" class="alipi" readonly="yes"></textarea> '+
	806	'<label id="edit-lab" class="alipi" style="left:53%;">Where you should edit</label>'+
	807	'<div id="editor" class="alipi" contenteditable="true" '+ // onkeyup="a11ypi.reflectInReference();">
	808	// '<div id="forPrevData" class="alipi"></div>'+
793	809	'</div>';
794	810	$('body').append(template);
795	811	$('#pub_overlay').slideUp();
796		$('#element_edit_overlay').slideUp();
797		$('#icon_on_overlay').slideUp();
	812	$('#element_edit_overlay').hide();
	813	// $('#icon_on_overlay').slideUp();
798	814
799	815	var tag = pageEditor.event.target.nodeName;
800	816	$(pageEditor.event.target).removeAttr('m4pageedittype');
801	817	$(pageEditor.event.target).children().removeAttr('m4pageedittype');
802	818
803		$('#reference').text('<'+tag+'>'+$(pageEditor.event.target).html()+'</'+tag+'>');
	819	$('#adv-reference').text('<'+tag+'>'+$(pageEditor.event.target).html()+'</'+tag+'>');
	820	$('#reference').html($(pageEditor.event.target).html());
804	821	$('#editor').html($(pageEditor.event.target).html());
	822	$('#close-adv').button();
	823	$('#close-adv').hide();
	824	$('#adv-ref').button();
805	825
806	826	$(document).unbind('mouseover'); // Unbind the css on mouseover
807	827	$(document).unbind('mouseout'); // Unbind the css on mouseout
808	828
809	829	$( "#editoroverlay" ).dialog({
810	830	position: 'center',
811		width:$(window).width()-100,
	831	width:$(window).width()-10,
812	832	height:$(window).height()-50,
813	833	modal: true,
814	834	buttons: {
…	…
841	841	$('#editor').css('font-size', font+'px');
842	842	font = parseFloat($('#reference').css('font-size')) + 1;
843	843	$('#reference').css('font-size', font+'px');
	844	font = parseFloat($('#adv-reference').css('font-size')) + 1;
	845	$('#adv-reference').css('font-size', font+'px');
844	846	}
845	847	},
846	848	"-": function() {
…	…
854	854	$('#editor').css('font-size', font+'px');
855	855	font = parseFloat($('#reference').css('font-size')) - 1;
856	856	$('#reference').css('font-size', font+'px');
	857	font = parseFloat($('#adv-reference').css('font-size')) - 1;
	858	$('#adv-reference').css('font-size', font+'px');
857	859	}
858	860	},
859	861	"Add Link": function() {
…	…
876	876	}
877	877	});
878	878
879		$($($('<label>').insertAfter($('.ui-dialog-buttonset').children()[0])).html('Magnify or Demagnify')).css({}); // Element added externally with css
880		$($('.ui-dialog-buttonset').children()[1]).css({'position':'absolute','left':'100','font-weight':'bold','margin-top':'10'});
881		$($('.ui-dialog-buttonset').children()[0]).css({'position':'absolute','left':'45'}); // '+' CSS for postioning button on editor
882		$($('.ui-dialog-buttonset').children()[2]).css({'position':'absolute','left':'270'}); // '-' CSS for postioning button on editor
883		$($('.ui-dialog-buttonset').children()[3]).css({'position':'absolute','left':'54%'}) // 'Link' CSS for postioning button on editor
	879	$($($('<label>').insertAfter($('.ui-dialog-buttonset').children()[0])).html('Magnify or Demagnify')); // Element added externally with css
	880	$($('.ui-dialog-buttonset').children()[1]).attr('id','mag-demag');
	881	$($('.ui-dialog-buttonset').children()[0]).attr('id','mag'); // '+'
	882	$($('.ui-dialog-buttonset').children()[2]).attr('id','demag'); // '-'
	883	$($('.ui-dialog-buttonset').children()[3]).attr('id','add-link'); // 'Link'
	884	$($('.ui-dialog-buttonset').children()[4]).attr('id','save-changes'); // 'Save Changes'
884	885	},
	886
	887	showAdv: function() {
	888	$('#reference').hide();
	889	$('#adv-reference').show();
	890	$('#adv-ref').hide();
	891	$('#close-adv').show();
	892	},
	893	closeAdv: function() {
	894	$('#reference').show();
	895	$('#adv-reference').hide();
	896	$('#close-adv').hide();
	897	$('#adv-ref').show();
	898	},
885	899
	900	reflectInReference: function() {
	901	var tag = pageEditor.event.target.nodeName;
	902	// $('#reference').text('<'+tag+'>'+$("#editor").html()+'</'+tag+'>');
	903	$("#reference").html() = $("#editor").html();
	904	},
	905
886	906	imageReplacer: function() {
887	907	var imageInputTemplate = '<div id="imageInputElement" title="Enter url" class="alipi ui-widget-header ui-corner-all">'+
888	908	'<input type="text" id="imageInput" placeholder="http://foo.com/baz.jpg" class="alipi" value=""/></div>';
…	…
976	976
977	977	unhighlightOnMouseOut: function(event) {
978	978	$(event.target).removeClass('highlightElement');
979		},
980
981		showTopBar: function() {
982
983	979	},
984	980	};


13	13	pageEditor.event = event;
14	14	pageEditor.m4pageedittype = $(event.target).attr('m4pageedittype');
15	15	$('*').removeClass('highlightOnSelect');
	16
	17	if (pageEditor.event) {
	18	xAxis = pageEditor.event.clientX;
	19	yAxis = pageEditor.event.clientY;
	20	$("#element_edit_overlay").css("top", yAxis);
	21	$("#element_edit_overlay").css("left", xAxis);
	22	}
	23
16	24	if($(event.target).attr('m4pageedittype') == 'text') {
17	25	$(event.target).addClass('highlightOnSelect'); // To show selected element
18	26
19	27	$('#edit-text').show();
20	28	$('#add-audio').show();
	29	$('#close-element').show();
21	30	$('#replace-image').hide();
22	31	$('#delete-image').hide();
23	32	$('#cant-edit').hide();
24
	33	$("body").css("overflow", "hidden");
25	34	$('#pub_overlay').slideDown();
26	35	$('#element_edit_overlay').slideDown();
27	36	// At this point 'displayEditor' function will be performed on click of 'Edit Text' button
…	…
41	41
42	42	$('#replace-image').show();
43	43	$('#delete-image').show();
	44	$('#close-element').show();
44	45	$('#add-audio').hide();
45	46	$('#edit-text').hide();
46	47	$('#cant-edit').hide();
47
	48	$("body").css("overflow", "hidden");
48	49	$('#element_edit_overlay').slideDown();
49	50	$('#pub_overlay').slideDown();
50	51	// At this point 'imageReplacer' function will be performed on click of 'Replace Image' button
51	52	// imageReplacer function is in ui.js
52		} else {
	53	}
	54	},
	55
	56	noEdit: function(event)
	57	{
	58	if (event) {
	59	xAxis = event.clientX;
	60	yAxis = event.clientY;
	61	$("#element_edit_overlay").css("top", yAxis);
	62	$("#element_edit_overlay").css("left", xAxis);
	63	}
	64	$('*').removeClass('highlightOnSelect');
	65	if(!($(event.target).attr('m4pageedittype'))) {
53	66	$('#edit-text').hide();
54	67	$('#add-audio').hide();
55	68	$('#replace-image').hide();
56	69	$('#delete-image').hide();
	70	$('#close-element').hide();
57	71	$('#cant-edit').show();
58
	72	window.setTimeout("$('#cant-edit').hide();", 3000);
	73	$("body").css("overflow", "auto");
59	74	$('#pub_overlay').slideDown();
60	75	$('#element_edit_overlay').slideDown();
61	76	}
62	77	},
63
	78
64	79	handler: function()
65	80	{
66	81	var sel = window.getSelection();
…	…
155	155
156	156	$(element).attr('m4pageedittype', pageEditor.m4pageedittype);
157	157	$(element).children().attr('m4pageedittype', pageEditor.m4pageedittype);
158		$('#icon_on_overlay').slideDown();
	158	// $('#icon_on_overlay').slideDown();
159	159	$('#pub_overlay').slideDown();
160		$('#element_edit_overlay').slideDown();
	160	$('#element_edit_overlay').hide();
	161	$("body").css("overflow", "auto");
	162	$('*').removeClass('highlightOnSelect');
	163	// $('#element_edit_overlay').slideDown();
161	164	$(document).mouseover(a11ypi.highlightOnHover);
162	165	$(document).mouseout(a11ypi.unhighlightOnMouseOut);
163	166	// $(pageEditor.event.target).removeClass('highlightOnSelect'); // Remove hightlight of selected element
…	…
327	327	break;
328	328
329	329	case 'IMAGE_SRC_UPDATE':
330		console.log("here");
331	330	command.element.src = command.previousData.src;
332	331	if (command.previousData.size.width) {
333	332	command.element.width = command.previousData.size.width;
…	…
388	388	$(function(){
389	389	$( "#targetoverlay" ).dialog('close');
390	390	$('#pub_overlay').slideUp();
391		$('#element_edit_overlay').slideUp();
392		$('#icon_on_overlay').slideUp();
393		$( "#success-dialog" ).dialog({
394		modal: true,
395		});
	391	$('#element_edit_overlay').hide();
	392	// $('#icon_on_overlay').slideUp();
	393	// $( "#success-dialog" ).dialog({
	394	// modal: true,
	395	// });
	396	var success_template = '<div id="success-dialog" title="Posting your changes" class="alipi ui-widget-header ui-corner-all" '+
	397	'<p style="color:#aaa"><b>Please wait !!!</b></p><p style="color:#aaa">Your contribution is being posted</p></div>';
	398	$('body').append(success_template);
	399	$(function() {
	400	$( "#success-dialog" ).dialog({
	401	modal: true,
	402	});
	403	});
396	404	});
397	405	$.ajax({
398	406	url: 'http://dev.a11y.in/test',

Commit 2db0dac89c62c0896c1e4ec24ae91c31ec9586aa

Gitorious