Clément Fauconnier
7 years ago
commit
d75d84b359
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 518 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,13 @@ |
|||||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||||
|
<widget xmlns="http://www.w3.org/ns/widgets" |
||||||
|
xmlns:ub="http://uniboard.mnemis.com/widgets" |
||||||
|
id="Horloge" |
||||||
|
version="1.0" |
||||||
|
width="400" |
||||||
|
height="420" |
||||||
|
ub:resizable="false" > |
||||||
|
<name>Horloge</name> |
||||||
|
<author> fbocquet@laposte.net </author> |
||||||
|
<descrition> </descrition> |
||||||
|
<content src="index.html"/> |
||||||
|
</widget> |
||||||
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,60 @@ |
|||||||
|
<html> |
||||||
|
|
||||||
|
<head> |
||||||
|
<title>Horloge</title> |
||||||
|
|
||||||
|
<!-- |
||||||
|
Copyright (c) 2010 Ruediger Appel |
||||||
|
ludi at mac dot com |
||||||
|
Date: 2010-08-08 |
||||||
|
Version: 1.0.0 |
||||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||||
|
you may not use this file except in compliance with the License. |
||||||
|
You may obtain a copy of the License at |
||||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||||
|
Unless required by applicable law or agreed to in writing, software |
||||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
See the License for the specific language governing permissions and |
||||||
|
limitations under the License. |
||||||
|
* Known Issues : Shadows for some second hands is not on one layer |
||||||
|
--> |
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="station-clock.js"></script> |
||||||
|
<script type="text/javascript"> |
||||||
|
|
||||||
|
var clock = new StationClock("clock"); |
||||||
|
clock.body = StationClock.RoundBody; |
||||||
|
clock.dial = StationClock.SwissStrokeDial; |
||||||
|
clock.hourHand = StationClock.BarMinuteHand; |
||||||
|
clock.minuteHand = StationClock.SwissMinuteHand; |
||||||
|
clock.secondHand = StationClock.HoleShapedSecondHand; |
||||||
|
clock.boss = StationClock.RedBoss; |
||||||
|
clock.minuteHandBehavoir = StationClock.BouncingMinuteHand; |
||||||
|
clock.secondHandBehavoir = StationClock.BouncingSecondHand; |
||||||
|
|
||||||
|
animate(); |
||||||
|
|
||||||
|
function animate() { |
||||||
|
clock.draw(); |
||||||
|
window.setTimeout("animate()", 50); |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
|
||||||
|
<div style="text-align: center; width: 100%; height:100%; "> |
||||||
|
<div style="line-height: 0px; "> |
||||||
|
<div style="overflow: hidden; "> |
||||||
|
|
||||||
|
<canvas id="clock" width="400" height="400"> |
||||||
|
Horloge |
||||||
|
</canvas> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
|
||||||
|
</html> |
||||||
@ -0,0 +1,488 @@ |
|||||||
|
/*! |
||||||
|
* station-clock.js |
||||||
|
* |
||||||
|
* Copyright (c) 2010 Ruediger Appel |
||||||
|
* ludi at mac dot com |
||||||
|
* |
||||||
|
* Date: 2016-02-16 |
||||||
|
* Version: 1.0.1 |
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||||
|
* you may not use this file except in compliance with the License. |
||||||
|
* You may obtain a copy of the License at |
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
* |
||||||
|
* Known Issues: |
||||||
|
* |
||||||
|
* Shadows for some second hands is not on one layer |
||||||
|
*
|
||||||
|
* Thanks to Paul Schröfl for the Wiener Würfeluhr |
||||||
|
*/ |
||||||
|
|
||||||
|
// clock body (Uhrgehäuse)
|
||||||
|
StationClock.NoBody = 0; |
||||||
|
StationClock.SmallWhiteBody = 1; |
||||||
|
StationClock.RoundBody = 2; |
||||||
|
StationClock.RoundGreenBody = 3; |
||||||
|
StationClock.SquareBody = 4; |
||||||
|
StationClock.ViennaBody = 5; |
||||||
|
|
||||||
|
// stroke dial (Zifferblatt)
|
||||||
|
StationClock.NoDial = 0; |
||||||
|
StationClock.GermanHourStrokeDial = 1; |
||||||
|
StationClock.GermanStrokeDial = 2; |
||||||
|
StationClock.AustriaStrokeDial = 3; |
||||||
|
StationClock.SwissStrokeDial = 4; |
||||||
|
StationClock.ViennaStrokeDial = 5; |
||||||
|
|
||||||
|
//clock hour hand (Stundenzeiger)
|
||||||
|
StationClock.PointedHourHand = 1; |
||||||
|
StationClock.BarHourHand = 2; |
||||||
|
StationClock.SwissHourHand = 3; |
||||||
|
StationClock.ViennaHourHand = 4; |
||||||
|
|
||||||
|
//clock minute hand (Minutenzeiger)
|
||||||
|
StationClock.PointedMinuteHand = 1; |
||||||
|
StationClock.BarMinuteHand = 2; |
||||||
|
StationClock.SwissMinuteHand = 3; |
||||||
|
StationClock.ViennaMinuteHand = 4; |
||||||
|
|
||||||
|
//clock second hand (Sekundenzeiger)
|
||||||
|
StationClock.NoSecondHand = 0; |
||||||
|
StationClock.BarSecondHand = 1; |
||||||
|
StationClock.HoleShapedSecondHand = 2; |
||||||
|
StationClock.NewHoleShapedSecondHand = 3; |
||||||
|
StationClock.SwissSecondHand = 4; |
||||||
|
|
||||||
|
// clock boss (Zeigerabdeckung)
|
||||||
|
StationClock.NoBoss = 0; |
||||||
|
StationClock.BlackBoss = 1; |
||||||
|
StationClock.RedBoss = 2; |
||||||
|
StationClock.ViennaBoss = 3; |
||||||
|
|
||||||
|
// minute hand behavoir
|
||||||
|
StationClock.CreepingMinuteHand = 0; |
||||||
|
StationClock.BouncingMinuteHand = 1; |
||||||
|
StationClock.ElasticBouncingMinuteHand = 2; |
||||||
|
|
||||||
|
// second hand behavoir
|
||||||
|
StationClock.CreepingSecondHand = 0; |
||||||
|
StationClock.BouncingSecondHand = 1; |
||||||
|
StationClock.ElasticBouncingSecondHand = 2; |
||||||
|
StationClock.OverhastySecondHand = 3; |
||||||
|
|
||||||
|
|
||||||
|
function StationClock(clockId) { |
||||||
|
this.clockId = clockId;
|
||||||
|
this.radius = 0; |
||||||
|
|
||||||
|
// hour offset
|
||||||
|
this.hourOffset = 0; |
||||||
|
|
||||||
|
// clock body
|
||||||
|
this.body = StationClock.RoundBody; |
||||||
|
this.bodyShadowColor = "rgba(0,0,0,0.5)"; |
||||||
|
this.bodyShadowOffsetX = 0.03; |
||||||
|
this.bodyShadowOffsetY = 0.03; |
||||||
|
this.bodyShadowBlur = 0.06; |
||||||
|
|
||||||
|
// body dial
|
||||||
|
this.dial = StationClock.GermanStrokeDial; |
||||||
|
this.dialColor = 'rgb(60,60,60)'; |
||||||
|
|
||||||
|
// clock hands
|
||||||
|
this.hourHand = StationClock.PointedHourHand; |
||||||
|
this.minuteHand = StationClock.PointedMinuteHand; |
||||||
|
this.secondHand = StationClock.HoleShapedSecondHand; |
||||||
|
this.handShadowColor = 'rgba(0,0,0,0.3)'; |
||||||
|
this.handShadowOffsetX = 0.03; |
||||||
|
this.handShadowOffsetY = 0.03; |
||||||
|
this.handShadowBlur = 0.04; |
||||||
|
|
||||||
|
// clock colors
|
||||||
|
this.hourHandColor = 'rgb(0,0,0)'; |
||||||
|
this.minuteHandColor = 'rgb(0,0,0)'; |
||||||
|
this.secondHandColor = 'rgb(200,0,0)'; |
||||||
|
|
||||||
|
// clock boss
|
||||||
|
this.boss = StationClock.NoBoss; |
||||||
|
this.bossShadowColor = "rgba(0,0,0,0.2)"; |
||||||
|
this.bossShadowOffsetX = 0.02; |
||||||
|
this.bossShadowOffsetY = 0.02; |
||||||
|
this.bossShadowBlur = 0.03; |
||||||
|
|
||||||
|
// hand behavoir
|
||||||
|
this.minuteHandBehavoir = StationClock.CreepingMinuteHand; |
||||||
|
this.secondHandBehavoir = StationClock.OverhastySecondHand; |
||||||
|
|
||||||
|
// hand animation
|
||||||
|
this.minuteHandAnimationStep = 0; |
||||||
|
this.secondHandAnimationStep = 0; |
||||||
|
this.lastMinute = 0; |
||||||
|
this.lastSecond = 0; |
||||||
|
}; |
||||||
|
|
||||||
|
StationClock.prototype.draw = function() { |
||||||
|
var clock = document.getElementById(this.clockId); |
||||||
|
if (clock) { |
||||||
|
var context = clock.getContext('2d'); |
||||||
|
if (context) { |
||||||
|
this.radius = 0.75 * (Math.min(clock.width, clock.height) / 2); |
||||||
|
|
||||||
|
// clear canvas and set new origin
|
||||||
|
context.clearRect(0, 0, clock.width, clock.height); |
||||||
|
context.save(); |
||||||
|
context.translate(clock.width / 2, clock.height / 2); |
||||||
|
|
||||||
|
// draw body
|
||||||
|
if (this.body != StationClock.NoStrokeBody) { |
||||||
|
context.save(); |
||||||
|
switch (this.body) { |
||||||
|
case StationClock.SmallWhiteBody: |
||||||
|
this.fillCircle(context, "rgb(255,255,255)", 0, 0, 1); |
||||||
|
break; |
||||||
|
case StationClock.RoundBody: |
||||||
|
this.fillCircle(context, "rgb(255,255,255)", 0, 0, 1.1); |
||||||
|
context.save(); |
||||||
|
this.setShadow(context, this.bodyShadowColor, this.bodyShadowOffsetX, this.bodyShadowOffsetY, this.bodyShadowBlur); |
||||||
|
this.strokeCircle(context, "rgb(0,0,0)", 0, 0, 1.1, 0.07); |
||||||
|
context.restore(); |
||||||
|
break; |
||||||
|
case StationClock.RoundGreenBody: |
||||||
|
this.fillCircle(context, "rgb(235,236,212)", 0, 0, 1.1); |
||||||
|
context.save(); |
||||||
|
this.setShadow(context, this.bodyShadowColor, this.bodyShadowOffsetX, this.bodyShadowOffsetY, this.bodyShadowBlur); |
||||||
|
this.strokeCircle(context, "rgb(180,180,180)", 0, 0, 1.1, 0.2); |
||||||
|
context.restore(); |
||||||
|
this.strokeCircle(context, "rgb(29,84,31)", 0, 0, 1.15, 0.1); |
||||||
|
context.save(); |
||||||
|
this.setShadow(context, "rgba(235,236,212,100)", -0.02, -0.02, 0.09); |
||||||
|
this.strokeCircle(context, 'rgb(76,128,110)', 0, 0, 1.1, 0.08); |
||||||
|
context.restore(); |
||||||
|
break; |
||||||
|
case StationClock.SquareBody: |
||||||
|
context.save(); |
||||||
|
this.setShadow(context, this.bodyShadowColor, this.bodyShadowOffsetX, this.bodyShadowOffsetY, this.bodyShadowBlur); |
||||||
|
this.fillSquare(context, 'rgb(237,235,226)', 0, 0, 2.4); |
||||||
|
this.strokeSquare(context, 'rgb(38,106,186)', 0, 0, 2.32, 0.16); |
||||||
|
context.restore(); |
||||||
|
context.save(); |
||||||
|
this.setShadow(context, this.bodyShadowColor, this.bodyShadowOffsetX, this.bodyShadowOffsetY, this.bodyShadowBlur); |
||||||
|
this.strokeSquare(context, 'rgb(42,119,208)', 0, 0, 2.24, 0.08); |
||||||
|
context.restore(); |
||||||
|
break; |
||||||
|
case StationClock.ViennaBody: |
||||||
|
context.save(); |
||||||
|
this.fillSymmetricPolygon(context, 'rgb(156,156,156)', [[-1.2,1.2],[-1.2,-1.2]],0.1); |
||||||
|
this.fillPolygon(context, 'rgb(156,156,156)', 0,1.2 , 1.2,1.2 , 1.2,0); |
||||||
|
this.fillCircle(context, 'rgb(255,255,255)', 0, 0, 1.05, 0.08); |
||||||
|
this.strokeCircle(context, 'rgb(0,0,0)', 0, 0, 1.05, 0.01); |
||||||
|
this.strokeCircle(context, 'rgb(100,100,100)', 0, 0, 1.1, 0.01); |
||||||
|
this.fillPolygon(context, 'rgb(100,100,100)', 0.45,1.2 , 1.2,1.2 , 1.2,0.45); |
||||||
|
this.fillPolygon(context, 'rgb(170,170,170)', 0.45,-1.2 , 1.2,-1.2 , 1.2,-0.45); |
||||||
|
this.fillPolygon(context, 'rgb(120,120,120)', -0.45,1.2 , -1.2,1.2 , -1.2,0.45); |
||||||
|
this.fillPolygon(context, 'rgb(200,200,200)', -0.45,-1.2 , -1.2,-1.2 , -1.2,-0.45); |
||||||
|
this.strokeSymmetricPolygon(context, 'rgb(156,156,156)', [[-1.2,1.2],[-1.2,-1.2]],0.01); |
||||||
|
this.fillPolygon(context, 'rgb(255,0,0)', 0.05,-0.6 , 0.15,-0.6 , 0.15,-0.45 , 0.05,-0.45); |
||||||
|
this.fillPolygon(context, 'rgb(255,0,0)', -0.05,-0.6 , -0.15,-0.6 , -0.15,-0.45 , -0.05,-0.45); |
||||||
|
this.fillPolygon(context, 'rgb(255,0,0)', 0.05,-0.35 , 0.15,-0.35 , 0.15,-0.30 , 0.10,-0.20 , 0.05,-0.20); |
||||||
|
this.fillPolygon(context, 'rgb(255,0,0)', -0.05,-0.35 , -0.15,-0.35 , -0.15,-0.30 , -0.10,-0.20 , -0.05,-0.20); |
||||||
|
context.restore(); |
||||||
|
break; |
||||||
|
} |
||||||
|
context.restore(); |
||||||
|
} |
||||||
|
|
||||||
|
// draw dial
|
||||||
|
for (var i = 0; i < 60; i++) { |
||||||
|
context.save(); |
||||||
|
context.rotate(i * Math.PI / 30); |
||||||
|
switch (this.dial) { |
||||||
|
case StationClock.SwissStrokeDial: |
||||||
|
if ((i % 5) == 0) { |
||||||
|
this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.75, 0.07); |
||||||
|
} else { |
||||||
|
this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.92, 0.026); |
||||||
|
} |
||||||
|
break; |
||||||
|
case StationClock.AustriaStrokeDial: |
||||||
|
if ((i % 5) == 0) { |
||||||
|
this.fillPolygon(context, this.dialColor, -0.04, -1.0, 0.04, -1.0, 0.03, -0.78, -0.03, -0.78); |
||||||
|
} else { |
||||||
|
this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.94, 0.02); |
||||||
|
} |
||||||
|
break; |
||||||
|
case StationClock.GermanStrokeDial: |
||||||
|
if ((i % 15) == 0) { |
||||||
|
this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.70, 0.08); |
||||||
|
} else if ((i % 5) == 0) { |
||||||
|
this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.76, 0.08); |
||||||
|
} else { |
||||||
|
this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.92, 0.036); |
||||||
|
} |
||||||
|
break; |
||||||
|
case StationClock.GermanHourStrokeDial: |
||||||
|
if ((i % 15) == 0) { |
||||||
|
this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.70, 0.10); |
||||||
|
} else if ((i % 5) == 0) { |
||||||
|
this.strokeLine(context, this.dialColor, 0.0, -1.0, 0.0, -0.74, 0.08); |
||||||
|
} |
||||||
|
break; |
||||||
|
case StationClock.ViennaStrokeDial: |
||||||
|
if ((i % 15) == 0) { |
||||||
|
this.fillPolygon(context, this.dialColor, 0.7,-0.1, 0.6,0, 0.7,0.1, 1,0.03, 1,-0.03); |
||||||
|
} else if ((i % 5) == 0) { |
||||||
|
this.fillPolygon(context, this.dialColor, 0.85,-0.06, 0.78,0, 0.85,0.06, 1,0.03, 1,-0.03); |
||||||
|
} |
||||||
|
this.fillCircle(context, this.dialColor, 0.0, -1.0, 0.03); |
||||||
|
break; |
||||||
|
} |
||||||
|
context.restore(); |
||||||
|
} |
||||||
|
|
||||||
|
// get current time
|
||||||
|
var time = new Date(); |
||||||
|
var millis = time.getMilliseconds() / 1000.0; |
||||||
|
var seconds = time.getSeconds(); |
||||||
|
var minutes = time.getMinutes(); |
||||||
|
var hours = time.getHours() + this.hourOffset; |
||||||
|
|
||||||
|
// draw hour hand
|
||||||
|
context.save(); |
||||||
|
context.rotate(hours * Math.PI / 6 + minutes * Math.PI / 360); |
||||||
|
this.setShadow(context, this.handShadowColor, this.handShadowOffsetX, this.handShadowOffsetY, this.handShadowBlur); |
||||||
|
switch (this.hourHand) { |
||||||
|
case StationClock.BarHourHand: |
||||||
|
this.fillPolygon(context, this.hourHandColor, -0.05, -0.6, 0.05, -0.6, 0.05, 0.15, -0.05, 0.15); |
||||||
|
break; |
||||||
|
case StationClock.PointedHourHand: |
||||||
|
this.fillPolygon(context, this.hourHandColor, 0.0, -0.6, 0.065, -0.53, 0.065, 0.19, -0.065, 0.19, -0.065, -0.53); |
||||||
|
break; |
||||||
|
case StationClock.SwissHourHand: |
||||||
|
this.fillPolygon(context, this.hourHandColor, -0.05, -0.6, 0.05, -0.6, 0.065, 0.26, -0.065, 0.26); |
||||||
|
break; |
||||||
|
case StationClock.ViennaHourHand: |
||||||
|
this.fillSymmetricPolygon(context, this.hourHandColor, [[-0.02,-0.72],[-0.08,-0.56],[-0.15,-0.45],[-0.06,-0.30],[-0.03,0],[-0.1,0.2],[-0.05,0.23],[-0.03,0.2]]); |
||||||
|
} |
||||||
|
context.restore(); |
||||||
|
|
||||||
|
// draw minute hand
|
||||||
|
context.save(); |
||||||
|
switch (this.minuteHandBehavoir) { |
||||||
|
case StationClock.CreepingMinuteHand: |
||||||
|
context.rotate((minutes + seconds / 60) * Math.PI / 30); |
||||||
|
break; |
||||||
|
case StationClock.BouncingMinuteHand: |
||||||
|
context.rotate(minutes * Math.PI / 30); |
||||||
|
break; |
||||||
|
case StationClock.ElasticBouncingMinuteHand: |
||||||
|
if (this.lastMinute != minutes) { |
||||||
|
this.minuteHandAnimationStep = 3; |
||||||
|
this.lastMinute = minutes; |
||||||
|
} |
||||||
|
context.rotate((minutes + this.getAnimationOffset(this.minuteHandAnimationStep)) * Math.PI / 30); |
||||||
|
this.minuteHandAnimationStep--; |
||||||
|
break; |
||||||
|
} |
||||||
|
this.setShadow(context, this.handShadowColor, this.handShadowOffsetX, this.handShadowOffsetY, this.handShadowBlur); |
||||||
|
switch (this.minuteHand) { |
||||||
|
case StationClock.BarMinuteHand: |
||||||
|
this.fillPolygon(context, this.minuteHandColor, -0.05, -0.9, 0.035, -0.9, 0.035, 0.23, -0.05, 0.23); |
||||||
|
break; |
||||||
|
case StationClock.PointedMinuteHand: |
||||||
|
this.fillPolygon(context, this.minuteHandColor, 0.0, -0.93, 0.045, -0.885, 0.045, 0.23, -0.045, 0.23, -0.045, -0.885); |
||||||
|
break; |
||||||
|
case StationClock.SwissMinuteHand: |
||||||
|
this.fillPolygon(context, this.minuteHandColor, -0.035, -0.93, 0.035, -0.93, 0.05, 0.25, -0.05, 0.25); |
||||||
|
break; |
||||||
|
case StationClock.ViennaMinuteHand: |
||||||
|
this.fillSymmetricPolygon(context, this.minuteHandColor, [[-0.02,-0.98],[-0.09,-0.7],[-0.03,0],[-0.05,0.2],[-0.01,0.4]]); |
||||||
|
} |
||||||
|
context.restore(); |
||||||
|
|
||||||
|
// draw second hand
|
||||||
|
context.save(); |
||||||
|
switch (this.secondHandBehavoir) { |
||||||
|
case StationClock.OverhastySecondHand: |
||||||
|
context.rotate(Math.min((seconds + millis) * (60.0 / 58.5), 60.0) * Math.PI / 30); |
||||||
|
break; |
||||||
|
case StationClock.CreepingSecondHand: |
||||||
|
context.rotate((seconds + millis) * Math.PI / 30); |
||||||
|
break; |
||||||
|
case StationClock.BouncingSecondHand: |
||||||
|
context.rotate(seconds * Math.PI / 30); |
||||||
|
break; |
||||||
|
case StationClock.ElasticBouncingSecondHand: |
||||||
|
if (this.lastSecond != seconds) { |
||||||
|
this.secondHandAnimationStep = 3; |
||||||
|
this.lastSecond = seconds; |
||||||
|
} |
||||||
|
context.rotate((seconds + this.getAnimationOffset(this.secondHandAnimationStep)) * Math.PI / 30); |
||||||
|
this.secondHandAnimationStep--; |
||||||
|
break; |
||||||
|
} |
||||||
|
this.setShadow(context, this.handShadowColor, this.handShadowOffsetX, this.handShadowOffsetY, this.handShadowBlur); |
||||||
|
switch (this.secondHand) { |
||||||
|
case StationClock.BarSecondHand: |
||||||
|
this.fillPolygon(context, this.secondHandColor, -0.006, -0.92, 0.006, -0.92, 0.028, 0.23, -0.028, 0.23); |
||||||
|
break; |
||||||
|
case StationClock.HoleShapedSecondHand: |
||||||
|
this.fillPolygon(context, this.secondHandColor, 0.0, -0.9, 0.011, -0.889, 0.01875, -0.6, -0.01875, -0.6, -0.011, -0.889); |
||||||
|
this.fillPolygon(context, this.secondHandColor, 0.02, -0.4, 0.025, 0.22, -0.025, 0.22, -0.02, -0.4); |
||||||
|
this.strokeCircle(context, this.secondHandColor, 0, -0.5, 0.083, 0.066); |
||||||
|
break; |
||||||
|
case StationClock.NewHoleShapedSecondHand: |
||||||
|
this.fillPolygon(context, this.secondHandColor, 0.0, -0.95, 0.015, -0.935, 0.0187, -0.65, -0.0187, -0.65, -0.015, -0.935); |
||||||
|
this.fillPolygon(context, this.secondHandColor, 0.022, -0.45, 0.03, 0.27, -0.03, 0.27, -0.022, -0.45); |
||||||
|
this.strokeCircle(context, this.secondHandColor, 0, -0.55, 0.085, 0.07); |
||||||
|
break; |
||||||
|
case StationClock.SwissSecondHand: |
||||||
|
this.strokeLine(context, this.secondHandColor, 0.0, -0.6, 0.0, 0.35, 0.026); |
||||||
|
this.fillCircle(context, this.secondHandColor, 0, -0.64, 0.1); |
||||||
|
break; |
||||||
|
case StationClock.ViennaSecondHand: |
||||||
|
this.strokeLine(context, this.secondHandColor, 0.0, -0.6, 0.0, 0.35, 0.026); |
||||||
|
this.fillCircle(context, this.secondHandColor, 0, -0.64, 0.1); |
||||||
|
break; |
||||||
|
} |
||||||
|
context.restore(); |
||||||
|
|
||||||
|
// draw clock boss
|
||||||
|
if (this.boss != StationClock.NoBoss) { |
||||||
|
context.save(); |
||||||
|
this.setShadow(context, this.bossShadowColor, this.bossShadowOffsetX, this.bossShadowOffsetY, this.bossShadowBlur); |
||||||
|
switch (this.boss) { |
||||||
|
case StationClock.BlackBoss: |
||||||
|
this.fillCircle(context, 'rgb(0,0,0)', 0, 0, 0.1); |
||||||
|
break; |
||||||
|
case StationClock.RedBoss: |
||||||
|
this.fillCircle(context, 'rgb(220,0,0)', 0, 0, 0.06); |
||||||
|
break; |
||||||
|
case StationClock.ViennaBoss: |
||||||
|
this.fillCircle(context, 'rgb(0,0,0)', 0, 0, 0.07); |
||||||
|
break; |
||||||
|
} |
||||||
|
context.restore(); |
||||||
|
} |
||||||
|
|
||||||
|
context.restore(); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
StationClock.prototype.getAnimationOffset = function(animationStep) { |
||||||
|
switch (animationStep) { |
||||||
|
case 3: return 0.2; |
||||||
|
case 2: return -0.1; |
||||||
|
case 1: return 0.05; |
||||||
|
} |
||||||
|
return 0; |
||||||
|
}; |
||||||
|
|
||||||
|
StationClock.prototype.setShadow = function(context, color, offsetX, offsetY, blur) { |
||||||
|
if (color) { |
||||||
|
context.shadowColor = color; |
||||||
|
context.shadowOffsetX = this.radius * offsetX; |
||||||
|
context.shadowOffsetY = this.radius * offsetY; |
||||||
|
context.shadowBlur = this.radius * blur; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
StationClock.prototype.fillCircle = function(context, color, x, y, radius) { |
||||||
|
if (color) { |
||||||
|
context.beginPath(); |
||||||
|
context.fillStyle = color; |
||||||
|
context.arc(x * this.radius, y * this.radius, radius * this.radius, 0, 2 * Math.PI, true); |
||||||
|
context.fill(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
StationClock.prototype.strokeCircle = function(context, color, x, y, radius, lineWidth) { |
||||||
|
if (color) { |
||||||
|
context.beginPath(); |
||||||
|
context.strokeStyle = color; |
||||||
|
context.lineWidth = lineWidth * this.radius; |
||||||
|
context.arc(x * this.radius, y * this.radius, radius * this.radius, 0, 2 * Math.PI, true); |
||||||
|
context.stroke(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
StationClock.prototype.fillSquare = function(context, color, x, y, size) { |
||||||
|
if (color) { |
||||||
|
context.fillStyle = color; |
||||||
|
context.fillRect((x - size / 2) * this.radius, (y -size / 2) * this.radius, size * this.radius, size * this.radius); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
StationClock.prototype.strokeSquare = function(context, color, x, y, size, lineWidth) { |
||||||
|
if (color) { |
||||||
|
context.strokeStyle = color; |
||||||
|
context.lineWidth = lineWidth * this.radius; |
||||||
|
context.strokeRect((x - size / 2) * this.radius, (y -size / 2) * this.radius, size * this.radius, size * this.radius); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
StationClock.prototype.strokeLine = function(context, color, x1, y1, x2, y2, width) { |
||||||
|
if (color) { |
||||||
|
context.beginPath(); |
||||||
|
context.strokeStyle = color; |
||||||
|
context.moveTo(x1 * this.radius, y1 * this.radius); |
||||||
|
context.lineTo(x2 * this.radius, y2 * this.radius); |
||||||
|
context.lineWidth = width * this.radius; |
||||||
|
context.stroke(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
StationClock.prototype.fillPolygon = function(context, color, x1, y1, x2, y2, x3, y3, x4, y4, x5, y5) { |
||||||
|
if (color) { |
||||||
|
context.beginPath(); |
||||||
|
context.fillStyle = color; |
||||||
|
context.moveTo(x1 * this.radius, y1 * this.radius); |
||||||
|
context.lineTo(x2 * this.radius, y2 * this.radius); |
||||||
|
context.lineTo(x3 * this.radius, y3 * this.radius); |
||||||
|
context.lineTo(x4 * this.radius, y4 * this.radius); |
||||||
|
if ((x5 != undefined) && (y5 != undefined)) { |
||||||
|
context.lineTo(x5 * this.radius, y5 * this.radius); |
||||||
|
} |
||||||
|
context.lineTo(x1 * this.radius, y1 * this.radius); |
||||||
|
context.fill(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
StationClock.prototype.fillSymmetricPolygon = function(context, color, points) { |
||||||
|
context.beginPath(); |
||||||
|
context.fillStyle = color; |
||||||
|
context.moveTo(points[0][0] * this.radius, points[0][1] * this.radius); |
||||||
|
for (var i = 1; i < points.length; i++) { |
||||||
|
context.lineTo(points[i][0] * this.radius, points[i][1] * this.radius); |
||||||
|
} |
||||||
|
for (var i = points.length - 1; i >= 0; i--) { |
||||||
|
context.lineTo(0 - points[i][0] * this.radius, points[i][1] * this.radius); |
||||||
|
} |
||||||
|
context.lineTo(points[0][0] * this.radius, points[0][1] * this.radius); |
||||||
|
context.fill(); |
||||||
|
}; |
||||||
|
|
||||||
|
StationClock.prototype.strokeSymmetricPolygon = function(context, color, points, width) { |
||||||
|
context.beginPath(); |
||||||
|
context.strokeStyle = color; |
||||||
|
context.moveTo(points[0][0] * this.radius, points[0][1] * this.radius); |
||||||
|
for (var i = 1; i < points.length; i++) { |
||||||
|
context.lineTo(points[i][0] * this.radius, points[i][1] * this.radius); |
||||||
|
} |
||||||
|
for (var i = points.length - 1; i >= 0; i--) { |
||||||
|
context.lineTo(0 - points[i][0] * this.radius, points[i][1] * this.radius); |
||||||
|
} |
||||||
|
context.lineTo(points[0][0] * this.radius, points[0][1] * this.radius); |
||||||
|
context.lineWidth = width * this.radius; |
||||||
|
context.stroke(); |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
@ -1,16 +0,0 @@ |
|||||||
<?xml version="1.0" encoding="UTF-8"?> |
|
||||||
<widget xmlns="http://www.w3.org/ns/widgets" |
|
||||||
xmlns:ub="http://uniboard.mnemis.com/widgets" |
|
||||||
id="http://uniboard.mnemis.com/widgets/webbrowser" |
|
||||||
version="1.1" |
|
||||||
width="900" |
|
||||||
height="500" |
|
||||||
ub:resizable="true"> |
|
||||||
|
|
||||||
<name>Choisir</name> |
|
||||||
<author href="http://www.getuniboard.com" |
|
||||||
email="info@mnemis.com">Mnemis SA</author> |
|
||||||
<description>Choisir widget</description> |
|
||||||
|
|
||||||
<content src="index.html"/> |
|
||||||
</widget> |
|
||||||
@ -1,315 +0,0 @@ |
|||||||
html, body{ |
|
||||||
width: 100%; |
|
||||||
padding: 0; |
|
||||||
height: auto; |
|
||||||
background-color: white; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar { |
|
||||||
width: 14px; |
|
||||||
background-color:white; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb { |
|
||||||
border-radius: 10px; |
|
||||||
background-color:lightgray; |
|
||||||
border: 2px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:start{ |
|
||||||
border-radius: 10px; |
|
||||||
background-color:lightgray; |
|
||||||
background-image: url(../images/trgUp.png); |
|
||||||
background-size: 8px auto; |
|
||||||
background-position: center; |
|
||||||
background-repeat: no-repeat; |
|
||||||
border: 2px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:end{ |
|
||||||
border-radius: 10px; |
|
||||||
background-color:lightgray; |
|
||||||
background-image: url(../images/trgDown.png); |
|
||||||
background-size: 8px auto; |
|
||||||
background-position: center; |
|
||||||
background-repeat: no-repeat; |
|
||||||
border: 2px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
|
|
||||||
#disc_nav_cont{ |
|
||||||
height: auto; |
|
||||||
position: fixed; |
|
||||||
left: 0; |
|
||||||
bottom: 0; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.disclaimer{ |
|
||||||
padding: 5px; |
|
||||||
text-align: center; |
|
||||||
background-color: #BBBBBB; |
|
||||||
border-top: solid 4px #EEEEEE; |
|
||||||
border-bottom: none; |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
.resultFooter{ |
|
||||||
width: 100%; |
|
||||||
padding: 3px; |
|
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
|
||||||
font-weight: bold; |
|
||||||
font-size: x-large; |
|
||||||
text-align: center; |
|
||||||
background-color: white; |
|
||||||
} |
|
||||||
|
|
||||||
#searchResult { |
|
||||||
overflow: hidden; |
|
||||||
text-align: center; |
|
||||||
margin-top: 50px; |
|
||||||
margin-bottom: 85px; |
|
||||||
} |
|
||||||
|
|
||||||
.search{ |
|
||||||
position: fixed; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
padding: 5px; |
|
||||||
background-color: #BBBBBB; |
|
||||||
border-bottom: solid 4px #EEEEEE; |
|
||||||
} |
|
||||||
|
|
||||||
.search, |
|
||||||
.disclaimer { |
|
||||||
width: 100%; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.searchInput{ |
|
||||||
padding: 3px; |
|
||||||
float: left; |
|
||||||
width: 100%; |
|
||||||
border-radius: 3px; |
|
||||||
border-style: none; |
|
||||||
height: 22px; |
|
||||||
line-height: 18px; |
|
||||||
vertical-align: middle; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.searchButton{ |
|
||||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
|
||||||
width: 24px; |
|
||||||
height: 24px; |
|
||||||
overflow: hidden; |
|
||||||
position: absolute; |
|
||||||
right: 30px; |
|
||||||
top: 9px; |
|
||||||
margin-left: -2px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.subSearch{ |
|
||||||
margin: 0; |
|
||||||
float: left; |
|
||||||
} |
|
||||||
|
|
||||||
#subSearchInput{ |
|
||||||
width: 100%; |
|
||||||
float: left; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
padding: 5px; |
|
||||||
padding-right: 26px; |
|
||||||
} |
|
||||||
|
|
||||||
#subSearchFilter{ |
|
||||||
width: 100%; |
|
||||||
float: left; |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.searchResult{ |
|
||||||
width: 98%; |
|
||||||
padding: 3px; |
|
||||||
background-color:#123456; |
|
||||||
} |
|
||||||
|
|
||||||
.imgContainer{ |
|
||||||
display: inline-block; |
|
||||||
padding: 3px; |
|
||||||
margin: 3px; |
|
||||||
text-align: center; |
|
||||||
overflow: hidden; |
|
||||||
font-size: small; |
|
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
|
||||||
border: 1px solid #666; |
|
||||||
border-radius: 5px; |
|
||||||
-webkit-box-shadow: #dadada -1px 0 4px; |
|
||||||
-webkit-border-radius: 5px; |
|
||||||
box-shadow: #666 -1px 0 4px; |
|
||||||
vertical-align: top; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.filterContainer{ |
|
||||||
float: left; |
|
||||||
margin: 2px; |
|
||||||
padding: 2px; |
|
||||||
font-size: 14px; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.filterSelect{ |
|
||||||
border-style:none; |
|
||||||
-webkit-border-top-right-radius: 15px; |
|
||||||
-webkit-border-bottom-right-radius: 15px; |
|
||||||
-moz-border-radius-topright: 15px; |
|
||||||
-moz-border-radius-bottomright: 15px; |
|
||||||
border-top-right-radius: 15px; |
|
||||||
margin-top: 2px; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
span{ |
|
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
|
||||||
color: #666; |
|
||||||
} |
|
||||||
|
|
||||||
[draggable] { |
|
||||||
-webkit-user-select: none; |
|
||||||
user-select: none; |
|
||||||
} |
|
||||||
|
|
||||||
.toggleFilters{ |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
background-position: center; |
|
||||||
background-image: url(../images/down.png); |
|
||||||
position: absolute; |
|
||||||
top: 11px; |
|
||||||
right: 6px; |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.colors_line { |
|
||||||
float: left; |
|
||||||
margin: 4px; |
|
||||||
margin-right: 0; |
|
||||||
clear: left; |
|
||||||
} |
|
||||||
|
|
||||||
.custom { |
|
||||||
opacity: 0; |
|
||||||
position: absolute; |
|
||||||
left: -10000px; |
|
||||||
} |
|
||||||
|
|
||||||
.filter_button.button.color { |
|
||||||
display: inline-block; |
|
||||||
width: 15px; |
|
||||||
height: 15px; |
|
||||||
border: 1px solid #EBEBEB; |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.filter_button.button.color:hover { |
|
||||||
border: 1px solid rgb(128,128,128); |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
input[type="radio"]:checked + .filter_button.button.color { |
|
||||||
border: 1px solid rgb(255,255,255); |
|
||||||
box-shadow: 0 0 0px 1px #000; |
|
||||||
-webkit-box-shadow: 0 0 0px 1px #000; |
|
||||||
} |
|
||||||
|
|
||||||
#allcolor { |
|
||||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
#colored { |
|
||||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
#grayed { |
|
||||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
#black{ |
|
||||||
background-color:#ffffff; |
|
||||||
} |
|
||||||
#blue{ |
|
||||||
background-color:#0000FF; |
|
||||||
} |
|
||||||
#brown{ |
|
||||||
background-color:rgba(139, 82, 16, 1); |
|
||||||
} |
|
||||||
|
|
||||||
#gray{ |
|
||||||
background-color:#999999; |
|
||||||
} |
|
||||||
|
|
||||||
#green{ |
|
||||||
background-color:#00CC00; |
|
||||||
} |
|
||||||
|
|
||||||
#orange{ |
|
||||||
background-color:#FB940B; |
|
||||||
} |
|
||||||
|
|
||||||
#pink{ |
|
||||||
background-color:#FF98BF; |
|
||||||
} |
|
||||||
|
|
||||||
#purple{ |
|
||||||
background-color:#762CA7; |
|
||||||
} |
|
||||||
|
|
||||||
#red{ |
|
||||||
background-color:#CC0000; |
|
||||||
} |
|
||||||
|
|
||||||
#teal{ |
|
||||||
background-color:#03C0C6; |
|
||||||
} |
|
||||||
|
|
||||||
#white{ |
|
||||||
background-color:#000000; |
|
||||||
} |
|
||||||
|
|
||||||
#yellow{ |
|
||||||
background-color:#FFFF00; |
|
||||||
} |
|
||||||
|
|
||||||
.selectBox-dropdown, .selectBox-options li a { |
|
||||||
line-height: 1.3 !important; |
|
||||||
font-size: 13px; |
|
||||||
} |
|
||||||
|
|
||||||
.pager_button { |
|
||||||
padding: 3px 5px; |
|
||||||
font-size: 16px; |
|
||||||
color: black; |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
.pager_button.active { |
|
||||||
border-radius: 3px; |
|
||||||
-webkit-border-radius: 3px; |
|
||||||
background-color: gray; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 8.8 KiB |
|
Before Width: | Height: | Size: 8.8 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 214 B |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 931 B |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 475 B |
|
Before Width: | Height: | Size: 448 B |
|
Before Width: | Height: | Size: 1.2 KiB |
@ -1,253 +0,0 @@ |
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
||||||
<head> |
|
||||||
<title>Planete Sankore Image Search</title> |
|
||||||
<link rel="stylesheet" type="text/css" href="css/basic.css"/> |
|
||||||
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> |
|
||||||
<script type="text/javascript"> |
|
||||||
var category = "audio"; |
|
||||||
var thumbnails = false; |
|
||||||
var minHeight = 177; |
|
||||||
var minWidth = 150; |
|
||||||
|
|
||||||
var currentIndex = 0; |
|
||||||
var currentTerm = ""; |
|
||||||
var limit = 10; |
|
||||||
var filtersDisplayed = false; //display or hide filters |
|
||||||
|
|
||||||
function addPaginationLinks(totalResults) { |
|
||||||
var curPage = currentIndex; // check what page the app is on |
|
||||||
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
|
||||||
for (var i = 0; i < 8; i++) { |
|
||||||
if (i * limit < totalResults) { |
|
||||||
|
|
||||||
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv); |
|
||||||
if (curPage == i) { |
|
||||||
link.addClass('active'); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
$("#disc_nav_cont #resultFooter").remove(); |
|
||||||
pagesDiv.insertBefore($('#disclaimer')); |
|
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
|
||||||
this.addEventListener("dragstart", imageDragging, false); |
|
||||||
}) |
|
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
|
||||||
this.addEventListener("dragenter", imageDragenter, false); |
|
||||||
}) |
|
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
|
||||||
this.addEventListener("dragleave", imageDragleave, false); |
|
||||||
}) |
|
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
|
||||||
this.addEventListener("dragover", imageDragover, false); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
function searchFail(jqXHR, textStatus, errorThrown) { |
|
||||||
alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown); |
|
||||||
} |
|
||||||
|
|
||||||
function searchComplete(json) { |
|
||||||
// Grab our content div, clear it. |
|
||||||
var totalResults = json.totalResults; |
|
||||||
var contentDiv = $('#searchResult').empty(); |
|
||||||
// Loop through our results, printing them to the page. |
|
||||||
var results = json.rows; |
|
||||||
for (var i = 0; i < results.length; i++) { |
|
||||||
// For each result write it's title and image to the screen |
|
||||||
var result = results[i]; |
|
||||||
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
|
||||||
var title = document.createElement('div'); |
|
||||||
var iUrl = $("<input type='hidden'/>"); |
|
||||||
var iContent = $("<input type='hidden'/>"); |
|
||||||
var iHeight = $("<input type='hidden'/>"); |
|
||||||
var iWidth = $("<input type='hidden'/>"); |
|
||||||
var iTitle = $("<input type='hidden'/>"); |
|
||||||
|
|
||||||
// We use titleNoFormatting so that no HTML tags are left in the |
|
||||||
// title |
|
||||||
title.innerHTML = result.title; |
|
||||||
var newImg = document.createElement('img'); |
|
||||||
|
|
||||||
// There is also a result.file property which has the escaped version |
|
||||||
if (thumbnails) { |
|
||||||
newImg.src = result.file; |
|
||||||
} else { |
|
||||||
newImg.src = "./images/thumbnail_icon.png"; |
|
||||||
} |
|
||||||
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth; |
|
||||||
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
|
||||||
imgContainer.width(imgWidth).height(imgHeight); |
|
||||||
imgContainer.append($(newImg)); |
|
||||||
iUrl.attr("value", result.file); |
|
||||||
iContent.attr("value", result.title); |
|
||||||
iHeight.attr("value", result.height); |
|
||||||
iWidth.attr("value", result.width); |
|
||||||
iTitle.attr("value",result.title); |
|
||||||
imgContainer.append($(title)); |
|
||||||
imgContainer.append(iUrl); |
|
||||||
imgContainer.append(iContent); |
|
||||||
imgContainer.append(iHeight); |
|
||||||
imgContainer.append(iWidth); |
|
||||||
imgContainer.append(iTitle); |
|
||||||
|
|
||||||
// Put our title + image in the content |
|
||||||
imgContainer.appendTo(contentDiv); |
|
||||||
|
|
||||||
} |
|
||||||
// Now add links to additional pages of search results. |
|
||||||
addPaginationLinks(totalResults); |
|
||||||
} |
|
||||||
|
|
||||||
function imageDragging(e){ |
|
||||||
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
|
||||||
} |
|
||||||
|
|
||||||
function imageDragleave(e){ |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
function imageDragover(e){ |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
function imageDragenter(e){ |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
$(document).ready(function(){ |
|
||||||
|
|
||||||
//variables |
|
||||||
var mode = false; //search or view mode |
|
||||||
var hide = false; //hide or no main panel |
|
||||||
|
|
||||||
//basic containers and elements |
|
||||||
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body"); |
|
||||||
var disclaimer = $("<div id='disclaimer' class='disclaimer'>Recherche de documents audio sur Planète Sankoré<div>").appendTo(disc_nav_cont); |
|
||||||
var search = $("<div id='search' class='search'>").appendTo("body"); |
|
||||||
|
|
||||||
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
|
||||||
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
|
||||||
|
|
||||||
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
|
||||||
var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search); |
|
||||||
|
|
||||||
var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput); |
|
||||||
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
|
||||||
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
|
||||||
|
|
||||||
//adding filters to the wgt |
|
||||||
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
|
||||||
.append($("<option value='0'>Any</option>")) |
|
||||||
.append($("<option value='1'>Small</option>")) |
|
||||||
.append($("<option value='2'>Medium</option>")) |
|
||||||
.append($("<option value='3'>Large</option>")) |
|
||||||
.append($("<option value='4'>Extra large</option>")); |
|
||||||
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter); |
|
||||||
|
|
||||||
//mouse click actions |
|
||||||
/* |
|
||||||
toggleFilters.click(function(){ |
|
||||||
if(filtersDisplayed){ |
|
||||||
subSearchFilter.hide(); |
|
||||||
toggleFilters.css("background-image","url(images/down.png)"); |
|
||||||
filtersDisplayed = false; |
|
||||||
} else { |
|
||||||
subSearchFilter.show(); |
|
||||||
toggleFilters.css("background-image","url(images/up.png)"); |
|
||||||
filtersDisplayed = true; |
|
||||||
} |
|
||||||
}); |
|
||||||
*/ |
|
||||||
|
|
||||||
/*togglePages.click(function(event){ |
|
||||||
if(mode){ |
|
||||||
hide = false; |
|
||||||
$("#search, #disclaimer").slideDown('slow', function(){ |
|
||||||
toggleIcon.css("background-image","url(images/trgUp.png)"); |
|
||||||
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
|
||||||
}); |
|
||||||
mode = false; |
|
||||||
} else { |
|
||||||
hide = true; |
|
||||||
$("#search, #disclaimer").slideUp('slow', function(){ |
|
||||||
toggleIcon.css("background-image","url(images/trgDown.png)"); |
|
||||||
togglePages.appendTo("body").css("top","0"); |
|
||||||
}); |
|
||||||
mode = true; |
|
||||||
} |
|
||||||
});*/ |
|
||||||
|
|
||||||
searchButton.click(function(){ |
|
||||||
if(!hide){ |
|
||||||
runSearch(searchInput.val(), 0); |
|
||||||
//togglePages.trigger("click"); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
searchInput.keydown(function(event){ |
|
||||||
if(!hide){ |
|
||||||
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
|
||||||
runSearch(searchInput.val(), 0); |
|
||||||
//togglePages.trigger("click"); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
}); |
|
||||||
( |
|
||||||
$(".imgContainer").live("click",function(){ |
|
||||||
sankore.sendFileMetadata(createMetaData($(this))); |
|
||||||
})); |
|
||||||
|
|
||||||
/*$(window).resize(function(){ |
|
||||||
disclaimer.width($("body").width()-20); |
|
||||||
search.width($("body").width()-20); |
|
||||||
toggleIcon.css("margin-left",(togglePages.width()/2 - 7)); |
|
||||||
})*/ |
|
||||||
|
|
||||||
}); |
|
||||||
|
|
||||||
function gotoPage(i) { |
|
||||||
runSearch(currentTerm, i); |
|
||||||
} |
|
||||||
|
|
||||||
// launching the search on planete sankore |
|
||||||
function runSearch(term, index) { |
|
||||||
currentTerm = term; |
|
||||||
currentIndex = index; |
|
||||||
var start = index * limit; |
|
||||||
var url = "http://planete.sankore.org/xwiki/bin/view/Search/Resources?xpage=plain&category=" + category + "&level=&sort=title&dir=ASC&terms=" + escape(term) + "&start=" + start + "&limit=" + limit; |
|
||||||
$.ajax({ |
|
||||||
url: url, |
|
||||||
success: searchComplete, |
|
||||||
error: searchFail, |
|
||||||
dataType: "json" |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
function createMetaData(parent){ |
|
||||||
var meta = ""; |
|
||||||
//alert($(this).find("input:hidden").eq(0).val()); |
|
||||||
meta = "<metadata><data><key>Type</key><value>Audio</value></data><data><key>Url</key><value>" + |
|
||||||
parent.find("input:hidden").eq(0).val() + |
|
||||||
"</value></data><data><key>Content</key><value>" + |
|
||||||
parent.find("input:hidden").eq(1).val() + |
|
||||||
"</value></data><data><key>Height</key><value>n/a</value></data>"+ |
|
||||||
"<data><key>Width</key><value>n/a</value></data><data><key>Title</key><value>" + |
|
||||||
parent.find("input:hidden").eq(4).val() + |
|
||||||
"</value></data></metadata>"; |
|
||||||
return meta; |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
</head> |
|
||||||
<body style="font-family: Arial;border: 0 none;"> |
|
||||||
<div id="searchResult"></div> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
File diff suppressed because one or more lines are too long
@ -1,16 +0,0 @@ |
|||||||
<?xml version="1.0" encoding="UTF-8"?> |
|
||||||
<widget xmlns="http://www.w3.org/ns/widgets" |
|
||||||
xmlns:ub="http://uniboard.mnemis.com/widgets" |
|
||||||
id="http://uniboard.mnemis.com/widgets/webbrowser" |
|
||||||
version="1.1" |
|
||||||
width="900" |
|
||||||
height="500" |
|
||||||
ub:resizable="true"> |
|
||||||
|
|
||||||
<name>Choisir</name> |
|
||||||
<author href="http://www.getuniboard.com" |
|
||||||
email="info@mnemis.com">Mnemis SA</author> |
|
||||||
<description>Choisir widget</description> |
|
||||||
|
|
||||||
<content src="index.html"/> |
|
||||||
</widget> |
|
||||||
@ -1,315 +0,0 @@ |
|||||||
html, body{ |
|
||||||
width: 100%; |
|
||||||
padding: 0; |
|
||||||
height: auto; |
|
||||||
background-color: white; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar { |
|
||||||
width: 14px; |
|
||||||
background-color:white; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb { |
|
||||||
border-radius: 10px; |
|
||||||
background-color:lightgray; |
|
||||||
border: 2px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:start{ |
|
||||||
border-radius: 10px; |
|
||||||
background-color:lightgray; |
|
||||||
background-image: url(../images/trgUp.png); |
|
||||||
background-size: 8px auto; |
|
||||||
background-position: center; |
|
||||||
background-repeat: no-repeat; |
|
||||||
border: 2px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:end{ |
|
||||||
border-radius: 10px; |
|
||||||
background-color:lightgray; |
|
||||||
background-image: url(../images/trgDown.png); |
|
||||||
background-size: 8px auto; |
|
||||||
background-position: center; |
|
||||||
background-repeat: no-repeat; |
|
||||||
border: 2px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
|
|
||||||
#disc_nav_cont{ |
|
||||||
height: auto; |
|
||||||
position: fixed; |
|
||||||
left: 0; |
|
||||||
bottom: 0; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.disclaimer{ |
|
||||||
padding: 5px; |
|
||||||
text-align: center; |
|
||||||
background-color: #BBBBBB; |
|
||||||
border-top: solid 4px #EEEEEE; |
|
||||||
border-bottom: none; |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
.resultFooter{ |
|
||||||
width: 100%; |
|
||||||
padding: 3px; |
|
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
|
||||||
font-weight: bold; |
|
||||||
font-size: x-large; |
|
||||||
text-align: center; |
|
||||||
background-color: white; |
|
||||||
} |
|
||||||
|
|
||||||
#searchResult { |
|
||||||
overflow: hidden; |
|
||||||
text-align: center; |
|
||||||
margin-top: 50px; |
|
||||||
margin-bottom: 85px; |
|
||||||
} |
|
||||||
|
|
||||||
.search{ |
|
||||||
position: fixed; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
padding: 5px; |
|
||||||
background-color: #BBBBBB; |
|
||||||
border-bottom: solid 4px #EEEEEE; |
|
||||||
} |
|
||||||
|
|
||||||
.search, |
|
||||||
.disclaimer { |
|
||||||
width: 100%; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.searchInput{ |
|
||||||
padding: 3px; |
|
||||||
float: left; |
|
||||||
width: 100%; |
|
||||||
border-radius: 3px; |
|
||||||
border-style: none; |
|
||||||
height: 22px; |
|
||||||
line-height: 18px; |
|
||||||
vertical-align: middle; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.searchButton{ |
|
||||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
|
||||||
width: 24px; |
|
||||||
height: 24px; |
|
||||||
overflow: hidden; |
|
||||||
position: absolute; |
|
||||||
right: 30px; |
|
||||||
top: 9px; |
|
||||||
margin-left: -2px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.subSearch{ |
|
||||||
margin: 0; |
|
||||||
float: left; |
|
||||||
} |
|
||||||
|
|
||||||
#subSearchInput{ |
|
||||||
width: 100%; |
|
||||||
float: left; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
padding: 5px; |
|
||||||
padding-right: 26px; |
|
||||||
} |
|
||||||
|
|
||||||
#subSearchFilter{ |
|
||||||
width: 100%; |
|
||||||
float: left; |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.searchResult{ |
|
||||||
width: 98%; |
|
||||||
padding: 3px; |
|
||||||
background-color:#123456; |
|
||||||
} |
|
||||||
|
|
||||||
.imgContainer{ |
|
||||||
display: inline-block; |
|
||||||
padding: 3px; |
|
||||||
margin: 3px; |
|
||||||
text-align: center; |
|
||||||
overflow: hidden; |
|
||||||
font-size: small; |
|
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
|
||||||
border: 1px solid #666; |
|
||||||
border-radius: 5px; |
|
||||||
-webkit-box-shadow: #dadada -1px 0 4px; |
|
||||||
-webkit-border-radius: 5px; |
|
||||||
box-shadow: #666 -1px 0 4px; |
|
||||||
vertical-align: top; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.filterContainer{ |
|
||||||
float: left; |
|
||||||
margin: 2px; |
|
||||||
padding: 2px; |
|
||||||
font-size: 14px; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.filterSelect{ |
|
||||||
border-style:none; |
|
||||||
-webkit-border-top-right-radius: 15px; |
|
||||||
-webkit-border-bottom-right-radius: 15px; |
|
||||||
-moz-border-radius-topright: 15px; |
|
||||||
-moz-border-radius-bottomright: 15px; |
|
||||||
border-top-right-radius: 15px; |
|
||||||
margin-top: 2px; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
span{ |
|
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
|
||||||
color: #666; |
|
||||||
} |
|
||||||
|
|
||||||
[draggable] { |
|
||||||
-webkit-user-select: none; |
|
||||||
user-select: none; |
|
||||||
} |
|
||||||
|
|
||||||
.toggleFilters{ |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
background-position: center; |
|
||||||
background-image: url(../images/down.png); |
|
||||||
position: absolute; |
|
||||||
top: 11px; |
|
||||||
right: 6px; |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.colors_line { |
|
||||||
float: left; |
|
||||||
margin: 4px; |
|
||||||
margin-right: 0; |
|
||||||
clear: left; |
|
||||||
} |
|
||||||
|
|
||||||
.custom { |
|
||||||
opacity: 0; |
|
||||||
position: absolute; |
|
||||||
left: -10000px; |
|
||||||
} |
|
||||||
|
|
||||||
.filter_button.button.color { |
|
||||||
display: inline-block; |
|
||||||
width: 15px; |
|
||||||
height: 15px; |
|
||||||
border: 1px solid #EBEBEB; |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.filter_button.button.color:hover { |
|
||||||
border: 1px solid rgb(128,128,128); |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
input[type="radio"]:checked + .filter_button.button.color { |
|
||||||
border: 1px solid rgb(255,255,255); |
|
||||||
box-shadow: 0 0 0px 1px #000; |
|
||||||
-webkit-box-shadow: 0 0 0px 1px #000; |
|
||||||
} |
|
||||||
|
|
||||||
#allcolor { |
|
||||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
#colored { |
|
||||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
#grayed { |
|
||||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
#black{ |
|
||||||
background-color:#ffffff; |
|
||||||
} |
|
||||||
#blue{ |
|
||||||
background-color:#0000FF; |
|
||||||
} |
|
||||||
#brown{ |
|
||||||
background-color:rgba(139, 82, 16, 1); |
|
||||||
} |
|
||||||
|
|
||||||
#gray{ |
|
||||||
background-color:#999999; |
|
||||||
} |
|
||||||
|
|
||||||
#green{ |
|
||||||
background-color:#00CC00; |
|
||||||
} |
|
||||||
|
|
||||||
#orange{ |
|
||||||
background-color:#FB940B; |
|
||||||
} |
|
||||||
|
|
||||||
#pink{ |
|
||||||
background-color:#FF98BF; |
|
||||||
} |
|
||||||
|
|
||||||
#purple{ |
|
||||||
background-color:#762CA7; |
|
||||||
} |
|
||||||
|
|
||||||
#red{ |
|
||||||
background-color:#CC0000; |
|
||||||
} |
|
||||||
|
|
||||||
#teal{ |
|
||||||
background-color:#03C0C6; |
|
||||||
} |
|
||||||
|
|
||||||
#white{ |
|
||||||
background-color:#000000; |
|
||||||
} |
|
||||||
|
|
||||||
#yellow{ |
|
||||||
background-color:#FFFF00; |
|
||||||
} |
|
||||||
|
|
||||||
.selectBox-dropdown, .selectBox-options li a { |
|
||||||
line-height: 1.3 !important; |
|
||||||
font-size: 13px; |
|
||||||
} |
|
||||||
|
|
||||||
.pager_button { |
|
||||||
padding: 3px 5px; |
|
||||||
font-size: 16px; |
|
||||||
color: black; |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
.pager_button.active { |
|
||||||
border-radius: 3px; |
|
||||||
-webkit-border-radius: 3px; |
|
||||||
background-color: gray; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 214 B |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 931 B |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 475 B |
|
Before Width: | Height: | Size: 448 B |
|
Before Width: | Height: | Size: 1.2 KiB |
@ -1,253 +0,0 @@ |
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
||||||
<head> |
|
||||||
<title>Planete Sankore Image Search</title> |
|
||||||
<link rel="stylesheet" type="text/css" href="css/basic.css"/> |
|
||||||
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> |
|
||||||
<script type="text/javascript"> |
|
||||||
var category = "interactive"; |
|
||||||
var thumbnails = false; |
|
||||||
var minHeight = 177; |
|
||||||
var minWidth = 150; |
|
||||||
|
|
||||||
var currentIndex = 0; |
|
||||||
var currentTerm = ""; |
|
||||||
var limit = 10; |
|
||||||
var filtersDisplayed = false; //display or hide filters |
|
||||||
|
|
||||||
function addPaginationLinks(totalResults) { |
|
||||||
var curPage = currentIndex; // check what page the app is on |
|
||||||
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
|
||||||
for (var i = 0; i < 8; i++) { |
|
||||||
if (i * limit < totalResults) { |
|
||||||
|
|
||||||
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv); |
|
||||||
if (curPage == i) { |
|
||||||
link.addClass('active'); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
$("#disc_nav_cont #resultFooter").remove(); |
|
||||||
pagesDiv.insertBefore($('#disclaimer')); |
|
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
|
||||||
this.addEventListener("dragstart", imageDragging, false); |
|
||||||
}) |
|
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
|
||||||
this.addEventListener("dragenter", imageDragenter, false); |
|
||||||
}) |
|
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
|
||||||
this.addEventListener("dragleave", imageDragleave, false); |
|
||||||
}) |
|
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
|
||||||
this.addEventListener("dragover", imageDragover, false); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
function searchFail(jqXHR, textStatus, errorThrown) { |
|
||||||
alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown); |
|
||||||
} |
|
||||||
|
|
||||||
function searchComplete(json) { |
|
||||||
// Grab our content div, clear it. |
|
||||||
var totalResults = json.totalResults; |
|
||||||
var contentDiv = $('#searchResult').empty(); |
|
||||||
// Loop through our results, printing them to the page. |
|
||||||
var results = json.rows; |
|
||||||
for (var i = 0; i < results.length; i++) { |
|
||||||
// For each result write it's title and image to the screen |
|
||||||
var result = results[i]; |
|
||||||
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
|
||||||
var title = document.createElement('div'); |
|
||||||
var iUrl = $("<input type='hidden'/>"); |
|
||||||
var iContent = $("<input type='hidden'/>"); |
|
||||||
var iHeight = $("<input type='hidden'/>"); |
|
||||||
var iWidth = $("<input type='hidden'/>"); |
|
||||||
var iTitle = $("<input type='hidden'/>"); |
|
||||||
|
|
||||||
// We use titleNoFormatting so that no HTML tags are left in the |
|
||||||
// title |
|
||||||
title.innerHTML = result.title; |
|
||||||
var newImg = document.createElement('img'); |
|
||||||
|
|
||||||
// There is also a result.file property which has the escaped version |
|
||||||
if (thumbnails) { |
|
||||||
newImg.src = result.file; |
|
||||||
} else { |
|
||||||
newImg.src = "./images/thumbnail_icon.png"; |
|
||||||
} |
|
||||||
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth; |
|
||||||
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
|
||||||
imgContainer.width(imgWidth).height(imgHeight); |
|
||||||
imgContainer.append($(newImg)); |
|
||||||
iUrl.attr("value", result.file); |
|
||||||
iContent.attr("value", result.title); |
|
||||||
iHeight.attr("value", result.height); |
|
||||||
iWidth.attr("value", result.width); |
|
||||||
iTitle.attr("value",result.title); |
|
||||||
imgContainer.append($(title)); |
|
||||||
imgContainer.append(iUrl); |
|
||||||
imgContainer.append(iContent); |
|
||||||
imgContainer.append(iHeight); |
|
||||||
imgContainer.append(iWidth); |
|
||||||
imgContainer.append(iTitle); |
|
||||||
|
|
||||||
// Put our title + image in the content |
|
||||||
imgContainer.appendTo(contentDiv); |
|
||||||
|
|
||||||
} |
|
||||||
// Now add links to additional pages of search results. |
|
||||||
addPaginationLinks(totalResults); |
|
||||||
} |
|
||||||
|
|
||||||
function imageDragging(e){ |
|
||||||
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
|
||||||
// alert($(this).find("input:hidden").eq(0).val()); |
|
||||||
} |
|
||||||
|
|
||||||
function imageDragleave(e){ |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
function imageDragover(e){ |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
function imageDragenter(e){ |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
$(document).ready(function(){ |
|
||||||
|
|
||||||
//variables |
|
||||||
var mode = false; //search or view mode |
|
||||||
var hide = false; //hide or no main panel |
|
||||||
|
|
||||||
//basic containers and elements |
|
||||||
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body"); |
|
||||||
var disclaimer = $("<div id='disclaimer' class='disclaimer'>Recherche de documents flash sur Planète Sankoré<div>").appendTo(disc_nav_cont); |
|
||||||
var search = $("<div id='search' class='search'>").appendTo("body"); |
|
||||||
|
|
||||||
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
|
||||||
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
|
||||||
|
|
||||||
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
|
||||||
var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search); |
|
||||||
|
|
||||||
var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput); |
|
||||||
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
|
||||||
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
|
||||||
|
|
||||||
//adding filters to the wgt |
|
||||||
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
|
||||||
.append($("<option value='0'>Any</option>")) |
|
||||||
.append($("<option value='1'>Small</option>")) |
|
||||||
.append($("<option value='2'>Medium</option>")) |
|
||||||
.append($("<option value='3'>Large</option>")) |
|
||||||
.append($("<option value='4'>Extra large</option>")); |
|
||||||
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter); |
|
||||||
|
|
||||||
//mouse click actions |
|
||||||
/* |
|
||||||
toggleFilters.click(function(){ |
|
||||||
if(filtersDisplayed){ |
|
||||||
subSearchFilter.hide(); |
|
||||||
toggleFilters.css("background-image","url(images/down.png)"); |
|
||||||
filtersDisplayed = false; |
|
||||||
} else { |
|
||||||
subSearchFilter.show(); |
|
||||||
toggleFilters.css("background-image","url(images/up.png)"); |
|
||||||
filtersDisplayed = true; |
|
||||||
} |
|
||||||
}); |
|
||||||
*/ |
|
||||||
|
|
||||||
/*togglePages.click(function(event){ |
|
||||||
if(mode){ |
|
||||||
hide = false; |
|
||||||
$("#search, #disclaimer").slideDown('slow', function(){ |
|
||||||
toggleIcon.css("background-image","url(images/trgUp.png)"); |
|
||||||
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
|
||||||
}); |
|
||||||
mode = false; |
|
||||||
} else { |
|
||||||
hide = true; |
|
||||||
$("#search, #disclaimer").slideUp('slow', function(){ |
|
||||||
toggleIcon.css("background-image","url(images/trgDown.png)"); |
|
||||||
togglePages.appendTo("body").css("top","0"); |
|
||||||
}); |
|
||||||
mode = true; |
|
||||||
} |
|
||||||
});*/ |
|
||||||
|
|
||||||
searchButton.click(function(){ |
|
||||||
if(!hide){ |
|
||||||
runSearch(searchInput.val(), 0); |
|
||||||
//togglePages.trigger("click"); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
searchInput.keydown(function(event){ |
|
||||||
if(!hide){ |
|
||||||
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
|
||||||
runSearch(searchInput.val(), 0); |
|
||||||
//togglePages.trigger("click"); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
}); |
|
||||||
( |
|
||||||
$(".imgContainer").live("click",function(){ |
|
||||||
sankore.sendFileMetadata(createMetaData($(this))); |
|
||||||
})); |
|
||||||
|
|
||||||
/*$(window).resize(function(){ |
|
||||||
disclaimer.width($("body").width()-20); |
|
||||||
search.width($("body").width()-20); |
|
||||||
toggleIcon.css("margin-left",(togglePages.width()/2 - 7)); |
|
||||||
})*/ |
|
||||||
|
|
||||||
}); |
|
||||||
|
|
||||||
function gotoPage(i) { |
|
||||||
runSearch(currentTerm, i); |
|
||||||
} |
|
||||||
|
|
||||||
// launching the search on planete sankore |
|
||||||
function runSearch(term, index) { |
|
||||||
currentTerm = term; |
|
||||||
currentIndex = index; |
|
||||||
var start = index * limit; |
|
||||||
var url = "http://planete.sankore.org/xwiki/bin/view/Search/Resources?xpage=plain&category=" + category + "&level=&sort=title&dir=ASC&terms=" + escape(term) + "&start=" + start + "&limit=" + limit; |
|
||||||
$.ajax({ |
|
||||||
url: url, |
|
||||||
success: searchComplete, |
|
||||||
error: searchFail, |
|
||||||
dataType: "json" |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
function createMetaData(parent){ |
|
||||||
var meta = ""; |
|
||||||
meta = "<metadata><data><key>Type</key><value>Flash</value></data><data><key>Url</key><value>" + |
|
||||||
parent.find("input:hidden").eq(0).val() + |
|
||||||
"</value></data><data><key>Content</key><value>" + |
|
||||||
parent.find("input:hidden").eq(1).val() + |
|
||||||
"</value></data><data><key>Height</key><value>n/a</value></data>"+ |
|
||||||
"<data><key>Width</key><value>n/a</value></data><data><key>Title</key><value>" + |
|
||||||
parent.find("input:hidden").eq(4).val() + |
|
||||||
"</value></data></metadata>"; |
|
||||||
return meta; |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
</head> |
|
||||||
<body style="font-family: Arial;border: 0 none;"> |
|
||||||
<div id="searchResult"></div> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
File diff suppressed because one or more lines are too long
@ -1,16 +0,0 @@ |
|||||||
<?xml version="1.0" encoding="UTF-8"?> |
|
||||||
<widget xmlns="http://www.w3.org/ns/widgets" |
|
||||||
xmlns:ub="http://uniboard.mnemis.com/widgets" |
|
||||||
id="http://uniboard.mnemis.com/widgets/webbrowser" |
|
||||||
version="1.1" |
|
||||||
width="900" |
|
||||||
height="500" |
|
||||||
ub:resizable="true"> |
|
||||||
|
|
||||||
<name>Choisir</name> |
|
||||||
<author href="http://www.getuniboard.com" |
|
||||||
email="info@mnemis.com">Mnemis SA</author> |
|
||||||
<description>Choisir widget</description> |
|
||||||
|
|
||||||
<content src="index.html"/> |
|
||||||
</widget> |
|
||||||
@ -1,314 +0,0 @@ |
|||||||
html, body{ |
|
||||||
width: 100%; |
|
||||||
padding: 0; |
|
||||||
height: auto; |
|
||||||
background-color: white; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar { |
|
||||||
width: 14px; |
|
||||||
background-color:white; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb { |
|
||||||
border-radius: 10px; |
|
||||||
background-color:lightgray; |
|
||||||
border: 2px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:start{ |
|
||||||
border-radius: 10px; |
|
||||||
background-color:lightgray; |
|
||||||
background-image: url(../images/trgUp.png); |
|
||||||
background-size: 8px auto; |
|
||||||
background-position: center; |
|
||||||
background-repeat: no-repeat; |
|
||||||
border: 2px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:end{ |
|
||||||
border-radius: 10px; |
|
||||||
background-color:lightgray; |
|
||||||
background-image: url(../images/trgDown.png); |
|
||||||
background-size: 8px auto; |
|
||||||
background-position: center; |
|
||||||
background-repeat: no-repeat; |
|
||||||
border: 2px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
|
|
||||||
#disc_nav_cont{ |
|
||||||
height: auto; |
|
||||||
position: fixed; |
|
||||||
left: 0; |
|
||||||
bottom: 0; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.disclaimer{ |
|
||||||
padding: 5px; |
|
||||||
text-align: center; |
|
||||||
background-color: #BBBBBB; |
|
||||||
border-top: solid 4px #EEEEEE; |
|
||||||
border-bottom: none; |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
.resultFooter{ |
|
||||||
width: 100%; |
|
||||||
padding: 3px; |
|
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
|
||||||
font-weight: bold; |
|
||||||
font-size: x-large; |
|
||||||
text-align: center; |
|
||||||
background-color: white; |
|
||||||
} |
|
||||||
|
|
||||||
#searchResult { |
|
||||||
overflow: hidden; |
|
||||||
text-align: center; |
|
||||||
margin-top: 50px; |
|
||||||
margin-bottom: 85px; |
|
||||||
} |
|
||||||
|
|
||||||
.search{ |
|
||||||
position: fixed; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
padding: 5px; |
|
||||||
background-color: #BBBBBB; |
|
||||||
border-bottom: solid 4px #EEEEEE; |
|
||||||
} |
|
||||||
|
|
||||||
.search, |
|
||||||
.disclaimer { |
|
||||||
width: 100%; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.searchInput{ |
|
||||||
padding: 3px; |
|
||||||
float: left; |
|
||||||
width: 100%; |
|
||||||
border-radius: 3px; |
|
||||||
border-style: none; |
|
||||||
height: 22px; |
|
||||||
line-height: 18px; |
|
||||||
vertical-align: middle; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.searchButton{ |
|
||||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
|
||||||
width: 24px; |
|
||||||
height: 24px; |
|
||||||
overflow: hidden; |
|
||||||
position: absolute; |
|
||||||
right: 30px; |
|
||||||
top: 9px; |
|
||||||
margin-left: -2px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.subSearch{ |
|
||||||
margin: 0; |
|
||||||
float: left; |
|
||||||
} |
|
||||||
|
|
||||||
#subSearchInput{ |
|
||||||
width: 100%; |
|
||||||
float: left; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
padding: 5px; |
|
||||||
padding-right: 26px; |
|
||||||
} |
|
||||||
|
|
||||||
#subSearchFilter{ |
|
||||||
width: 100%; |
|
||||||
float: left; |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.searchResult{ |
|
||||||
width: 98%; |
|
||||||
padding: 3px; |
|
||||||
background-color:#123456; |
|
||||||
} |
|
||||||
|
|
||||||
.imgContainer{ |
|
||||||
display: inline-block; |
|
||||||
padding: 3px; |
|
||||||
margin: 3px; |
|
||||||
text-align: center; |
|
||||||
overflow: hidden; |
|
||||||
font-size: small; |
|
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
|
||||||
vertical-align: top; |
|
||||||
} |
|
||||||
|
|
||||||
.imgContainer img{ |
|
||||||
max-width: 150px; |
|
||||||
max-height:150px; |
|
||||||
} |
|
||||||
|
|
||||||
.filterContainer{ |
|
||||||
float: left; |
|
||||||
margin: 2px; |
|
||||||
padding: 2px; |
|
||||||
font-size: 14px; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.filterSelect{ |
|
||||||
border-style:none; |
|
||||||
-webkit-border-top-right-radius: 15px; |
|
||||||
-webkit-border-bottom-right-radius: 15px; |
|
||||||
-moz-border-radius-topright: 15px; |
|
||||||
-moz-border-radius-bottomright: 15px; |
|
||||||
border-top-right-radius: 15px; |
|
||||||
margin-top: 2px; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
span{ |
|
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
|
||||||
color: #666; |
|
||||||
} |
|
||||||
|
|
||||||
[draggable] { |
|
||||||
-webkit-user-select: none; |
|
||||||
user-select: none; |
|
||||||
} |
|
||||||
|
|
||||||
.toggleFilters{ |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
background-position: center; |
|
||||||
background-image: url(../images/down.png); |
|
||||||
position: absolute; |
|
||||||
top: 11px; |
|
||||||
right: 6px; |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.colors_line { |
|
||||||
float: left; |
|
||||||
margin: 4px; |
|
||||||
margin-right: 0; |
|
||||||
clear: left; |
|
||||||
} |
|
||||||
|
|
||||||
.custom { |
|
||||||
opacity: 0; |
|
||||||
position: absolute; |
|
||||||
left: -10000px; |
|
||||||
} |
|
||||||
|
|
||||||
.filter_button.button.color { |
|
||||||
display: inline-block; |
|
||||||
width: 15px; |
|
||||||
height: 15px; |
|
||||||
border: 1px solid #EBEBEB; |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.filter_button.button.color:hover { |
|
||||||
border: 1px solid rgb(128,128,128); |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
input[type="radio"]:checked + .filter_button.button.color { |
|
||||||
border: 1px solid rgb(255,255,255); |
|
||||||
box-shadow: 0 0 0px 1px #000; |
|
||||||
-webkit-box-shadow: 0 0 0px 1px #000; |
|
||||||
} |
|
||||||
|
|
||||||
#allcolor { |
|
||||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
#colored { |
|
||||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
#grayed { |
|
||||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
#black{ |
|
||||||
background-color:#ffffff; |
|
||||||
} |
|
||||||
#blue{ |
|
||||||
background-color:#0000FF; |
|
||||||
} |
|
||||||
#brown{ |
|
||||||
background-color:rgba(139, 82, 16, 1); |
|
||||||
} |
|
||||||
|
|
||||||
#gray{ |
|
||||||
background-color:#999999; |
|
||||||
} |
|
||||||
|
|
||||||
#green{ |
|
||||||
background-color:#00CC00; |
|
||||||
} |
|
||||||
|
|
||||||
#orange{ |
|
||||||
background-color:#FB940B; |
|
||||||
} |
|
||||||
|
|
||||||
#pink{ |
|
||||||
background-color:#FF98BF; |
|
||||||
} |
|
||||||
|
|
||||||
#purple{ |
|
||||||
background-color:#762CA7; |
|
||||||
} |
|
||||||
|
|
||||||
#red{ |
|
||||||
background-color:#CC0000; |
|
||||||
} |
|
||||||
|
|
||||||
#teal{ |
|
||||||
background-color:#03C0C6; |
|
||||||
} |
|
||||||
|
|
||||||
#white{ |
|
||||||
background-color:#000000; |
|
||||||
} |
|
||||||
|
|
||||||
#yellow{ |
|
||||||
background-color:#FFFF00; |
|
||||||
} |
|
||||||
|
|
||||||
.selectBox-dropdown, .selectBox-options li a { |
|
||||||
line-height: 1.3 !important; |
|
||||||
font-size: 13px; |
|
||||||
} |
|
||||||
|
|
||||||
.pager_button { |
|
||||||
padding: 3px 5px; |
|
||||||
font-size: 16px; |
|
||||||
color: black; |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
.pager_button.active { |
|
||||||
border-radius: 3px; |
|
||||||
-webkit-border-radius: 3px; |
|
||||||
background-color: gray; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 214 B |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 931 B |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 475 B |
|
Before Width: | Height: | Size: 448 B |
|
Before Width: | Height: | Size: 1.2 KiB |
@ -1,268 +0,0 @@ |
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
||||||
<head> |
|
||||||
<title>Planete Sankore Image Search</title> |
|
||||||
<link rel="stylesheet" type="text/css" href="css/basic.css"/> |
|
||||||
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> |
|
||||||
<script type="text/javascript"> |
|
||||||
var category = "image"; |
|
||||||
var thumbnails = true; |
|
||||||
var minHeight = 150; |
|
||||||
var minWidth = 150; |
|
||||||
|
|
||||||
var currentIndex = 0; |
|
||||||
var currentTerm = ""; |
|
||||||
var limit = 10; |
|
||||||
var filtersDisplayed = false; //display or hide filters |
|
||||||
|
|
||||||
function addPaginationLinks(totalResults) { |
|
||||||
var curPage = currentIndex; // check what page the app is on |
|
||||||
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
|
||||||
for (var i = 0; i < 8; i++) { |
|
||||||
if (i * limit < totalResults) { |
|
||||||
|
|
||||||
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv); |
|
||||||
if (curPage == i) { |
|
||||||
link.addClass('active'); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
$("#disc_nav_cont #resultFooter").remove(); |
|
||||||
pagesDiv.insertBefore($('#disclaimer')); |
|
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
|
||||||
this.addEventListener("dragstart", imageDragging, false); |
|
||||||
}) |
|
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
|
||||||
this.addEventListener("dragenter", imageDragenter, false); |
|
||||||
}) |
|
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
|
||||||
this.addEventListener("dragleave", imageDragleave, false); |
|
||||||
}) |
|
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
|
||||||
this.addEventListener("dragover", imageDragover, false); |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
function searchFail(jqXHR, textStatus, errorThrown) { |
|
||||||
alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown); |
|
||||||
} |
|
||||||
|
|
||||||
function searchComplete(json) { |
|
||||||
// Grab our content div, clear it. |
|
||||||
var totalResults = json.totalResults; |
|
||||||
var contentDiv = $('#searchResult').empty(); |
|
||||||
// Loop through our results, printing them to the page. |
|
||||||
var results = json.rows; |
|
||||||
for (var i = 0; i < results.length; i++) { |
|
||||||
// For each result write it's title and image to the screen |
|
||||||
var result = results[i]; |
|
||||||
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
|
||||||
//var title = document.createElement('div'); |
|
||||||
var iUrl = $("<input type='hidden'/>"); |
|
||||||
var iContent = $("<input type='hidden'/>"); |
|
||||||
var iHeight = $("<input type='hidden'/>"); |
|
||||||
var iWidth = $("<input type='hidden'/>"); |
|
||||||
var iTitle = $("<input type='hidden'/>"); |
|
||||||
var iThumbnailUrl = $("<input type='hidden'/>"); |
|
||||||
// We use titleNoFormatting so that no HTML tags are left in the |
|
||||||
// title |
|
||||||
//title.innerHTML = result.title; |
|
||||||
var newImg = document.createElement('img'); |
|
||||||
|
|
||||||
// There is also a result.file property which has the escaped version |
|
||||||
if (thumbnails) { |
|
||||||
newImg.src = result.file; |
|
||||||
/*if(result.height >= result.width) |
|
||||||
newImg.height = minHeight; |
|
||||||
else{ |
|
||||||
newImg.width = minWidth; |
|
||||||
//newImg.style.margin = (120 - result.height)/2 + "px 0"; |
|
||||||
}*/ |
|
||||||
} else { |
|
||||||
newImg.src = "./images/thumbnail_icon.png"; |
|
||||||
} |
|
||||||
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth; |
|
||||||
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
|
||||||
imgContainer.width(imgWidth).height(imgHeight); |
|
||||||
imgContainer.append($(newImg)); |
|
||||||
iUrl.attr("value", result.file); |
|
||||||
iContent.attr("value", result.title); |
|
||||||
iHeight.attr("value", result.height); |
|
||||||
iWidth.attr("value", result.width); |
|
||||||
iTitle.attr("value",result.title); |
|
||||||
iThumbnailUrl.attr("value",newImg.src); |
|
||||||
//imgContainer.append($(title)); |
|
||||||
imgContainer.append(iUrl); |
|
||||||
imgContainer.append(iContent); |
|
||||||
imgContainer.append(iHeight); |
|
||||||
imgContainer.append(iWidth); |
|
||||||
imgContainer.append(iTitle); |
|
||||||
imgContainer.append(iThumbnailUrl); |
|
||||||
|
|
||||||
// Put our title + image in the content |
|
||||||
imgContainer.appendTo(contentDiv); |
|
||||||
|
|
||||||
} |
|
||||||
// Now add links to additional pages of search results. |
|
||||||
addPaginationLinks(totalResults); |
|
||||||
} |
|
||||||
|
|
||||||
function imageDragging(e){ |
|
||||||
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
|
||||||
// alert($(this).find("input:hidden").eq(0).val()); |
|
||||||
} |
|
||||||
|
|
||||||
function imageDragleave(e){ |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
function imageDragover(e){ |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
function imageDragenter(e){ |
|
||||||
return false; |
|
||||||
} |
|
||||||
|
|
||||||
$(document).ready(function(){ |
|
||||||
|
|
||||||
//variables |
|
||||||
var mode = false; //search or view mode |
|
||||||
var hide = false; //hide or no main panel |
|
||||||
|
|
||||||
//basic containers and elements |
|
||||||
|
|
||||||
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body"); |
|
||||||
var disclaimer = $("<div id='disclaimer' class='disclaimer'>Recherche d'images sur Planète Sankoré<div>").appendTo(disc_nav_cont); |
|
||||||
var search = $("<div id='search' class='search'>").appendTo("body"); |
|
||||||
|
|
||||||
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
|
||||||
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
|
||||||
|
|
||||||
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
|
||||||
var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search); |
|
||||||
|
|
||||||
var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput); |
|
||||||
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
|
||||||
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
|
||||||
|
|
||||||
//adding filters to the wgt |
|
||||||
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
|
||||||
.append($("<option value='0'>Any</option>")) |
|
||||||
.append($("<option value='1'>Small</option>")) |
|
||||||
.append($("<option value='2'>Medium</option>")) |
|
||||||
.append($("<option value='3'>Large</option>")) |
|
||||||
.append($("<option value='4'>Extra large</option>")); |
|
||||||
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter); |
|
||||||
|
|
||||||
//mouse click actions |
|
||||||
/* |
|
||||||
toggleFilters.click(function(){ |
|
||||||
if(filtersDisplayed){ |
|
||||||
subSearchFilter.hide(); |
|
||||||
toggleFilters.css("background-image","url(images/down.png)"); |
|
||||||
filtersDisplayed = false; |
|
||||||
} else { |
|
||||||
subSearchFilter.show(); |
|
||||||
toggleFilters.css("background-image","url(images/up.png)"); |
|
||||||
filtersDisplayed = true; |
|
||||||
} |
|
||||||
}); |
|
||||||
*/ |
|
||||||
|
|
||||||
/*togglePages.click(function(event){ |
|
||||||
if(mode){ |
|
||||||
hide = false; |
|
||||||
$("#search, #disclaimer").slideDown('slow', function(){ |
|
||||||
toggleIcon.css("background-image","url(images/trgUp.png)"); |
|
||||||
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
|
||||||
}); |
|
||||||
mode = false; |
|
||||||
} else { |
|
||||||
hide = true; |
|
||||||
$("#search, #disclaimer").slideUp('slow', function(){ |
|
||||||
toggleIcon.css("background-image","url(images/trgDown.png)"); |
|
||||||
togglePages.appendTo("body").css("top","0"); |
|
||||||
}); |
|
||||||
mode = true; |
|
||||||
} |
|
||||||
});*/ |
|
||||||
|
|
||||||
searchButton.click(function(){ |
|
||||||
if(!hide){ |
|
||||||
runSearch(searchInput.val(), 0); |
|
||||||
//togglePages.trigger("click"); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
searchInput.keydown(function(event){ |
|
||||||
if(!hide){ |
|
||||||
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
|
||||||
runSearch(searchInput.val(), 0); |
|
||||||
//togglePages.trigger("click"); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
}); |
|
||||||
( |
|
||||||
$(".imgContainer").live("click",function(){ |
|
||||||
sankore.sendFileMetadata(createMetaData($(this))); |
|
||||||
})); |
|
||||||
|
|
||||||
/*$(window).resize(function(){ |
|
||||||
disclaimer.width($("body").width()-20); |
|
||||||
search.width($("body").width()-20); |
|
||||||
toggleIcon.css("margin-left",(togglePages.width()/2 - 7)); |
|
||||||
})*/ |
|
||||||
|
|
||||||
}); |
|
||||||
|
|
||||||
function gotoPage(i) { |
|
||||||
runSearch(currentTerm, i); |
|
||||||
} |
|
||||||
|
|
||||||
// launching the search on planete sankore |
|
||||||
function runSearch(term, index) { |
|
||||||
currentTerm = term; |
|
||||||
currentIndex = index; |
|
||||||
var start = index * limit; |
|
||||||
var url = "http://planete.sankore.org/xwiki/bin/view/Search/Resources?xpage=plain&category=" + category + "&level=&sort=title&dir=ASC&terms=" + escape(term) + "&start=" + start + "&limit=" + limit; |
|
||||||
$.ajax({ |
|
||||||
url: url, |
|
||||||
success: searchComplete, |
|
||||||
error: searchFail, |
|
||||||
dataType: "json" |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
function createMetaData(parent){ |
|
||||||
var meta = ""; |
|
||||||
//alert($(this).find("input:hidden").eq(0).val()); |
|
||||||
meta = "<metadata><data><key>Type</key><value>Image</value></data><data><key>Url</key><value>" + |
|
||||||
parent.find("input:hidden").eq(0).val() + |
|
||||||
"</value></data><data><key>Content</key><value>" + |
|
||||||
parent.find("input:hidden").eq(1).val() + |
|
||||||
"</value></data><data><key>Height</key><value>" + |
|
||||||
parent.find("input:hidden").eq(2).val() + |
|
||||||
"</value></data><data><key>Width</key><value>" + |
|
||||||
parent.find("input:hidden").eq(3).val() + |
|
||||||
"</value></data><data><key>Title</key><value>" + |
|
||||||
parent.find("input:hidden").eq(4).val() + |
|
||||||
"</value></data><data><key>thumbnailUrl</key><value>" + |
|
||||||
parent.find("input:hidden").eq(5).val() + |
|
||||||
"</value></data></metadata>"; |
|
||||||
return meta; |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
</head> |
|
||||||
<body style="font-family: Arial;border: 0 none;"> |
|
||||||
<div id="searchResult"></div> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
File diff suppressed because one or more lines are too long
@ -1,16 +0,0 @@ |
|||||||
<?xml version="1.0" encoding="UTF-8"?> |
|
||||||
<widget xmlns="http://www.w3.org/ns/widgets" |
|
||||||
xmlns:ub="http://uniboard.mnemis.com/widgets" |
|
||||||
id="http://uniboard.mnemis.com/widgets/webbrowser" |
|
||||||
version="1.1" |
|
||||||
width="900" |
|
||||||
height="500" |
|
||||||
ub:resizable="true"> |
|
||||||
|
|
||||||
<name>Choisir</name> |
|
||||||
<author href="http://www.getuniboard.com" |
|
||||||
email="info@mnemis.com">Mnemis SA</author> |
|
||||||
<description>Choisir widget</description> |
|
||||||
|
|
||||||
<content src="index.html"/> |
|
||||||
</widget> |
|
||||||
@ -1,315 +0,0 @@ |
|||||||
html, body{ |
|
||||||
width: 100%; |
|
||||||
padding: 0; |
|
||||||
height: auto; |
|
||||||
background-color: white; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar { |
|
||||||
width: 14px; |
|
||||||
background-color:white; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb { |
|
||||||
border-radius: 10px; |
|
||||||
background-color:lightgray; |
|
||||||
border: 2px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:start{ |
|
||||||
border-radius: 10px; |
|
||||||
background-color:lightgray; |
|
||||||
background-image: url(../images/trgUp.png); |
|
||||||
background-size: 8px auto; |
|
||||||
background-position: center; |
|
||||||
background-repeat: no-repeat; |
|
||||||
border: 2px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:end{ |
|
||||||
border-radius: 10px; |
|
||||||
background-color:lightgray; |
|
||||||
background-image: url(../images/trgDown.png); |
|
||||||
background-size: 8px auto; |
|
||||||
background-position: center; |
|
||||||
background-repeat: no-repeat; |
|
||||||
border: 2px solid gray; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
|
|
||||||
#disc_nav_cont{ |
|
||||||
height: auto; |
|
||||||
position: fixed; |
|
||||||
left: 0; |
|
||||||
bottom: 0; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.disclaimer{ |
|
||||||
padding: 5px; |
|
||||||
text-align: center; |
|
||||||
background-color: #BBBBBB; |
|
||||||
border-top: solid 4px #EEEEEE; |
|
||||||
border-bottom: none; |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
.resultFooter{ |
|
||||||
width: 100%; |
|
||||||
padding: 3px; |
|
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
|
||||||
font-weight: bold; |
|
||||||
font-size: x-large; |
|
||||||
text-align: center; |
|
||||||
background-color: white; |
|
||||||
} |
|
||||||
|
|
||||||
#searchResult { |
|
||||||
overflow: hidden; |
|
||||||
text-align: center; |
|
||||||
margin-top: 50px; |
|
||||||
margin-bottom: 85px; |
|
||||||
} |
|
||||||
|
|
||||||
.search{ |
|
||||||
position: fixed; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
padding: 5px; |
|
||||||
background-color: #BBBBBB; |
|
||||||
border-bottom: solid 4px #EEEEEE; |
|
||||||
} |
|
||||||
|
|
||||||
.search, |
|
||||||
.disclaimer { |
|
||||||
width: 100%; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.searchInput{ |
|
||||||
padding: 3px; |
|
||||||
float: left; |
|
||||||
width: 100%; |
|
||||||
border-radius: 3px; |
|
||||||
border-style: none; |
|
||||||
height: 22px; |
|
||||||
line-height: 18px; |
|
||||||
vertical-align: middle; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.searchButton{ |
|
||||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
|
||||||
width: 24px; |
|
||||||
height: 24px; |
|
||||||
overflow: hidden; |
|
||||||
position: absolute; |
|
||||||
right: 30px; |
|
||||||
top: 9px; |
|
||||||
margin-left: -2px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.subSearch{ |
|
||||||
margin: 0; |
|
||||||
float: left; |
|
||||||
} |
|
||||||
|
|
||||||
#subSearchInput{ |
|
||||||
width: 100%; |
|
||||||
float: left; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
padding: 5px; |
|
||||||
padding-right: 26px; |
|
||||||
} |
|
||||||
|
|
||||||
#subSearchFilter{ |
|
||||||
width: 100%; |
|
||||||
float: left; |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
.searchResult{ |
|
||||||
width: 98%; |
|
||||||
padding: 3px; |
|
||||||
background-color:#123456; |
|
||||||
} |
|
||||||
|
|
||||||
.imgContainer{ |
|
||||||
display: inline-block; |
|
||||||
padding: 3px; |
|
||||||
margin: 3px; |
|
||||||
text-align: center; |
|
||||||
overflow: hidden; |
|
||||||
font-size: small; |
|
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
|
||||||
border: 1px solid #666; |
|
||||||
border-radius: 5px; |
|
||||||
-webkit-box-shadow: #dadada -1px 0 4px; |
|
||||||
-webkit-border-radius: 5px; |
|
||||||
box-shadow: #666 -1px 0 4px; |
|
||||||
vertical-align: top; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.filterContainer{ |
|
||||||
float: left; |
|
||||||
margin: 2px; |
|
||||||
padding: 2px; |
|
||||||
font-size: 14px; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.filterSelect{ |
|
||||||
border-style:none; |
|
||||||
-webkit-border-top-right-radius: 15px; |
|
||||||
-webkit-border-bottom-right-radius: 15px; |
|
||||||
-moz-border-radius-topright: 15px; |
|
||||||
-moz-border-radius-bottomright: 15px; |
|
||||||
border-top-right-radius: 15px; |
|
||||||
margin-top: 2px; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
span{ |
|
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
|
||||||
color: #666; |
|
||||||
} |
|
||||||
|
|
||||||
[draggable] { |
|
||||||
-webkit-user-select: none; |
|
||||||
user-select: none; |
|
||||||
} |
|
||||||
|
|
||||||
.toggleFilters{ |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
background-position: center; |
|
||||||
background-image: url(../images/down.png); |
|
||||||
position: absolute; |
|
||||||
top: 11px; |
|
||||||
right: 6px; |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.colors_line { |
|
||||||
float: left; |
|
||||||
margin: 4px; |
|
||||||
margin-right: 0; |
|
||||||
clear: left; |
|
||||||
} |
|
||||||
|
|
||||||
.custom { |
|
||||||
opacity: 0; |
|
||||||
position: absolute; |
|
||||||
left: -10000px; |
|
||||||
} |
|
||||||
|
|
||||||
.filter_button.button.color { |
|
||||||
display: inline-block; |
|
||||||
width: 15px; |
|
||||||
height: 15px; |
|
||||||
border: 1px solid #EBEBEB; |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
-webkit-box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.filter_button.button.color:hover { |
|
||||||
border: 1px solid rgb(128,128,128); |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
input[type="radio"]:checked + .filter_button.button.color { |
|
||||||
border: 1px solid rgb(255,255,255); |
|
||||||
box-shadow: 0 0 0px 1px #000; |
|
||||||
-webkit-box-shadow: 0 0 0px 1px #000; |
|
||||||
} |
|
||||||
|
|
||||||
#allcolor { |
|
||||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
#colored { |
|
||||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
#grayed { |
|
||||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
#black{ |
|
||||||
background-color:#ffffff; |
|
||||||
} |
|
||||||
#blue{ |
|
||||||
background-color:#0000FF; |
|
||||||
} |
|
||||||
#brown{ |
|
||||||
background-color:rgba(139, 82, 16, 1); |
|
||||||
} |
|
||||||
|
|
||||||
#gray{ |
|
||||||
background-color:#999999; |
|
||||||
} |
|
||||||
|
|
||||||
#green{ |
|
||||||
background-color:#00CC00; |
|
||||||
} |
|
||||||
|
|
||||||
#orange{ |
|
||||||
background-color:#FB940B; |
|
||||||
} |
|
||||||
|
|
||||||
#pink{ |
|
||||||
background-color:#FF98BF; |
|
||||||
} |
|
||||||
|
|
||||||
#purple{ |
|
||||||
background-color:#762CA7; |
|
||||||
} |
|
||||||
|
|
||||||
#red{ |
|
||||||
background-color:#CC0000; |
|
||||||
} |
|
||||||
|
|
||||||
#teal{ |
|
||||||
background-color:#03C0C6; |
|
||||||
} |
|
||||||
|
|
||||||
#white{ |
|
||||||
background-color:#000000; |
|
||||||
} |
|
||||||
|
|
||||||
#yellow{ |
|
||||||
background-color:#FFFF00; |
|
||||||
} |
|
||||||
|
|
||||||
.selectBox-dropdown, .selectBox-options li a { |
|
||||||
line-height: 1.3 !important; |
|
||||||
font-size: 13px; |
|
||||||
} |
|
||||||
|
|
||||||
.pager_button { |
|
||||||
padding: 3px 5px; |
|
||||||
font-size: 16px; |
|
||||||
color: black; |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
.pager_button.active { |
|
||||||
border-radius: 3px; |
|
||||||
-webkit-border-radius: 3px; |
|
||||||
background-color: gray; |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 9.0 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue