Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Simon Daron
panikweb
Commits
e7865db6
Commit
e7865db6
authored
Aug 23, 2013
by
Simon Daron
Browse files
Implementing pushState solutions to keep music playing... done! It rocks :)
parent
373bd618
Changes
7
Hide whitespace changes
Inline
Side-by-side
panikweb_templates/static/js/specifics.js
View file @
e7865db6
$
(
function
()
{
$
(
"
.tabs
"
).
each
(
function
()
{
var
self
=
$
(
this
);
var
about
=
$
(
$
(
this
).
attr
(
"
data-tab-about
"
));
about
.
find
(
"
[data-tabbed]:not(:first)
"
).
hide
();
$
(
this
).
find
(
"
[data-tab]:first
"
).
addClass
(
"
active
"
);
$
(
this
).
find
(
"
[data-tab]
"
).
each
(
function
()
{
$
(
this
).
click
(
function
(
e
)
{
e
.
preventDefault
();
self
.
find
(
"
.active
"
).
removeClass
(
"
active
"
);
$
(
this
).
addClass
(
"
active
"
);
about
.
find
(
"
[data-tabbed]
"
).
hide
();
$
(
$
(
this
).
attr
(
"
data-tab
"
)).
fadeIn
();
});
});
$
(
function
()
{
var
$main
=
$
(
"
#Changing
"
);
String
.
prototype
.
decodeHTML
=
function
()
{
return
$
(
"
<div>
"
,
{
html
:
""
+
this
}).
html
();
};
afterLoad
=
function
(
html
)
{
document
.
title
=
html
.
match
(
/<title>
(
.*
?)
<
\/
title>/
)[
1
].
trim
().
decodeHTML
();
/*
Quite UGLY but needed for styling the whole body with ID
Feel free to correct and find a better way
According to this link the probles is that $(html).filter('body').Attr('id') will not work!
http://www.devnetwork.net/viewtopic.php?f=13&t=117065
*/
var
bodyID
=
html
.
match
(
/<body id="
(
.*
?)
">/
)[
1
].
trim
();
$
(
'
body
'
).
attr
(
'
id
'
,
bodyID
);
init
();
};
$
(
window
).
on
(
"
popstate
"
,
function
(
e
)
{
if
(
e
.
originalEvent
.
state
!==
null
)
{
loadPage
(
location
.
href
);}
});
$
(
"
[data-audio-control]
"
).
each
(
function
()
{
var
playPauseButton
=
$
(
this
).
find
(
'
.playpause
'
);
var
audio
=
$
(
'
#
'
+
$
(
this
).
attr
(
'
data-audio
'
)
);
var
audioElement
=
audio
[
0
]
;
//alert($(this).attr('data-audio'));
playPauseButton
.
on
(
'
click
'
,
function
(
e
){
if
(
audioElement
.
paused
==
false
)
{
audioElement
.
pause
();
}
else
{
audioElement
.
play
()
;
}
loadPage
=
function
(
href
)
{
history
.
pushState
({},
''
,
href
);
$main
.
load
(
href
+
"
#Changing>*
"
,
null
,
afterLoad
);
}
;
init
=
function
()
{
$
(
"
a, area
"
).
unbind
(
'
click
'
)
.
on
(
'
click
'
,
function
()
{
var
href
=
$
(
this
).
attr
(
"
href
"
);
if
(
href
.
indexOf
(
document
.
domain
)
>
-
1
||
href
.
indexOf
(
'
:
'
)
===
-
1
)
{
loadPage
(
href
);
return
false
;
}
});
// Bind back event in case of direct control
audio
.
on
(
'
play
'
,
function
(){
playPauseButton
.
addClass
(
'
icon-pause
'
).
removeClass
(
'
icon-play
'
);
}).
on
(
'
pause
'
,
function
(){
playPauseButton
.
addClass
(
'
icon-play
'
).
removeClass
(
'
icon-pause
'
);
$
(
"
.tabs
"
).
each
(
function
()
{
var
self
=
$
(
this
);
var
about
=
$
(
$
(
this
).
attr
(
"
data-tab-about
"
));
about
.
find
(
"
[data-tabbed]:not(:first)
"
).
hide
();
$
(
this
).
find
(
"
[data-tab]:first
"
).
addClass
(
"
active
"
);
$
(
this
).
find
(
"
[data-tab]
"
).
each
(
function
()
{
$
(
this
).
click
(
function
(
e
)
{
e
.
preventDefault
();
self
.
find
(
"
.active
"
).
removeClass
(
"
active
"
);
$
(
this
).
addClass
(
"
active
"
);
about
.
find
(
"
[data-tabbed]
"
).
hide
();
$
(
$
(
this
).
attr
(
"
data-tab
"
)).
fadeIn
();
});
});
});
$
(
"
[data-audio-control]
"
).
each
(
function
()
{
var
playPauseButton
=
$
(
this
).
find
(
'
.playpause
'
);
var
audio
=
$
(
'
#
'
+
$
(
this
).
attr
(
'
data-audio
'
));
var
audioElement
=
audio
[
0
];
//alert($(this).attr('data-audio'));
playPauseButton
.
on
(
'
click
'
,
function
(
e
){
if
(
audioElement
.
paused
==
false
)
{
audioElement
.
pause
();
}
else
{
audioElement
.
play
();
}
});
// Bind back event in case of direct control
audio
.
on
(
'
play
'
,
function
(){
playPauseButton
.
addClass
(
'
icon-pause
'
).
removeClass
(
'
icon-play
'
);
}).
on
(
'
pause
'
,
function
(){
playPauseButton
.
addClass
(
'
icon-play
'
).
removeClass
(
'
icon-pause
'
);
});
});
});
}
init
();
});
panikweb_templates/templates/base.html
View file @
e7865db6
...
...
@@ -25,13 +25,16 @@
<body
id=
"{% block bodyID %}{% endblock %}"
>
{% block meta %}
<div
id=
"metaNav-container"
>
{% include "includes/metaNav.html" %}
</div>
{% endblock %}
<div
id=
"
All
"
>
<div
id=
"
Commons
"
>
<div
id=
"Panik"
>
{% block logo %}
<img
class=
"logo"
src=
"{{ STATIC_URL }}/img/LogoPanik.jpg"
/>
{% endblock %}
</div>
<div
id=
"Listen"
>
{% block listen %}{% include "includes/player.html" %}{% endblock %}
</div>
</div>
<div
id=
"Changing"
>
<div
id=
"Nav"
>
<div
class=
"wrapper"
>
{% block nav %}{% endblock %}
...
...
@@ -45,7 +48,6 @@
{% block links %}{% endblock %}
</div>
</div>
</div>
{% block pageend %}
...
...
panikweb_templates/templates/emissions/emission_detail.html
View file @
e7865db6
{% extends "base.html" %}
{% block bodyID %}Emissions{% endblock %}
{% block listen %}{% endblock %}
{% block main %}
<div
class=
"emission padded"
>
<div
class=
"wrapper half"
>
...
...
panikweb_templates/templates/emissions/newsitem_detail.html
View file @
e7865db6
...
...
@@ -2,7 +2,6 @@
{% extends "news.html" %}
{% load thumbnails %}
{% block bodyID %}News{% endblock %}
{% block listen %}{% endblock %}
{% block main %}
<div
class=
"news detail padded"
>
<div
class=
"wrapper half"
>
...
...
panikweb_templates/templates/grid.html
View file @
e7865db6
...
...
@@ -2,7 +2,6 @@
{% load paniktags %}
{% block bodyID %}Grid{% endblock %}
{% block listen %}{% endblock %}
{% block title %}La grille{% endblock %}
{% block nav %}
<nav
id=
"gridNav"
class=
""
>
...
...
panikweb_templates/templates/news.html
View file @
e7865db6
{% extends "base.html"%}
{% block listen %}{% endblock %}
{% block bodyID %}News{% endblock %}
{% block title %}News{% endblock %}
{% block nav %}
...
...
panikweb_templates/templates/program.html
View file @
e7865db6
{% extends "base.html" %}
{% block bodyID %}Program{% endblock %}
{% block title %}Programme{% endblock %}
{% block listen %}{% endblock %}
{% block nav %}
<div
class=
"program tabs"
data-tab-about=
"#ProgramContent"
>
<nav
class=
""
>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment