Merge master

This commit is contained in:
michigg 2017-12-21 12:44:49 +01:00
commit a6c5fb1491
304 changed files with 41531 additions and 515 deletions

9
Dockerfile Normal file
View File

@ -0,0 +1,9 @@
FROM alpine:3.6
RUN apk upgrade --update
RUN apk add --update python3
RUN apk add --update py3-pillow
RUN pip3 install django==1.11.7 django-jinja django-rest-framework django-analytical
ADD ["ofu_app", "/app"]
WORKDIR /app
EXPOSE 80
CMD ["python3", "manage.py", "runserver", "0.0.0.0:80"]

11
docker-compose.yml Normal file
View File

@ -0,0 +1,11 @@
version: "2"
services:
basta_server_web:
image: docker.wiai.de/basta/server:0.1
build: .
ports:
- "8080:80"
# basta_server_db:
# image: postgres:alpine

View File

@ -1,5 +1,5 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.2 on 2017-10-29 23:28
# Generated by Django 1.11.7 on 2017-12-21 11:43
from __future__ import unicode_literals
import datetime
@ -31,7 +31,7 @@ class Migration(migrations.Migration):
name='Lecture_Terms',
fields=[
('id', models.AutoField(primary_key=True, serialize=False)),
('starttime', models.TimeField(default=datetime.datetime(2017, 10, 29, 23, 28, 46, 228504, tzinfo=utc))),
('starttime', models.TimeField(default=datetime.datetime(2017, 12, 21, 11, 43, 16, 16543, tzinfo=utc))),
],
),
migrations.CreateModel(

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.2 on 2017-10-29 23:29
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0001_initial'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 10, 29, 23, 29, 23, 775652, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.5 on 2017-10-29 23:30
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0002_auto_20171030_0029'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 10, 29, 23, 30, 14, 805020, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-11-11 09:13
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0002_auto_20171030_0029'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 11, 11, 9, 13, 24, 139058, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.5 on 2017-10-29 23:31
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0003_auto_20171030_0030'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 10, 29, 23, 31, 17, 880353, tzinfo=utc)),
),
]

View File

@ -1,16 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 10:52
from __future__ import unicode_literals
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
('donar', '0003_auto_20171111_1013'),
('donar', '0004_auto_20171030_0031'),
]
operations = [
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:09
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0005_merge_20171221_1152'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 12, 21, 11, 9, 9, 865784, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:09
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0006_auto_20171221_1209'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 12, 21, 11, 9, 16, 431869, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:09
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0007_auto_20171221_1209'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 12, 21, 11, 9, 18, 686083, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:09
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0008_auto_20171221_1209'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 12, 21, 11, 9, 19, 968276, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:09
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0009_auto_20171221_1209'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 12, 21, 11, 9, 21, 301721, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:09
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0010_auto_20171221_1209'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 12, 21, 11, 9, 22, 322899, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:09
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0011_auto_20171221_1209'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 12, 21, 11, 9, 23, 249623, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:09
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0012_auto_20171221_1209'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 12, 21, 11, 9, 24, 184020, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:09
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0013_auto_20171221_1209'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 12, 21, 11, 9, 25, 856781, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:18
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0014_auto_20171221_1209'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 12, 21, 11, 18, 4, 770009, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:22
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0015_auto_20171221_1218'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 12, 21, 11, 22, 1, 546723, tzinfo=utc)),
),
]

View File

@ -1,22 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:26
from __future__ import unicode_literals
import datetime
from django.db import migrations, models
from django.utils.timezone import utc
class Migration(migrations.Migration):
dependencies = [
('donar', '0016_auto_20171221_1222'),
]
operations = [
migrations.AlterField(
model_name='lecture_terms',
name='starttime',
field=models.TimeField(default=datetime.datetime(2017, 12, 21, 11, 26, 18, 313275, tzinfo=utc)),
),
]

View File

@ -1,5 +1,5 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.6 on 2017-10-25 21:40
# Generated by Django 1.11.7 on 2017-12-04 01:44
from __future__ import unicode_literals
from django.db import migrations, models

View File

@ -2,11 +2,26 @@
from __future__ import unicode_literals
from django.contrib import admin
from apps.food.models import SingleFood, Menu, HappyHour, UserRating
from apps.food.models import SingleFood, Menu, HappyHour, UserRating, UserFoodImage
class SingleFoodInline(admin.TabularInline):
model = Menu.menu.through
extra = 1
# fields = ['menu__image', ]
class MenuAdmin(admin.ModelAdmin):
list_filter = ('date',)
inlines = [
SingleFoodInline,
]
exclude = ('menu',)
# Register your models here.
admin.site.register(SingleFood)
admin.site.register(Menu)
admin.site.register(HappyHour)
admin.site.register(UserRating)
admin.site.register(UserFoodImage)
admin.site.register(Menu, MenuAdmin)

View File

@ -0,0 +1,8 @@
from django import forms
from apps.food.models import UserFoodImage
class UploadImageForm(forms.ModelForm):
class Meta:
model = UserFoodImage
fields = ['image']

View File

@ -1,5 +1,5 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:21
# Generated by Django 1.11.7 on 2017-12-21 11:43
from __future__ import unicode_literals
from django.conf import settings
@ -51,11 +51,20 @@ class Migration(migrations.Migration):
('price_student', models.CharField(blank=True, max_length=10, null=True)),
('price_employee', models.CharField(blank=True, max_length=10, null=True)),
('price_guest', models.CharField(blank=True, max_length=10, null=True)),
('image', models.ImageField(blank=True, upload_to='food/%Y/%m/')),
('rating', models.FloatField(default=0)),
('allergens', models.ManyToManyField(blank=True, to='food.Allergene')),
],
),
migrations.CreateModel(
name='UserFoodImage',
fields=[
('id', models.AutoField(primary_key=True, serialize=False)),
('image', models.ImageField(blank=True, upload_to='food/originals/%Y/%m/%W')),
('thumbnail', models.ImageField(blank=True, upload_to='food/thumbs/%Y/%m/%W')),
('food', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='food.SingleFood')),
('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
],
),
migrations.CreateModel(
name='UserRating',
fields=[
@ -65,15 +74,24 @@ class Migration(migrations.Migration):
('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
],
),
migrations.AddField(
model_name='singlefood',
name='image',
field=models.ManyToManyField(blank=True, null=True, to='food.UserFoodImage'),
),
migrations.AddField(
model_name='menu',
name='menu',
field=models.ManyToManyField(to='food.SingleFood'),
field=models.ManyToManyField(related_name='foods', to='food.SingleFood'),
),
migrations.AlterUniqueTogether(
name='happyhour',
unique_together=set([('date', 'location', 'starttime', 'endtime')]),
),
migrations.AlterUniqueTogether(
name='userfoodimage',
unique_together=set([('user', 'food')]),
),
migrations.AlterUniqueTogether(
name='menu',
unique_together=set([('date', 'location')]),

View File

@ -1,20 +0,0 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.7 on 2017-12-21 11:26
from __future__ import unicode_literals
from django.db import migrations
class Migration(migrations.Migration):
dependencies = [
('food', '0001_initial'),
]
operations = [
migrations.RenameField(
model_name='singlefood',
old_name='image',
new_name='food_image',
),
]

View File

@ -1,8 +1,15 @@
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.utils import timezone
from django.db import models
import os
from io import BytesIO
from PIL import Image
from django.conf import settings
from django.contrib.auth.models import User
from django.core.files.uploadedfile import SimpleUploadedFile
from django.db import models
from django.utils import timezone
MAX_LENGTH = 60
@ -12,7 +19,7 @@ class Menu(models.Model):
id = models.AutoField(primary_key=True)
date = models.DateField(default=timezone.now)
location = models.CharField(max_length=MAX_LENGTH)
menu = models.ManyToManyField("SingleFood")
menu = models.ManyToManyField("SingleFood", related_name="foods")
class Meta:
unique_together = ('date', 'location')
@ -27,7 +34,7 @@ class SingleFood(models.Model):
price_student = models.CharField(max_length=10, blank=True, null=True)
price_employee = models.CharField(max_length=10, blank=True, null=True)
price_guest = models.CharField(max_length=10, blank=True, null=True)
food_image = models.ImageField(upload_to='food/%Y/%m/', blank=True)
image = models.ManyToManyField("UserFoodImage", blank=True, null=True)
rating = models.FloatField(default=0)
allergens = models.ManyToManyField("Allergene", blank=True)
@ -66,3 +73,43 @@ class UserRating(models.Model):
def __str__(self):
return "User: %s - Rating: %s" % (self.user.username, self.rating)
class UserFoodImage(models.Model):
id = models.AutoField(primary_key=True)
user = models.ForeignKey(User, on_delete=models.CASCADE, unique=False)
food = models.ForeignKey(SingleFood)
image = models.ImageField(upload_to='food/originals/%Y/%m/%W', blank=True)
thumbnail = models.ImageField(upload_to='food/thumbs/%Y/%m/%W', blank=True)
class Meta:
unique_together = ('user', 'food')
def __str__(self):
return "User: %s - Image: %s" % (self.user.username, str(self.image))
def save(self, force_update=False, force_insert=False, thumb_size=(640, 480)):
image = Image.open(self.image)
if image.mode not in ('L', 'RGB'):
image = image.convert('RGB')
image.thumbnail(thumb_size, Image.ANTIALIAS)
# save the thumbnail to memory
temp_handle = BytesIO()
image.save(temp_handle, 'jpeg')
temp_handle.seek(0) # rewind the file
# save to the thumbnail field
suf = SimpleUploadedFile(os.path.split(self.image.name)[-1],
temp_handle.read(),
content_type='image/jpg')
self.thumbnail.save('%s_thumbnail.%s' % (self.food.name, 'jpg'), suf, save=False)
# save the image object
self.image.name = "%s" % self.food.name
super(UserFoodImage, self).save(force_update, force_insert)
def delete(self, using=None, keep_parents=False):
os.remove(os.path.join(settings.MEDIA_ROOT, self.image.name))
os.remove(os.path.join(settings.MEDIA_ROOT, self.thumbnail.name))
super(UserFoodImage, self).delete()

View File

@ -56,5 +56,4 @@ urlpatterns = [
# Food Rating
url(r'^daily/rating/$', views.food_rating, name='rating-food'),
url(r'^weekly/rating/$', views.food_rating, name='rating-food'),
]

View File

@ -20,10 +20,12 @@ def getJsonFromFile(path):
def writeStudentenwerkDataInDB(data):
data = json.loads(data)
pprint(data)
for menu in data['weekmenu']:
pprint(menu)
foodlist = []
for single_food in menu['menu']:
pprint(single_food)
if 'allergens' in single_food:
allergens = []
for allergen in single_food['allergens']:
@ -33,10 +35,22 @@ def writeStudentenwerkDataInDB(data):
allergens.append(Allergene.objects.get(name=allergen))
try:
if 'prices' in single_food:
if 'price_student' in single_food['prices']:
price_student = single_food['prices']['price_student']
else:
price_student = "None"
if 'price_employee' in single_food['prices']:
price_employee = single_food['prices']['price_employee']
else:
price_employee = "None"
if 'price_guest' in single_food['prices']:
price_guest = single_food['prices']['price_guest']
else:
price_guest = "None"
db_single_food = SingleFood.objects.create(name=single_food['title'],
price_student=single_food['prices']['price_student'],
price_employee=single_food['prices']['price_employee'],
price_guest=single_food['prices']['price_guest'])
price_student=price_student,
price_employee=price_employee,
price_guest=price_guest)
else:
db_single_food = SingleFood.objects.create(name=single_food['title'])
if 'allergens' in locals():
@ -45,22 +59,23 @@ def writeStudentenwerkDataInDB(data):
except IntegrityError:
db_single_food = SingleFood.objects.get(name=single_food['title'])
if 'prices' in single_food:
db_single_food.price_student = single_food['prices']['price_student'],
db_single_food.price_employee = single_food['prices']['price_employee'],
db_single_food.price_guest = single_food['prices']['price_guest']
if 'price_student' in single_food['prices']:
db_single_food.price_student = single_food['prices']['price_student']
if 'price_employee' in single_food['prices']:
db_single_food.price_employee = single_food['prices']['price_employee']
if 'price_guest' in single_food['prices']:
db_single_food.price_guest = single_food['prices']['price_guest']
if 'allergens' in locals():
db_single_food.allergens = allergens
foodlist.append(db_single_food)
try:
date = datetime.strptime(str(menu['date']), "%d.%m.").replace(year=datetime.today().year)
menu = Menu.objects.create(location=data['name'],
date=date)
menu = Menu.objects.create(location=data['name'], date=date)
menu.menu = foodlist
menu.save()
except IntegrityError:
except IntegrityError as error:
# ignored
break
pass
def writeFekideDataInDB(data):

View File

@ -3,6 +3,7 @@ from bs4 import BeautifulSoup
import json
import datetime
import re
from pprint import pprint
SPEISEPLAN_NAME_SELECTOR = '.csc-default .csc-header .csc-firstHeader'
@ -64,4 +65,4 @@ def parsePage(url: str):
# LINK_ERBA_CAFETE = "https://www.studentenwerk-wuerzburg.de/bamberg/essen-trinken/sonderspeiseplaene/cafeteria-erba-insel.html"
# parsePage(LINK_ERBA_CAFETE)
# pprint(parsePage(LINK_ERBA_CAFETE))

View File

@ -3,7 +3,8 @@ from bs4 import BeautifulSoup
import json
import datetime
FEKI_URL = "https://www.studentenwerk-wuerzburg.de/bamberg/essen-trinken/speiseplaene.html?tx_thmensamenu_pi2%5Bmensen%5D=3&tx_thmensamenu_pi2%5Baction%5D=show&tx_thmensamenu_pi2%5Bcontroller%5D=Speiseplan&cHash=c3fe5ebb35e5fba3794f01878e798b7c"
# FEKI_URL = "https://www.studentenwerk-wuerzburg.de/bamberg/essen-trinken/speiseplaene.html?tx_thmensamenu_pi2%5Bmensen%5D=3&tx_thmensamenu_pi2%5Baction%5D=show&tx_thmensamenu_pi2%5Bcontroller%5D=Speiseplan&cHash=c3fe5ebb35e5fba3794f01878e798b7c"
def loadPage(url: str):
@ -27,9 +28,12 @@ def getFoodPerDay(soup):
title = singleFoodSoup.find('div', {'class': 'title'}).getText()
allergens = [e.getText() for e in singleFoodSoup.select('.left .additnr .toggler ul li')]
prices = {}
prices['price_student'] = singleFoodSoup.select('.price')[0]['data-default']
prices['price_employee'] = singleFoodSoup.select('.price')[0]['data-bed']
prices['price_guest'] = singleFoodSoup.select('.price')[0]['data-guest']
if singleFoodSoup.select('.price'):
prices['price_student'] = singleFoodSoup.select('.price')[0]['data-default']
if singleFoodSoup.select('.price'):
prices['price_employee'] = singleFoodSoup.select('.price')[0]['data-bed']
if singleFoodSoup.select('.price'):
prices['price_guest'] = singleFoodSoup.select('.price')[0]['data-guest']
singleFoodObj['title'] = title
singleFoodObj['allergens'] = allergens
singleFoodObj['prices'] = prices
@ -64,5 +68,4 @@ def getFoodplanName(soup):
foodplan_name = soup.select('.mensamenu h2')[0].getText()
return foodplan_name
parsePage(FEKI_URL)
# parsePage(FEKI_URL)

View File

@ -2,22 +2,35 @@
from __future__ import unicode_literals
import datetime
import os
from django.core.exceptions import ObjectDoesNotExist
from django.http import HttpResponse
from django.shortcuts import render
from pprint import pprint
from apps.food.models import Menu, HappyHour, SingleFood, UserRating
from apps.food.forms import UploadImageForm
from apps.food.models import Menu, HappyHour, SingleFood, UserRating, UserFoodImage
# Create your views here.
def daily_food(request):
today = datetime.datetime.now()
start_week = today - datetime.timedelta(today.weekday())
end_week = start_week + datetime.timedelta(7)
feki_menu = Menu.objects.filter(date__exact=today).filter(location__contains="Feldkirchenstraße").last()
austr_menu = Menu.objects.filter(date__exact=today).filter(location__contains="Austraße").last()
erba_cafete = Menu.objects.filter(date__exact=today).filter(location__contains="Erba").last()
markus_cafete = Menu.objects.filter(date__exact=today).filter(location__contains="markus").last()
happy_hours = HappyHour.objects.filter(date__exact=today)
weekly_menus = Menu.objects.filter(date__gte=start_week, date__lte=end_week)
weekly_feki_menu = weekly_menus.filter(location__contains="Feldkirchenstraße")
weekly_austr_menu = weekly_menus.filter(location__contains="Austraße")
weekly_erba_cafete = weekly_menus.filter(location__contains="Erba")
weekly_markus_cafete = weekly_menus.filter(location__contains="markus")
return render(request, "food/daily_food.jinja", {
'day': today,
'happy_hours': happy_hours,
@ -25,6 +38,10 @@ def daily_food(request):
'austr_menu': austr_menu,
'erba_cafete': erba_cafete,
'markus_cafete': markus_cafete,
'weekly_feki_menu': weekly_feki_menu,
'weekly_austr_menu': weekly_austr_menu,
'weekly_erba_cafete': weekly_erba_cafete,
'weekly_markus_cafete': weekly_markus_cafete,
})
@ -49,8 +66,15 @@ def weekly_food(request):
def food_detail(request, id):
if request.method == 'POST':
if pic_upload(request, id) == False:
return HttpResponse(status=404)
food = SingleFood.objects.get(id=id)
return render(request, "food/detailed_food.jinja", {'food': food})
if request.user.is_authenticated:
images = UserFoodImage.objects.filter(food=id, user=request.user)
return render(request, "food/detailed_food.jinja", {'food': food, 'images': images})
else:
return render(request, "food/detailed_food.jinja", {'food': food})
def all_food(request):
@ -70,8 +94,7 @@ def all_food(request):
def food(request):
return render(request, "food/home.jinja", {
})
return render(request, "food/home.jinja", {})
def food_rating(request):
@ -94,7 +117,6 @@ def food_rating(request):
food.save()
return HttpResponse(status=200)
return HttpResponse(status=404)
return HttpResponse(status=403)
@ -106,5 +128,22 @@ def food_image(request):
food.image = img
food.save()
return HttpResponse(status=200)
return HttpResponse(status=404)
def pic_upload(request, id):
form = UploadImageForm(request.POST, request.FILES)
if form.is_valid():
try:
old_user_pic = UserFoodImage.objects.get(user=request.user, food=id)
old_user_pic.delete()
except ObjectDoesNotExist:
pass
userPic = form.save(commit=False)
userPic.food = SingleFood.objects.get(id=id)
userPic.user = request.user
userPic.save()
return True
else:
return False

View File

@ -8,4 +8,10 @@ class SignUpForm(UserCreationForm):
class Meta:
model = User
fields = ('username', 'email', 'password1', 'password2', )
fields = ('username', 'email', 'password1', 'password2',)
class ChangeUserDataForm(forms.ModelForm):
class Meta:
model = User
fields = ('first_name', 'last_name', 'email',)

View File

@ -1,5 +1,5 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.11.2 on 2017-10-29 11:07
# Generated by Django 1.11.7 on 2017-12-04 01:02
from __future__ import unicode_literals
from django.conf import settings

View File

@ -3,6 +3,7 @@ from apps.registration import views as core_views
urlpatterns = [
url(r'^$', core_views.account_view, name='account'),
url(r'^change/$', core_views.account_change, name='change-account'),
url(r'^signup/$', core_views.signup, name='signup'),
url(r'^account_activation_sent/$', core_views.account_activation_sent, name='account_activation_sent'),
url(r'^activate/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$',

View File

@ -1,17 +1,17 @@
from django.contrib.sites.shortcuts import get_current_site
from django.shortcuts import render, redirect
from django.shortcuts import render, redirect, get_object_or_404, render_to_response
from django.utils.encoding import force_bytes
from django.utils.http import urlsafe_base64_encode
from django.template.loader import render_to_string
from apps.registration.forms import SignUpForm
from apps.registration.forms import SignUpForm, ChangeUserDataForm
from apps.registration.tokens import account_activation_token
from django.contrib.auth import login
from django.contrib.auth.models import User
from django.utils.encoding import force_text
from django.utils.http import urlsafe_base64_decode
from django.core.mail import send_mail
from django.shortcuts import HttpResponse
from apps.food.models import UserRating
from django.shortcuts import HttpResponse, redirect
from apps.food.models import UserRating, UserFoodImage
def signup(request):
@ -62,11 +62,31 @@ def account_activation_sent(request):
def account_view(request):
if request.user.is_authenticated:
user = request.user
food_ratings = UserRating.objects.filter(user=user).order_by('food__name')
food_images = UserFoodImage.objects.filter(user=user)
print(food_images)
return render(request, 'registration/account_view.jinja',
{'name': user.username, 'email': user.email, 'date_joined': user.date_joined,
'food_ratings': food_ratings, 'first_name': user.first_name, 'last_name': user.last_name,
'last_login': user.last_login})
'last_login': user.last_login, 'food_images': food_images})
else:
return HttpResponse(status=404)
def account_change(request):
if request.user.is_authenticated:
instance = get_object_or_404(User, id=request.user.id)
form = ChangeUserDataForm(request.POST, instance=instance, initial={"first_name": "Hallo"})
if request.method == 'POST':
if form.is_valid():
form.save()
return redirect('account')
else:
return HttpResponse(status=404)
else:
return render(request, 'registration/account_data_change.jinja', {'form': form})
else:
return HttpResponse(status=404)

View File

@ -19,6 +19,8 @@ from django.contrib import admin
from django.contrib.auth import views as auth_views
from rest_framework import routers
from apps.food import urls as food_urls
from django.conf import settings
from django.conf.urls.static import static
# API router
api_router_v1 = routers.DefaultRouter()
@ -28,24 +30,23 @@ api_router_v1_1 = routers.DefaultRouter()
api_router_v1_1.registry.extend(food_urls.apiRouter_v1_1.registry)
urlpatterns = [
# -- User Managment --
url(r'^login/$', auth_views.login, {'template_name': 'registration/login.jinja'}, name='login'),
url(r'^logout/$', auth_views.logout, {'next_page': 'home'}, name='logout'),
url(r'^admin/', admin.site.urls),
# url(r'^signup/$', core_views.signup, name='signup'),
url(r'^account/', include("apps.registration.urls")),
url(r'^login/$', auth_views.login, {'template_name': 'registration/login.jinja'}, name='login'),
url(r'^logout/$', auth_views.logout, {'next_page': 'home'}, name='logout'),
url(r'^admin/', admin.site.urls),
# url(r'^signup/$', core_views.signup, name='signup'),
url(r'^account/', include("apps.registration.urls")),
url(r'^$', views.home, name="home"),
url(r'^$', views.home, name="home"),
# -- Apps --
url(r'^food/', include('apps.food.urls')),
url(r'^events/', include('apps.events.urls')),
url(r'^donar/', include('apps.donar.urls')),
url(r'^links/$', views.links, name='links-home'),
url(r'^impressum/$', views.impressum, name='impressum'),
# -- Apps --
url(r'^food/', include('apps.food.urls')),
url(r'^events/', include('apps.events.urls')),
url(r'^donar/', include('apps.donar.urls')),
url(r'^links/$', views.links, name='links-home'),
url(r'^impressum/$', views.impressum, name='impressum'),
# -- API --
url(r'^api/v1/', include(api_router_v1.urls)),
url(r'^api/v1.1/', include(api_router_v1_1.urls)),
url(r'^api/auth/', include('rest_framework.urls', namespace='rest_framework'))
]
# -- API --
url(r'^api/v1/', include(api_router_v1.urls)),
url(r'^api/v1.1/', include(api_router_v1_1.urls)),
url(r'^api/auth/', include('rest_framework.urls', namespace='rest_framework'))
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

View File

@ -39,4 +39,14 @@ footer {
.image-wrapper img {
width: 80px;
height: 80px;
}
.lb-image, .lb-outerContainer, .lb-image {
width: 56% !important;
height: auto !important;
}
.lb-image {
width: 100% !important;
height: auto !important;
}

View File

@ -1,14 +1,14 @@
#main-nav {
display: table;
position: fixed;
left: -200px;
right: -200px;
top: 0;
background-color: transparent;
z-index: 5000;
height: 100%;
width: 200px;
-webkit-transition: left 0.5s; /* For Safari 3.1 to 6.0 */
transition: left 0.5s;
-webkit-transition: right 0.5s; /* For Safari 3.1 to 6.0 */
transition: right 0.5s;
}
#main-nav .nav-wrapper {
@ -18,7 +18,7 @@
#main-nav .inner-nav .menu-item {
padding: 10px;
padding-left: 20px;
padding-right: 20px;
width: 100%;
display: block;
background-color: #ffffff;
@ -39,14 +39,14 @@
background-color: #ffffff;
display: block;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 0;
text-transform: uppercase;
font-weight: bold;
}
#menu-button:hover #main-nav, #menu-button:active #main-nav {
left: 0;
right: 0;
}
#menu-button:hover i, #menu-button:active i {

View File

@ -2,6 +2,7 @@
* Created by michigg on 20.10.17.
*/
document.addEventListener('DOMContentLoaded', rate_init);
/**
* setup page, Add event listener
*/
@ -62,6 +63,13 @@ function buildRating(food_id, rating) {
}
}
function fixRating(food_id) {
$('.food-' + food_id).css("color", "#0074D9");
for (var i = 0; i < 5; i++) {
$('.star-' + (i + 1) + '-' + food_id).off();
}
}
/**
* Sends user Rating to server
*
@ -80,6 +88,8 @@ function sendRating(obj) {
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log("sent");
fixRating(food_id);
}
if (this.readyState == 4 && this.status == 403) {
console.log("ERROR");

View File

@ -0,0 +1,21 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

View File

@ -0,0 +1,27 @@
🐛 **Github issues is for bugs only.** No feature requests or support tickets please.
## Trouble using Lightbox?
1. Search [Stackoverflow](https://stackoverflow.com/questions/tagged/lightbox2) to see if other people have run into similar issues.
3. If you don't find anything similar, then post a new question on [Stackoverflow](https://stackoverflow.com/questions/ask). Use the `lightbox2` tag.
## Have a Feature Request?
1. [Search through existing Github Issues and PRs](https://github.com/lokesh/lightbox2/issues) to see if the feature has been discussed or already created.
2. If not, search [Stackoverflow](https://stackoverflow.com/questions/tagged/lightbox2) to see if other people have made similar requests.
3. If your feature request is unique, then post a new question on [Stackoverflow](https://stackoverflow.com/questions/ask). Use the `lightbox2` tag.
View the project [Roadmap](https://github.com/lokesh/lightbox2/blob/master/ROADMAP.md).
## Found a Bug?
[Search through existing Github Issues](https://github.com/lokesh/lightbox2/issues) that have been reported to avoid creating a duplicate issue. If your bug has not been reported, create a new issue with the following details:
**What version of Lightbox2 you are using?**
**Which browsers and operating systems have you seen the issue on?**
**What are the steps to reproduce the bug?**
**Do you have link to a live site where the bug is visible? or can you post relevant HTML, CSS, and Javascript?**

View File

@ -0,0 +1,4 @@
> Pull Requests are welcome. But note that v2 of Lightbox is in Maintenance Mode and no new features
> will be added. See the [Roadmap](https://github.com/lokesh/lightbox2/blob/master/ROADMAP.md).
>
> PRs submitted will still be reviewed and then kept open for other users to utilize.

View File

@ -0,0 +1,2 @@
bower_components
node_modules

View File

@ -0,0 +1,75 @@
{
"requireSpaceAfterLineComment": true,
"requireSpaceAfterKeywords": [
"do",
"for",
"if",
"else",
"switch",
"case",
"try",
"catch",
"void",
"while",
"with",
"return",
"typeof"
],
"requireSpaceBeforeBlockStatements": true,
"requireParenthesesAroundIIFE": true,
"requireSpacesInConditionalExpression": true,
"disallowMultipleVarDecl": true,
"requireBlocksOnNewline": true,
"disallowEmptyBlocks": true,
"disallowSpacesInsideParentheses": true,
"disallowSpaceAfterObjectKeys": true,
"requireSpaceBeforeObjectValues": true,
"requireCommaBeforeLineBreak": true,
"requireOperatorBeforeLineBreak": [
"?",
"=",
"+",
"-",
"/",
"*",
"==",
"===",
"!=",
"!==",
">",
">=",
"<",
"<="
],
"disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
"disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
"requireSpaceBeforeBinaryOperators": [
"=",
"+",
"-",
"/",
"*",
"==",
"===",
"!=",
"!=="
],
"requireSpaceAfterBinaryOperators": [
"=",
",",
"+",
"-",
"/",
"*",
"==",
"===",
"!=",
"!=="
],
"disallowMixedSpacesAndTabs" : true,
"disallowTrailingWhitespace": true,
"disallowTrailingComma": true,
"requireLineFeedAtFileEnd": true,
"requireCapitalizedConstructors": true
}

View File

@ -0,0 +1,35 @@
{
"bitwise":true,
"browser":true,
"camelcase":true,
"curly":true,
"eqeqeq":true,
"forin":true,
"freeze":true,
"indent":2,
"latedef":true,
"maxdepth": 6,
"maxparams": 6,
"maxstatements": 50,
"newcap": true,
"noarg":true,
"noempty":true,
"nonbsp":true,
"nonew":true,
"quotmark":"single",
"trailing":true,
"undef":true,
"unused":"vars",
"immed":true,
"browser": true,
"jquery":true,
"predef": [
"alert",
"confirm",
"console",
"escape",
"define",
"module",
"require"
]
}

View File

@ -0,0 +1,15 @@
## How to Make a Release
### Build
- **Checkout dev branch.** This will contain work queued up for the next release.
- **Update version number.** Manually update version number in `src/lightbox.js` and `package.json`. Don't use `npm version`.
- **`grunt build`.** Make sure you have run `bower install` ahead of this as it will pull down jQuery which is utilized in the build step.
- **Merge to `master`.** Commit changes and push to new branch. Create PR from this branch to `master`. Merge.
### Release
- **Create tagged release.** Go to [Github Releases page](https://github.com/lokesh/lightbox2/releases). Draft a new release. Naming convention is `v2.8.1`. Add notes that link to PRs.
- **`npm publish`**. No need to do anything for Bower as it is entirely based on the Github repo.
### Maintenance and Docs
- **GH clean-up.** Close out issues with `[status] pending release`.
- **Lightbox Site.** If there are any changes to the options, don't forget to update the [Lightbox Site](http://localhost:8000/dist/#options). The code lives in a separate repo, [lightbox2-site](https://github.com/lokesh/lightbox2-site/).

View File

@ -0,0 +1,83 @@
module.exports = function(grunt) {
grunt.initConfig({
concat: {
dist: {
src: ['bower_components/jquery/dist/jquery.js', 'src/js/lightbox.js'],
dest: 'dist/js/lightbox-plus-jquery.js',
},
},
connect: {
server: {
options: {
port: 8000
}
}
},
copy: {
dist: {
files: [
{
expand: true,
cwd: 'src/',
src: ['**'],
dest: 'dist/'
}
],
},
},
jshint: {
all: [
'src/js/lightbox.js'
],
options: {
jshintrc: true
}
},
jscs: {
src: [
'src/js/lightbox.js'
],
options: {
config: ".jscsrc"
}
},
uglify: {
options: {
preserveComments: 'some',
sourceMap: true
},
dist: {
files: {
'dist/js/lightbox.min.js': ['src/js/lightbox.js'],
'dist/js/lightbox-plus-jquery.min.js': ['dist/js/lightbox-plus-jquery.js']
}
}
},
watch: {
jshint: {
files: ['src/js/lightbox.js'],
tasks: ['jshint', 'jscs']
}
},
cssmin: {
minify: {
src: 'dist/css/lightbox.css',
dest: 'dist/css/lightbox.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks("grunt-jscs");
grunt.registerTask('default', ['connect', 'watch']);
grunt.registerTask('test', ['jshint', 'jscs']);
grunt.registerTask('build', ['jshint', 'jscs', 'copy:dist', 'concat', 'uglify', 'cssmin:minify']);
};

View File

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2015 Lokesh Dhakar
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@ -0,0 +1,19 @@
# Lightbox2
The original lightbox script. Eight years later — still going strong!
Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers.
- **Demos and usage instructions.** Visit the [Lightbox homepage](http://lokeshdhakar.com/projects/lightbox2/) to see examples, info on getting started, script options, how to get help, and more.
- **Releases and Changelog**. Viewable on the [Github Releases page](https://github.com/lokesh/lightbox2/releases)
- **Roadmap.** View the [Roadmap](https://github.com/lokesh/lightbox2/blob/master/ROADMAP.md) for a peek at what is being planned for future releases.
- **License.** Lightbox is licensed under the MIT License. [Learn more about the license.](http://lokeshdhakar.com/projects/lightbox2/#license)
by [Lokesh Dhakar](http://www.lokeshdhakar.com)
---
### Info for Maintainers
- **Release instructions.** See [DEPLOY.md](https://github.com/lokesh/lightbox2/blob/master/DEPLOY.md).
- **Issues and PRs requiring review.** See items tagged with [\[status\] needs review](https://github.com/lokesh/lightbox2/labels/%5Bstatus%5D%20needs%20review)

View File

@ -0,0 +1,64 @@
# Roadmap
## v2.x - Maintenance Mode
No new features are being worked on for v2.x.
## v3.0 - In Brainstorming Phase
**Not planned for v3.0**
The goal of this script from it's beginnings till today is to to provide a better *image viewing experience*.
- **HTML or video content.** If you need to show html or video content, I recommend googling for an alternative script as there are many options.
- **Social sharing buttons.**
**Image Support**
- Investigate `srcset` and `<picture>`
**Interactions**
- Add touch gesture support.
- Exploring using tilt gesture on mobile devices with extra-wide images.
- If user attempts to go forward when at end of image set, animation (shake?) indicating the end or option to close Lightbox.
- Make sure right-click/long pressing works to access the image's context menu.
**Layout**
- Allow vertical centering.
- Update sizing on window resize.
- Should the dev be able to choose the position of the caption, close button, and nav controls?
- Optimize layout for mobile.
- Optimize layout for screens of varying densities.
- Should the close button still live in the bottom right corner?
**Animations**
- Evaluate start, end, and transition animations.
- Rewrite animations for performance and flexibility.
**Assets**
- Use inline SVG for UI elements.
**Caching**
- Review if and how images should be preloaded
**Error Handling**
- What happens when an image url is incorrect?
- What happens when an image takes too long to load?
**Accessibility**
- Should opening lightbox update the url? and should this url be parsed on page load to show Lightbox automatically?
- Review alt attributes.
- Review ARIA roles.
- Review constrast ratios.
- Review keyboard input and tabbing.
- Review click/touch target size.
- Test with screen reader.
**API**
- Do not initialize automatically and allow multiple instances.
- Add event handlers.
- Allow setting options on the fly.
- Allow the setting of options from HTML?
- Evaluate preloading and caching.
- Allow placement inside of a specified element? Orig feature requester was dealing with iframe.
**Dependencies**
- Drop jQuery requirement.

View File

@ -0,0 +1,29 @@
{
"name": "lightbox2",
"homepage": "http://lokeshdhakar.com/projects/lightbox2/",
"authors": [
"Lokesh Dhakar <lokesh.dhakar@gmail.com>"
],
"description": "The original Lightbox script. Uses jQuery.",
"main": [
"./dist/js/lightbox.js",
"./dist/css/lightbox.css"
],
"keywords": [
"lightbox",
"lightbox2",
"overlay",
"gallery",
"slideshow",
"images"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components"
],
"dependencies": {
"jquery": ">2"
}
}

View File

@ -0,0 +1,207 @@
html.lb-disable-scrolling {
overflow: hidden;
/* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
position: fixed;
height: 100vh;
width: 100vw;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #ccc;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
.lb-data .lb-caption a {
color: #4ae;
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

View File

@ -0,0 +1 @@
.lb-loader,.lightbox{text-align:center;line-height:0}.lb-dataContainer:after,.lb-outerContainer:after{content:"";clear:both}html.lb-disable-scrolling{overflow:hidden;position:fixed;height:100vh;width:100vw}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{position:absolute;left:0;width:100%;z-index:10000;font-weight:400}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-loader,.lb-nav{position:absolute;left:0}.lb-outerContainer:after{display:table}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{top:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{display:table}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}

Binary file not shown.

After

Width:  |  Height:  |  Size: 280 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,519 @@
/*!
* Lightbox v2.10.0
* by Lokesh Dhakar
*
* More info:
* http://lokeshdhakar.com/projects/lightbox2/
*
* Copyright 2007, 2018 Lokesh Dhakar
* Released under the MIT license
* https://github.com/lokesh/lightbox2/blob/master/LICENSE
*
* @preserve
*/
// Uses Node, AMD or browser globals to create a module.
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require('jquery'));
} else {
// Browser globals (root is window)
root.lightbox = factory(root.jQuery);
}
}(this, function ($) {
function Lightbox(options) {
this.album = [];
this.currentImageIndex = void 0;
this.init();
// options
this.options = $.extend({}, this.constructor.defaults);
this.option(options);
}
// Descriptions of all options available on the demo site:
// http://lokeshdhakar.com/projects/lightbox2/index.html#options
Lightbox.defaults = {
albumLabel: 'Image %1 of %2',
alwaysShowNavOnTouchDevices: false,
fadeDuration: 600,
fitImagesInViewport: true,
imageFadeDuration: 600,
// maxWidth: 800,
// maxHeight: 600,
positionFromTop: 50,
resizeDuration: 700,
showImageNumberLabel: true,
wrapAround: false,
disableScrolling: false,
/*
Sanitize Title
If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
This will free you to add html tags, such as links, in the caption.
If the caption data is user submitted or from some other untrusted source, then set this to true
to prevent xss and other injection attacks.
*/
sanitizeTitle: false
};
Lightbox.prototype.option = function(options) {
$.extend(this.options, options);
};
Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) {
return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages);
};
Lightbox.prototype.init = function() {
var self = this;
// Both enable and build methods require the body tag to be in the DOM.
$(document).ready(function() {
self.enable();
self.build();
});
};
// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
// that contain 'lightbox'. When these are clicked, start lightbox.
Lightbox.prototype.enable = function() {
var self = this;
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
self.start($(event.currentTarget));
return false;
});
};
// Build html for the lightbox and the overlay.
// Attach event handlers to the new DOM elements. click click click
Lightbox.prototype.build = function() {
if ($('#lightbox').length > 0) {
return;
}
var self = this;
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
// Cache jQuery objects
this.$lightbox = $('#lightbox');
this.$overlay = $('#lightboxOverlay');
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
this.$container = this.$lightbox.find('.lb-container');
this.$image = this.$lightbox.find('.lb-image');
this.$nav = this.$lightbox.find('.lb-nav');
// Store css values for future lookup
this.containerPadding = {
top: parseInt(this.$container.css('padding-top'), 10),
right: parseInt(this.$container.css('padding-right'), 10),
bottom: parseInt(this.$container.css('padding-bottom'), 10),
left: parseInt(this.$container.css('padding-left'), 10)
};
this.imageBorderWidth = {
top: parseInt(this.$image.css('border-top-width'), 10),
right: parseInt(this.$image.css('border-right-width'), 10),
bottom: parseInt(this.$image.css('border-bottom-width'), 10),
left: parseInt(this.$image.css('border-left-width'), 10)
};
// Attach event handlers to the newly minted DOM elements
this.$overlay.hide().on('click', function() {
self.end();
return false;
});
this.$lightbox.hide().on('click', function(event) {
if ($(event.target).attr('id') === 'lightbox') {
self.end();
}
return false;
});
this.$outerContainer.on('click', function(event) {
if ($(event.target).attr('id') === 'lightbox') {
self.end();
}
return false;
});
this.$lightbox.find('.lb-prev').on('click', function() {
if (self.currentImageIndex === 0) {
self.changeImage(self.album.length - 1);
} else {
self.changeImage(self.currentImageIndex - 1);
}
return false;
});
this.$lightbox.find('.lb-next').on('click', function() {
if (self.currentImageIndex === self.album.length - 1) {
self.changeImage(0);
} else {
self.changeImage(self.currentImageIndex + 1);
}
return false;
});
/*
Show context menu for image on right-click
There is a div containing the navigation that spans the entire image and lives above of it. If
you right-click, you are right clicking this div and not the image. This prevents users from
saving the image or using other context menu actions with the image.
To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
set pointer-events to none on the nav div. This is so that the upcoming right-click event on
the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
we set the pointer events back to auto for the nav div so it can capture hover and left-click
events as usual.
*/
this.$nav.on('mousedown', function(event) {
if (event.which === 3) {
self.$nav.css('pointer-events', 'none');
self.$lightbox.one('contextmenu', function() {
setTimeout(function() {
this.$nav.css('pointer-events', 'auto');
}.bind(self), 0);
});
}
});
this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
self.end();
return false;
});
};
// Show overlay and lightbox. If the image is part of a set, add siblings to album array.
Lightbox.prototype.start = function($link) {
var self = this;
var $window = $(window);
$window.on('resize', $.proxy(this.sizeOverlay, this));
$('select, object, embed').css({
visibility: 'hidden'
});
this.sizeOverlay();
this.album = [];
var imageNumber = 0;
function addToAlbum($link) {
self.album.push({
alt: $link.attr('data-alt'),
link: $link.attr('href'),
title: $link.attr('data-title') || $link.attr('title')
});
}
// Support both data-lightbox attribute and rel attribute implementations
var dataLightboxValue = $link.attr('data-lightbox');
var $links;
if (dataLightboxValue) {
$links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
for (var i = 0; i < $links.length; i = ++i) {
addToAlbum($($links[i]));
if ($links[i] === $link[0]) {
imageNumber = i;
}
}
} else {
if ($link.attr('rel') === 'lightbox') {
// If image is not part of a set
addToAlbum($link);
} else {
// If image is part of a set
$links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
for (var j = 0; j < $links.length; j = ++j) {
addToAlbum($($links[j]));
if ($links[j] === $link[0]) {
imageNumber = j;
}
}
}
}
// Position Lightbox
var top = $window.scrollTop() + this.options.positionFromTop;
var left = $window.scrollLeft();
this.$lightbox.css({
top: top + 'px',
left: left + 'px'
}).fadeIn(this.options.fadeDuration);
// Disable scrolling of the page while open
if (this.options.disableScrolling) {
$('html').addClass('lb-disable-scrolling');
}
this.changeImage(imageNumber);
};
// Hide most UI elements in preparation for the animated resizing of the lightbox.
Lightbox.prototype.changeImage = function(imageNumber) {
var self = this;
this.disableKeyboardNav();
var $image = this.$lightbox.find('.lb-image');
this.$overlay.fadeIn(this.options.fadeDuration);
$('.lb-loader').fadeIn('slow');
this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
this.$outerContainer.addClass('animating');
// When image to show is preloaded, we send the width and height to sizeContainer()
var preloader = new Image();
preloader.onload = function() {
var $preloader;
var imageHeight;
var imageWidth;
var maxImageHeight;
var maxImageWidth;
var windowHeight;
var windowWidth;
$image.attr({
'alt': self.album[imageNumber].alt,
'src': self.album[imageNumber].link
});
$preloader = $(preloader);
$image.width(preloader.width);
$image.height(preloader.height);
if (self.options.fitImagesInViewport) {
// Fit image inside the viewport.
// Take into account the border around the image and an additional 10px gutter on each side.
windowWidth = $(window).width();
windowHeight = $(window).height();
maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120;
// Check if image size is larger then maxWidth|maxHeight in settings
if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
maxImageWidth = self.options.maxWidth;
}
if (self.options.maxHeight && self.options.maxHeight < maxImageWidth) {
maxImageHeight = self.options.maxHeight;
}
// Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
// option than we need to size down while maintaining the aspect ratio.
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
imageWidth = maxImageWidth;
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
$image.width(imageWidth);
$image.height(imageHeight);
} else {
imageHeight = maxImageHeight;
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
$image.width(imageWidth);
$image.height(imageHeight);
}
}
}
self.sizeContainer($image.width(), $image.height());
};
preloader.src = this.album[imageNumber].link;
this.currentImageIndex = imageNumber;
};
// Stretch overlay to fit the viewport
Lightbox.prototype.sizeOverlay = function() {
this.$overlay
.width($(document).width())
.height($(document).height());
};
// Animate the size of the lightbox to fit the image we are showing
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
var self = this;
var oldWidth = this.$outerContainer.outerWidth();
var oldHeight = this.$outerContainer.outerHeight();
var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
function postResize() {
self.$lightbox.find('.lb-dataContainer').width(newWidth);
self.$lightbox.find('.lb-prevLink').height(newHeight);
self.$lightbox.find('.lb-nextLink').height(newHeight);
self.showImage();
}
if (oldWidth !== newWidth || oldHeight !== newHeight) {
this.$outerContainer.animate({
width: newWidth,
height: newHeight
}, this.options.resizeDuration, 'swing', function() {
postResize();
});
} else {
postResize();
}
};
// Display the image and its details and begin preload neighboring images.
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').stop(true).hide();
this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};
// Display previous and next navigation if appropriate.
Lightbox.prototype.updateNav = function() {
// Check to see if the browser supports touch events. If so, we take the conservative approach
// and assume that mouse hover events are not supported and always show prev/next navigation
// arrows in image sets.
var alwaysShowNav = false;
try {
document.createEvent('TouchEvent');
alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false;
} catch (e) {}
this.$lightbox.find('.lb-nav').show();
if (this.album.length > 1) {
if (this.options.wrapAround) {
if (alwaysShowNav) {
this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
}
this.$lightbox.find('.lb-prev, .lb-next').show();
} else {
if (this.currentImageIndex > 0) {
this.$lightbox.find('.lb-prev').show();
if (alwaysShowNav) {
this.$lightbox.find('.lb-prev').css('opacity', '1');
}
}
if (this.currentImageIndex < this.album.length - 1) {
this.$lightbox.find('.lb-next').show();
if (alwaysShowNav) {
this.$lightbox.find('.lb-next').css('opacity', '1');
}
}
}
}
};
// Display caption, image number, and closing button.
Lightbox.prototype.updateDetails = function() {
var self = this;
// Enable anchor clicks in the injected caption html.
// Thanks Nate Wright for the fix. @https://github.com/NateWr
if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
this.album[this.currentImageIndex].title !== '') {
var $caption = this.$lightbox.find('.lb-caption');
if (this.options.sanitizeTitle) {
$caption.text(this.album[this.currentImageIndex].title);
} else {
$caption.html(this.album[this.currentImageIndex].title);
}
$caption.fadeIn('fast')
.find('a').on('click', function(event) {
if ($(this).attr('target') !== undefined) {
window.open($(this).attr('href'), $(this).attr('target'));
} else {
location.href = $(this).attr('href');
}
});
}
if (this.album.length > 1 && this.options.showImageNumberLabel) {
var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
} else {
this.$lightbox.find('.lb-number').hide();
}
this.$outerContainer.removeClass('animating');
this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
return self.sizeOverlay();
});
};
// Preload previous and next images in set.
Lightbox.prototype.preloadNeighboringImages = function() {
if (this.album.length > this.currentImageIndex + 1) {
var preloadNext = new Image();
preloadNext.src = this.album[this.currentImageIndex + 1].link;
}
if (this.currentImageIndex > 0) {
var preloadPrev = new Image();
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
}
};
Lightbox.prototype.enableKeyboardNav = function() {
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
};
Lightbox.prototype.disableKeyboardNav = function() {
$(document).off('.keyboard');
};
Lightbox.prototype.keyboardAction = function(event) {
var KEYCODE_ESC = 27;
var KEYCODE_LEFTARROW = 37;
var KEYCODE_RIGHTARROW = 39;
var keycode = event.keyCode;
var key = String.fromCharCode(keycode).toLowerCase();
if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
this.end();
} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
if (this.currentImageIndex !== 0) {
this.changeImage(this.currentImageIndex - 1);
} else if (this.options.wrapAround && this.album.length > 1) {
this.changeImage(this.album.length - 1);
}
} else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
if (this.currentImageIndex !== this.album.length - 1) {
this.changeImage(this.currentImageIndex + 1);
} else if (this.options.wrapAround && this.album.length > 1) {
this.changeImage(0);
}
}
};
// Closing time. :-(
Lightbox.prototype.end = function() {
this.disableKeyboardNav();
$(window).off('resize', this.sizeOverlay);
this.$lightbox.fadeOut(this.options.fadeDuration);
this.$overlay.fadeOut(this.options.fadeDuration);
$('select, object, embed').css({
visibility: 'visible'
});
if (this.options.disableScrolling) {
$('html').removeClass('lb-disable-scrolling');
}
};
return new Lightbox();
}));

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Lightbox Example</title>
<link rel="stylesheet" href="../dist/css/lightbox.min.css">
</head>
<body>
<section>
<h3>Two Individual Images</h3>
<div>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-2.jpg" alt="image-1"/></a>
</div>
<hr />
<h3>A Four Image Set</h3>
<div>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
</div>
</section>
<section>
<p>
For more information, visit <a href="http://lokeshdhakar.com/projects/lightbox2/">http://lokeshdhakar.com/projects/lightbox2/</a>
</p>
</section>
<script src="../dist/js/lightbox-plus-jquery.min.js"></script>
</body>
</html>

View File

@ -0,0 +1,40 @@
{
"name": "lightbox2",
"version": "2.10.0",
"author": "Lokesh Dhakar <lokesh.dhakar@gmail.com>",
"description": "The original Lightbox script. Uses jQuery.",
"keywords": [
"lightbox",
"lightbox2",
"overlay",
"gallery",
"slideshow",
"images"
],
"homepage": "http://lokeshdhakar.com/projects/lightbox2/",
"main": "./dist/js/lightbox.js",
"repository": {
"type": "git",
"url": "https://github.com/lokesh/lightbox2.git"
},
"bugs": {
"url": "https://github.com/lokesh/lightbox2/issues"
},
"licenses": [
{
"type": "MIT",
"url": "https://raw.githubusercontent.com/lokesh/lightbox2/master/LICENSE"
}
],
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-connect": "^0.7.1",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-cssmin": "^0.12.3",
"grunt-contrib-jshint": "^0.11.2",
"grunt-contrib-uglify": "~0.4.0",
"grunt-contrib-watch": "^0.5.3",
"grunt-jscs": "^1.8.0"
}
}

View File

@ -0,0 +1,207 @@
html.lb-disable-scrolling {
overflow: hidden;
/* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
position: fixed;
height: 100vh;
width: 100vw;
}
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}
.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 4px;
color: #ccc;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
.lb-data .lb-caption a {
color: #4ae;
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}
.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 280 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,519 @@
/*!
* Lightbox v2.10.0
* by Lokesh Dhakar
*
* More info:
* http://lokeshdhakar.com/projects/lightbox2/
*
* Copyright 2007, 2018 Lokesh Dhakar
* Released under the MIT license
* https://github.com/lokesh/lightbox2/blob/master/LICENSE
*
* @preserve
*/
// Uses Node, AMD or browser globals to create a module.
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require('jquery'));
} else {
// Browser globals (root is window)
root.lightbox = factory(root.jQuery);
}
}(this, function ($) {
function Lightbox(options) {
this.album = [];
this.currentImageIndex = void 0;
this.init();
// options
this.options = $.extend({}, this.constructor.defaults);
this.option(options);
}
// Descriptions of all options available on the demo site:
// http://lokeshdhakar.com/projects/lightbox2/index.html#options
Lightbox.defaults = {
albumLabel: 'Image %1 of %2',
alwaysShowNavOnTouchDevices: false,
fadeDuration: 600,
fitImagesInViewport: true,
imageFadeDuration: 600,
// maxWidth: 800,
// maxHeight: 600,
positionFromTop: 50,
resizeDuration: 700,
showImageNumberLabel: true,
wrapAround: false,
disableScrolling: false,
/*
Sanitize Title
If the caption data is trusted, for example you are hardcoding it in, then leave this to false.
This will free you to add html tags, such as links, in the caption.
If the caption data is user submitted or from some other untrusted source, then set this to true
to prevent xss and other injection attacks.
*/
sanitizeTitle: false
};
Lightbox.prototype.option = function(options) {
$.extend(this.options, options);
};
Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) {
return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages);
};
Lightbox.prototype.init = function() {
var self = this;
// Both enable and build methods require the body tag to be in the DOM.
$(document).ready(function() {
self.enable();
self.build();
});
};
// Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
// that contain 'lightbox'. When these are clicked, start lightbox.
Lightbox.prototype.enable = function() {
var self = this;
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
self.start($(event.currentTarget));
return false;
});
};
// Build html for the lightbox and the overlay.
// Attach event handlers to the new DOM elements. click click click
Lightbox.prototype.build = function() {
if ($('#lightbox').length > 0) {
return;
}
var self = this;
$('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
// Cache jQuery objects
this.$lightbox = $('#lightbox');
this.$overlay = $('#lightboxOverlay');
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
this.$container = this.$lightbox.find('.lb-container');
this.$image = this.$lightbox.find('.lb-image');
this.$nav = this.$lightbox.find('.lb-nav');
// Store css values for future lookup
this.containerPadding = {
top: parseInt(this.$container.css('padding-top'), 10),
right: parseInt(this.$container.css('padding-right'), 10),
bottom: parseInt(this.$container.css('padding-bottom'), 10),
left: parseInt(this.$container.css('padding-left'), 10)
};
this.imageBorderWidth = {
top: parseInt(this.$image.css('border-top-width'), 10),
right: parseInt(this.$image.css('border-right-width'), 10),
bottom: parseInt(this.$image.css('border-bottom-width'), 10),
left: parseInt(this.$image.css('border-left-width'), 10)
};
// Attach event handlers to the newly minted DOM elements
this.$overlay.hide().on('click', function() {
self.end();
return false;
});
this.$lightbox.hide().on('click', function(event) {
if ($(event.target).attr('id') === 'lightbox') {
self.end();
}
return false;
});
this.$outerContainer.on('click', function(event) {
if ($(event.target).attr('id') === 'lightbox') {
self.end();
}
return false;
});
this.$lightbox.find('.lb-prev').on('click', function() {
if (self.currentImageIndex === 0) {
self.changeImage(self.album.length - 1);
} else {
self.changeImage(self.currentImageIndex - 1);
}
return false;
});
this.$lightbox.find('.lb-next').on('click', function() {
if (self.currentImageIndex === self.album.length - 1) {
self.changeImage(0);
} else {
self.changeImage(self.currentImageIndex + 1);
}
return false;
});
/*
Show context menu for image on right-click
There is a div containing the navigation that spans the entire image and lives above of it. If
you right-click, you are right clicking this div and not the image. This prevents users from
saving the image or using other context menu actions with the image.
To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
set pointer-events to none on the nav div. This is so that the upcoming right-click event on
the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
we set the pointer events back to auto for the nav div so it can capture hover and left-click
events as usual.
*/
this.$nav.on('mousedown', function(event) {
if (event.which === 3) {
self.$nav.css('pointer-events', 'none');
self.$lightbox.one('contextmenu', function() {
setTimeout(function() {
this.$nav.css('pointer-events', 'auto');
}.bind(self), 0);
});
}
});
this.$lightbox.find('.lb-loader, .lb-close').on('click', function() {
self.end();
return false;
});
};
// Show overlay and lightbox. If the image is part of a set, add siblings to album array.
Lightbox.prototype.start = function($link) {
var self = this;
var $window = $(window);
$window.on('resize', $.proxy(this.sizeOverlay, this));
$('select, object, embed').css({
visibility: 'hidden'
});
this.sizeOverlay();
this.album = [];
var imageNumber = 0;
function addToAlbum($link) {
self.album.push({
alt: $link.attr('data-alt'),
link: $link.attr('href'),
title: $link.attr('data-title') || $link.attr('title')
});
}
// Support both data-lightbox attribute and rel attribute implementations
var dataLightboxValue = $link.attr('data-lightbox');
var $links;
if (dataLightboxValue) {
$links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
for (var i = 0; i < $links.length; i = ++i) {
addToAlbum($($links[i]));
if ($links[i] === $link[0]) {
imageNumber = i;
}
}
} else {
if ($link.attr('rel') === 'lightbox') {
// If image is not part of a set
addToAlbum($link);
} else {
// If image is part of a set
$links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
for (var j = 0; j < $links.length; j = ++j) {
addToAlbum($($links[j]));
if ($links[j] === $link[0]) {
imageNumber = j;
}
}
}
}
// Position Lightbox
var top = $window.scrollTop() + this.options.positionFromTop;
var left = $window.scrollLeft();
this.$lightbox.css({
top: top + 'px',
left: left + 'px'
}).fadeIn(this.options.fadeDuration);
// Disable scrolling of the page while open
if (this.options.disableScrolling) {
$('html').addClass('lb-disable-scrolling');
}
this.changeImage(imageNumber);
};
// Hide most UI elements in preparation for the animated resizing of the lightbox.
Lightbox.prototype.changeImage = function(imageNumber) {
var self = this;
this.disableKeyboardNav();
var $image = this.$lightbox.find('.lb-image');
this.$overlay.fadeIn(this.options.fadeDuration);
$('.lb-loader').fadeIn('slow');
this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
this.$outerContainer.addClass('animating');
// When image to show is preloaded, we send the width and height to sizeContainer()
var preloader = new Image();
preloader.onload = function() {
var $preloader;
var imageHeight;
var imageWidth;
var maxImageHeight;
var maxImageWidth;
var windowHeight;
var windowWidth;
$image.attr({
'alt': self.album[imageNumber].alt,
'src': self.album[imageNumber].link
});
$preloader = $(preloader);
$image.width(preloader.width);
$image.height(preloader.height);
if (self.options.fitImagesInViewport) {
// Fit image inside the viewport.
// Take into account the border around the image and an additional 10px gutter on each side.
windowWidth = $(window).width();
windowHeight = $(window).height();
maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - 120;
// Check if image size is larger then maxWidth|maxHeight in settings
if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
maxImageWidth = self.options.maxWidth;
}
if (self.options.maxHeight && self.options.maxHeight < maxImageWidth) {
maxImageHeight = self.options.maxHeight;
}
// Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
// option than we need to size down while maintaining the aspect ratio.
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
imageWidth = maxImageWidth;
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
$image.width(imageWidth);
$image.height(imageHeight);
} else {
imageHeight = maxImageHeight;
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
$image.width(imageWidth);
$image.height(imageHeight);
}
}
}
self.sizeContainer($image.width(), $image.height());
};
preloader.src = this.album[imageNumber].link;
this.currentImageIndex = imageNumber;
};
// Stretch overlay to fit the viewport
Lightbox.prototype.sizeOverlay = function() {
this.$overlay
.width($(document).width())
.height($(document).height());
};
// Animate the size of the lightbox to fit the image we are showing
Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
var self = this;
var oldWidth = this.$outerContainer.outerWidth();
var oldHeight = this.$outerContainer.outerHeight();
var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
function postResize() {
self.$lightbox.find('.lb-dataContainer').width(newWidth);
self.$lightbox.find('.lb-prevLink').height(newHeight);
self.$lightbox.find('.lb-nextLink').height(newHeight);
self.showImage();
}
if (oldWidth !== newWidth || oldHeight !== newHeight) {
this.$outerContainer.animate({
width: newWidth,
height: newHeight
}, this.options.resizeDuration, 'swing', function() {
postResize();
});
} else {
postResize();
}
};
// Display the image and its details and begin preload neighboring images.
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').stop(true).hide();
this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};
// Display previous and next navigation if appropriate.
Lightbox.prototype.updateNav = function() {
// Check to see if the browser supports touch events. If so, we take the conservative approach
// and assume that mouse hover events are not supported and always show prev/next navigation
// arrows in image sets.
var alwaysShowNav = false;
try {
document.createEvent('TouchEvent');
alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false;
} catch (e) {}
this.$lightbox.find('.lb-nav').show();
if (this.album.length > 1) {
if (this.options.wrapAround) {
if (alwaysShowNav) {
this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
}
this.$lightbox.find('.lb-prev, .lb-next').show();
} else {
if (this.currentImageIndex > 0) {
this.$lightbox.find('.lb-prev').show();
if (alwaysShowNav) {
this.$lightbox.find('.lb-prev').css('opacity', '1');
}
}
if (this.currentImageIndex < this.album.length - 1) {
this.$lightbox.find('.lb-next').show();
if (alwaysShowNav) {
this.$lightbox.find('.lb-next').css('opacity', '1');
}
}
}
}
};
// Display caption, image number, and closing button.
Lightbox.prototype.updateDetails = function() {
var self = this;
// Enable anchor clicks in the injected caption html.
// Thanks Nate Wright for the fix. @https://github.com/NateWr
if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
this.album[this.currentImageIndex].title !== '') {
var $caption = this.$lightbox.find('.lb-caption');
if (this.options.sanitizeTitle) {
$caption.text(this.album[this.currentImageIndex].title);
} else {
$caption.html(this.album[this.currentImageIndex].title);
}
$caption.fadeIn('fast')
.find('a').on('click', function(event) {
if ($(this).attr('target') !== undefined) {
window.open($(this).attr('href'), $(this).attr('target'));
} else {
location.href = $(this).attr('href');
}
});
}
if (this.album.length > 1 && this.options.showImageNumberLabel) {
var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
} else {
this.$lightbox.find('.lb-number').hide();
}
this.$outerContainer.removeClass('animating');
this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
return self.sizeOverlay();
});
};
// Preload previous and next images in set.
Lightbox.prototype.preloadNeighboringImages = function() {
if (this.album.length > this.currentImageIndex + 1) {
var preloadNext = new Image();
preloadNext.src = this.album[this.currentImageIndex + 1].link;
}
if (this.currentImageIndex > 0) {
var preloadPrev = new Image();
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
}
};
Lightbox.prototype.enableKeyboardNav = function() {
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
};
Lightbox.prototype.disableKeyboardNav = function() {
$(document).off('.keyboard');
};
Lightbox.prototype.keyboardAction = function(event) {
var KEYCODE_ESC = 27;
var KEYCODE_LEFTARROW = 37;
var KEYCODE_RIGHTARROW = 39;
var keycode = event.keyCode;
var key = String.fromCharCode(keycode).toLowerCase();
if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
this.end();
} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
if (this.currentImageIndex !== 0) {
this.changeImage(this.currentImageIndex - 1);
} else if (this.options.wrapAround && this.album.length > 1) {
this.changeImage(this.album.length - 1);
}
} else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
if (this.currentImageIndex !== this.album.length - 1) {
this.changeImage(this.currentImageIndex + 1);
} else if (this.options.wrapAround && this.album.length > 1) {
this.changeImage(0);
}
}
};
// Closing time. :-(
Lightbox.prototype.end = function() {
this.disableKeyboardNav();
$(window).off('resize', this.sizeOverlay);
this.$lightbox.fadeOut(this.options.fadeDuration);
this.$overlay.fadeOut(this.options.fadeDuration);
$('select, object, embed').css({
visibility: 'visible'
});
if (this.options.disableScrolling) {
$('html').removeClass('lb-disable-scrolling');
}
};
return new Lightbox();
}));

View File

@ -0,0 +1,18 @@
{
"dependencies": {
"mute": [
"jsdoc-to-markdown"
]
},
"critics": {
"lint": { "engine": "none" }
},
"ignore": [
"**/docs/**",
"packages/scripts/**",
"packages/test-utils/**"
],
"test": [
"**/tests/**"
]
}

View File

@ -0,0 +1,11 @@
engines:
duplication:
enabled: false
eslint:
enabled: false
channel: eslint-3
fixme:
enabled: true
ratings:
paths:
- "src/**/*.js"

View File

@ -0,0 +1,9 @@
[*]
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false

View File

@ -0,0 +1,36 @@
<!--
Thanks for your interest in contributing to Popper.js!
Please, make sure to fill all the sections of the template before submitting any issue.
Issues without the required informations will be closed.
Do not delete this template or it will be closed!
Want your issue to be fixed earlier? Create a PR that introduces a CI test that fails
because of the bug you found!
-->
### CodePen demo
<!--
Use this CodePen template to allow the contributors to easily reproduce your problem.
-->
https://codepen.io/pen?template=wGqJEz
### Steps to reproduce the problem
1.
2.
3.
### What is the expected behavior?
<!-- Describe what you would have expected. -->
### What went wrong?
<!-- Describe what went wrong. -->
### Any other comments?
<!-- Any additional information. -->

View File

@ -0,0 +1,17 @@
<!--
Thanks for your interest in contributing to Popper.js!
Please, make sure to fulfill the following conditions before submitting your Pull Request:
1. Make sure the tests are passing by running `yarn test` with Google Chrome installed.
2. Add any relevant tests to cover the code you have changed and/or added.
3. If you change the public API, try to update the Typescript definitions accordingly:
https://github.com/FezVrasta/popper.js/blob/master/packages/popper/index.d.ts
This is not required but will help a lot. Mention @giladgray for help as needed.
Problems signing the CLA? Try this link:
https://cla-assistant.io/FezVrasta/popper.js
-->

View File

@ -0,0 +1,24 @@
# https://git-scm.com/docs/gitignore
# https://help.github.com/articles/ignoring-files
# Example .gitignore files: https://github.com/github/gitignore
node_modules
.DS_Store
.tmp
.chrome
*.log
.jekyll-metadata
dist
.idea/
*.log
package-lock.json
coverage.info
# When you switch branches, things can get messy
_site
.sass-cache
# Exclude Nuget .nuspec because we generate it from package.json
# during the npm publish step, this to avoid duplication
#===============================================================
package.nuspec
*.nupkg

View File

@ -0,0 +1,19 @@
{
"tags": {
"allowUnknownTags": true
},
"plugins": ["plugins/markdown"],
"templates": {
"cleverLinks": false,
"monospaceLinks": false
},
"opts": {
"encoding": "utf8",
"destination": "./docs/",
"recurse": true,
"query": "value",
"private": true,
"lenient": true
}
}

View File

@ -0,0 +1,29 @@
language: node_js
node_js: 8.1.1
before_install:
- curl -o- -L https://yarnpkg.com/install.sh | bash
- export PATH="$HOME/.yarn/bin:$PATH"
script:
- bundlesize-init
- COVERAGE=true BROWSERS=SLChrome,SLInternetExplorer10,SLFirefox,SLInternetExplorer11 travis_retry yarn test
- BROWSERS=SLEdge,SLSafari travis_retry yarn test # coverage leads to problems with these browsers
- yarn build # make sure build works fine
after_success:
- bundlesize
- yarn global add codeclimate-test-reporter lcov-result-merger
- lcov-result-merger "packages/**/.tmp/coverage/report-lcov/lcov.info" > coverage.info
- codeclimate-test-reporter < coverage.info
addons:
sauce_connect:
username: "popperjs"
code_climate:
repo_token: 5d692bc0fbeb0e2141bba54efdb6aa8f941b10c7f8c4ac95de781e706cf44de1
jwt:
secure: "lRwBWS0UOdrcqmZupsMP7cCtrm1YOXxJMxu6qejzhLwasfvmtc6oSVUrEeaxBg2KTc8YM9l5faRPYSKcjy8fTfiCIT6SbB1/F/PFCim3KZc9QxEUNXuIkpPSLOxzNN+tYQdZJobkar8dLonqpn1jrsoLMz2wyFp5ze03hdhqa3/Itt6r3LAQMNaIdXzbgwZY7CIQ5BZWqopFWjRRzBCYXWev5Su695+AFEGt7G32d8m9z66383aZ0xFF6f9nsgu17LY+2Fw+0G7ts3MG+bcN7RtEhiWax5q4kM+8ud7Q9qs/bmdz8eQ3uXVKcOeddNat5S4QATiDB/fayo54rYWfPLNOkZkIS9JiWDN3Z0psJzROyaKgwmdBrDgOmEcaq8kcL8iWM9nRkNjrHdVyooob5J70oHHkB/Swz0vVowK4Q1hXxcFiwC8w43baOotMIFMcixHtFNsaEWg7J+CGIm852bVFPvFZCD+tw9UoP2BJcg/MpA/uvxvLL0U5wO5ZZjS9618U1Kn/DNCg+4NC6vTNT9htny9KBAKn70JNFZrKcfHWgv8cnyhhS9sJKjuyvYz1IF8eQ4CHX9klG1N1JGwFKAfSToySIcBs1ra1m+jG9c3zdJwLc+sfPKnfvF5t4kTLRpM3oENsFR2oIBsV0Tu2npb5wUVZ+YWIBVgLMj0xNaI="
cache:
yarn: true
directories:
- node_modules
branches:
only:
- master

View File

@ -0,0 +1,5 @@
# Changelog moved!
You can find the releases history with the relative changes visiting the dedicated GitHub page:
https://github.com/FezVrasta/popper.js/releases

View File

@ -0,0 +1,46 @@
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at federico.zivolo@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/

View File

@ -0,0 +1,95 @@
# Contributing to Popper.js
## Report bugs
If you find a bug, please, try to isolate the specific case and provide a fiddle on CodePen or JSFiddle to make it easy to reproduce the problem and help others finding a solution.
You can use [this CodePen](http://codepen.io/FezVrasta/pen/wGqJEz) which already includes Popper.js.
If your issue is not about a bug, please make sure to consider posting on StackOverflow instead.
Feature requests are welcome!
## Setup
Run `yarn` to install the needed dependencies.
Note that `npm` is not supported because this projects makes use of the Yarn workspaces.
## Developing
The repository is a monorepo managed by [Lerna](https://github.com/lerna/lerna), this makes it
possible to manage multiple projects on the same repository.
In our case, the main projects are `popper` and `tooltip`, which are the home of Popper.js and Tooltip.js
All our packages are stored in the `packages/` folder.
### Adopt an issue
All the issues, if not assigned to someone, can be adopted by anyone. Just make sure to comment on
the issue to let know other users about your intention to work on it.
Also, remember to comment again in case you end up abandoning the issue.
Each issue has a `DIFFICULTY: *` label to help you pick the one with the difficulty level adapt to you.
Additionally, check out the `PRIORITY: *` label to see which issues should take precedence over the others.
If possible, prefer issues with an higher priority, but if you want to adopt an issue with lower priority,
it's not a problem!
Issues with `NEEDS: CI test` need a PR that integrates a test in the test suite to reproduce the bug,
this is very useful because it allows other developers to try to fix the bug having a feedback.
### Style conventions
You don't have to worry about code style conventions, [prettier](https://github.com/prettier/prettier)
will automatically format your code once you commit your changes.
### Test
We strive to keep the code coverage as high as possible, but above all, we want to avoid
to introduce or reintroduce bugs in our code base.
For this reason, every time a code change is made, we must make sure that a test is covering
the code we just changed.
If we fix a bug, we add a test to avoid that this bug pops up again in the future.
To help us with this process, we have a karma + jasmine environment to test Popper.js and Tooltip.js
The tests are located in the `tests/` folder of the two projects. (e.g. `packages/popper/tests/`)
```bash
# You can run all the repositories tests running
yarn test
# or a single project's tests with
yarn test --scope=popper.js # or tooltip.js
```
If you want to run the tests in watch mode:
```bash
# You can run all the repositories tests running
yarn test:dev
# or a single project's tests with
yarn test:dev --scope=popper.js # or tooltip.js
```
Do you want to test your changes against all the supported browsers? Feel free to send a PR
and your changes will get automatically tested.
### Build
To create a new release run:
```bash
# to build both projects
yarn build
# or to build a single project
yarn build --scope=popper.js # or tooltip.js
```
You can also build and watch for changes to automatically refresh the build using the `--watch` option.

View File

@ -0,0 +1,25 @@
The MIT License (MIT)
=====================
Copyright © 2016 Federico Zivolo and contributors
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the “Software”), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

View File

@ -0,0 +1,88 @@
# Projects using Popper.js
Popper.js aims to be a foundation block to build powerful libraries on top of it.
In this page we try to collect a list of libraries built with it:
# Integration in frameworks and view libraries
You can easily use Popper.js inside your application written using one of the
most common frameworks or view libraries thank to the following projects.
> We are looking for awesome libraries to integrate Popper.js into other
frameworks and libraries.
> Have you written an integration library for your favourite framework? Let us know!
## React
### [react-popper](https://github.com/souporserious/react-popper)
React wrapper around Popper.js. (@FezVrasta approved! 👍)
### [ak-layer](https://www.npmjs.com/package/ak-layer)
React wrapper around Popper.js, maintained by [Atlassian](https://www.atlassian.com/).
## Angular
### [ngx-popper](https://github.com/MrFrankel/ngx-popper)
Angular wrapper for Popper.js
## AngularJS
### [angular-popper](https://www.npmjs.com/package/angular-popper)
This component is in alpha base, you can contribute to it!
## Vue.js
The Vue.js situation is particular, there are several UI frameworks that use
Popper.js internally, but only few "basic" components that let you use Popper.js with it.
### [vue-popper-component](https://github.com/antongorodezkiy/vue-popper-component)
Simple Vue.js component for Popper.js.
### [vue-popperjs](https://github.com/RobinCK/vue-popper)
VueJS 2.x popover component based [popper.js](https://popper.js.org/)
### [vue-directive-tooltip](https://www.npmjs.com/package/vue-directive-tooltip)
Vue.js tooltip directive (based on Popper.js)
### [v-tooltip](https://github.com/Akryum/v-tooltip)
Vue.js 2.x directive
## Ember.js
### [ember-popper](https://github.com/kybishop/ember-popper)
An Ember-centric wrapper around Popper.js.
## Preact and Inferno
### [react-popper](https://github.com/souporserious/react-popper)
It is developed for React but it works fine with both Preact and Inferno if
you alias `react` and `react-dom` to `preact-compat` or `inferno-compat`.
# Other projects
### [Tippy.js](https://atomiks.github.io/tippyjs/)
A lightweight, pure JavaScript tooltip library.
-----------
For an always updated list of projects using Popper.js, please visit:
- [npmjs.com depended list](https://www.npmjs.com/browse/depended/popper.js)
- [NPM-Graph list](https://npm-graph.com/NpmPackage/popper.js)
### Want to see your library or project in this page?
Fork this repository, edit this page and send a Pull Request!

View File

@ -0,0 +1,226 @@
<!-- IGNORE THE HTML BLOCK BELOW, THE INTERESTING PART IS AFTER IT -->
<h1 align="center">Popper.js</h1>
<p align="center">
<strong>A library used to position poppers in web applications.</strong>
</p>
<p align="center">
<img src="http://badge-size.now.sh/https://unpkg.com/popper.js/dist/popper.min.js?compression=brotli" alt="Stable Release Size"/>
<img src="http://badge-size.now.sh/https://unpkg.com/popper.js/dist/popper.min.js?compression=gzip" alt="Stable Release Size"/>
<a href="https://www.bithound.io/github/FezVrasta/popper.js"><img src="https://www.bithound.io/github/FezVrasta/popper.js/badges/score.svg" alt="bitHound Overall Score"></a>
<a href="https://codeclimate.com/github/FezVrasta/popper.js/coverage"><img src="https://codeclimate.com/github/FezVrasta/popper.js/badges/coverage.svg" alt="Istanbul Code Coverage"/></a>
<a href="https://spectrum.chat/popper-js" target="_blank"><img src="https://img.shields.io/badge/chat-on_spectrum-6833F9.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyBpZD0iTGl2ZWxsb18xIiBkYXRhLW5hbWU9IkxpdmVsbG8gMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAgOCI%2BPGRlZnM%2BPHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU%2BPC9kZWZzPjx0aXRsZT5zcGVjdHJ1bTwvdGl0bGU%2BPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNSwwQy40MiwwLDAsLjYzLDAsMy4zNGMwLDEuODQuMTksMi43MiwxLjc0LDMuMWgwVjcuNThhLjQ0LjQ0LDAsMCwwLC42OC4zNUw0LjM1LDYuNjlINWM0LjU4LDAsNS0uNjMsNS0zLjM1UzkuNTgsMCw1LDBaTTIuODMsNC4xOGEuNjMuNjMsMCwxLDEsLjY1LS42M0EuNjQuNjQsMCwwLDEsMi44Myw0LjE4Wk01LDQuMThhLjYzLjYzLDAsMSwxLC42NS0uNjNBLjY0LjY0LDAsMCwxLDUsNC4xOFptMi4xNywwYS42My42MywwLDEsMSwuNjUtLjYzQS42NC42NCwwLDAsMSw3LjE3LDQuMThaIi8%2BPC9zdmc%2B" alt="Get support or discuss"/></a>
<br />
<a href="https://travis-ci.org/FezVrasta/popper.js/branches" target="_blank"><img src="https://travis-ci.org/FezVrasta/popper.js.svg?branch=master" alt="Build Status"/></a>
<a href="https://saucelabs.com/u/popperjs" target="_blank"><img src="https://badges.herokuapp.com/browsers?labels=none&googlechrome=latest&firefox=latest&microsoftedge=latest&iexplore=11,10&safari=latest" alt="SauceLabs Reports"/></a>
</p>
<img src="https://raw.githubusercontent.com/FezVrasta/popper.js/master/popperjs.png" align="right" width=250 />
<!-- 🚨 HEY! HERE BEGINS THE INTERESTING STUFF 🚨 -->
## Wut? Poppers?
A popper is an element on the screen which "pops out" from the natural flow of your application.
Common examples of poppers are tooltips, popovers and drop-downs.
## So, yet another tooltip library?
Well, basically, **no**.
Popper.js is a **positioning engine**, its purpose is to calculate the position of an element
to make it possible to position it near a given reference element.
The engine is completely modular and most of its features are implemented as **modifiers**
(similar to middlewares or plugins).
The whole code base is written in ES2015 and its features are automatically tested on real browsers thanks to [SauceLabs](https://saucelabs.com/) and [TravisCI](https://travis-ci.org/).
Popper.js has zero dependencies. No jQuery, no LoDash, nothing.
It's used by big companies like [Twitter in Bootstrap v4](https://getbootstrap.com/), [Microsoft in WebClipper](https://github.com/OneNoteDev/WebClipper) and [Atlassian in AtlasKit](https://aui-cdn.atlassian.com/atlaskit/registry/).
### Popper.js
This is the engine, the library that computes and, optionally, applies the styles to
the poppers.
Some of the key points are:
- Position elements keeping them in their original DOM context (doesn't mess with your DOM!);
- Allows to export the computed informations to integrate with React and other view libraries;
- Supports Shadow DOM elements;
- Completely customizable thanks to the modifiers based structure;
Visit our [project page](https://fezvrasta.github.io/popper.js) to see a lot of examples of what you can do with Popper.js!
Find [the documentation here](docs/_includes/popper-documentation.md).
### Tooltip.js
Since lots of users just need a simple way to integrate powerful tooltips in their projects,
we created **Tooltip.js**.
It's a small library that makes it easy to automatically create tooltips using as engine Popper.js.
Its API is almost identical to the famous tooltip system of Bootstrap, in this way it will be
easy to integrate it in your projects.
The tooltips generated by Tooltip.js are accessible thanks to the `aria` tags.
Find [the documentation here](docs/_includes/tooltip-documentation.md).
<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/b4EfpdBkBvHcfDMUuTZi8c8e/FezVrasta/popper.js'>
<img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/b4EfpdBkBvHcfDMUuTZi8c8e/FezVrasta/popper.js.svg' />
</a>
## Installation
Popper.js is available on the following package managers and CDNs:
| Source | |
|:-------|:---------------------------------------------------------------------------------|
| npm | `npm install popper.js --save` |
| yarn | `yarn add popper.js` |
| NuGet | `PM> Install-Package popper.js` |
| Bower | `bower install popper.js --save` |
| unpkg | [`https://unpkg.com/popper.js`](https://unpkg.com/popper.js) |
| cdnjs | [`https://cdnjs.com/libraries/popper.js`](https://cdnjs.com/libraries/popper.js) |
Tooltip.js as well:
| Source | |
|:-------|:---------------------------------------------------------------------------------|
| npm | `npm install tooltip.js --save` |
| yarn | `yarn add tooltip.js` |
| Bower* | `bower install tooltip.js=https://unpkg.com/tooltip.js --save` |
| unpkg | [`https://unpkg.com/tooltip.js`](https://unpkg.com/tooltip.js) |
| cdnjs | [`https://cdnjs.com/libraries/popper.js`](https://cdnjs.com/libraries/popper.js) |
\*: Bower isn't officially supported, it can be used to install Tooltip.js only trough the unpkg.com CDN. This method has the limitation of not being able to define a specific version of the library. Bower and Popper.js suggests to use npm or Yarn for your projects.
For more info, [read the related issue](https://github.com/FezVrasta/popper.js/issues/390).
### Dist targets
Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext.
No idea what am I talking about? You are looking for UMD probably.
- UMD - Universal Module Definition: AMD, RequireJS and globals;
- ESM - ES Modules: For webpack/Rollup or browser supporting the spec;
- ESNext: Available in `dist/`, can be used with webpack and `babel-preset-env`;
Make sure to use the right one for your needs. If you want to import it with a `<script>` tag, use UMD.
## Usage
Given an existing popper DOM node, ask Popper.js to position it near its button
```js
var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var anotherPopper = new Popper(
reference,
popper,
{
// popper options here
}
);
```
### Callbacks
Popper.js supports two kinds of callbacks, the `onCreate` callback is called after
the popper has been initalized. The `onUpdate` one is called on any subsequent update.
```js
const reference = document.querySelector('.my-button');
const popper = document.querySelector('.my-popper');
new Popper(reference, popper, {
onCreate: (data) => {
// data is an object containing all the informations computed
// by Popper.js and used to style the popper and its arrow
// The complete description is available in Popper.js documentation
},
onUpdate: (data) => {
// same as `onCreate` but called on subsequent updates
}
});
```
### Writing your own modifiers
Popper.js is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers".
A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks.
To learn how to create a modifier, [read the modifiers documentation](docs/_includes/popper-documentation.md#modifiers--object)
### React, Vue.js, Angular, AngularJS, Ember.js (etc...) integration
Integrating 3rd party libraries in React or other libraries can be a pain because
they usually alter the DOM and drive the libraries crazy.
Popper.js limits all its DOM modifications inside the `applyStyle` modifier,
you can simply disable it and manually apply the popper coordinates using
your library of choice.
For a comprehensive list of libraries that let you use Popper.js into existing
frameworks, visit the [MENTIONS](MENTIONS.md) page.
Alternatively, you may even override your own `applyStyles` with your custom one and
integrate Popper.js by yourself!
```js
function applyReactStyle(data) {
// export data in your framework and use its content to apply the style to your popper
};
const reference = document.querySelector('.my-button');
const popper = document.querySelector('.my-popper');
new Popper(reference, popper, {
modifiers: {
applyStyle: { enabled: false },
applyReactStyle: {
enabled: true,
fn: applyReactStyle,
order: 900,
},
},
});
```
### Migration from Popper.js v0
Since the API changed, we prepared some migration instructions to make it easy to upgrade to
Popper.js v1.
https://github.com/FezVrasta/popper.js/issues/62
Feel free to comment inside the issue if you have any questions.
### Performances
Popper.js is very performant. It usually takes 0.5ms to compute a popper's position (on an iMac with 3.5G GHz Intel Core i5).
This means that it will not cause any [jank](https://www.chromium.org/developers/how-tos/trace-event-profiling-tool/anatomy-of-jank), leading to a smooth user experience.
## Notes
### Libraries using Popper.js
The aim of Popper.js is to provide a stable and powerful positioning engine ready to
be used in 3rd party libraries.
Visit the [MENTIONS](MENTIONS.md) page for an updated list of projects.
### Credits
I want to thank some friends and projects for the work they did:
- [@AndreaScn](https://github.com/AndreaScn) for his work on the GitHub Page and the manual testing he did during the development;
- [@vampolo](https://github.com/vampolo) for the original idea and for the name of the library;
- [Sysdig](https://github.com/Draios) for all the awesome things I learned during these years that made it possible for me to write this library;
- [Tether.js](http://github.hubspot.com/tether/) for having inspired me in writing a positioning library ready for the real world;
- [The Contributors](https://github.com/FezVrasta/popper.js/graphs/contributors) for their much appreciated Pull Requests and bug reports;
- **you** for the star you'll give to this project and for being so awesome to give this project a try 🙂
### Copyright and license
Code and documentation copyright 2016 **Federico Zivolo**. Code released under the [MIT license](LICENSE.md). Docs released under Creative Commons.

View File

@ -0,0 +1 @@
popper.js.org

View File

@ -0,0 +1,63 @@
Creative Commons Attribution 3.0 Unported
http://creativecommons.org/licenses/by/3.0/
License
THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED.
BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND CONDITIONS.
1. Definitions
1. "Adaptation" means a work based upon the Work, or upon the Work and other pre-existing works, such as a translation, adaptation, derivative work, arrangement of music or other alterations of a literary or artistic work, or phonogram or performance and includes cinematographic adaptations or any other form in which the Work may be recast, transformed, or adapted including in any form recognizably derived from the original, except that a work that constitutes a Collection will not be considered an Adaptation for the purpose of this License. For the avoidance of doubt, where the Work is a musical work, performance or phonogram, the synchronization of the Work in timed-relation with a moving image ("synching") will be considered an Adaptation for the purpose of this License.
2. "Collection" means a collection of literary or artistic works, such as encyclopedias and anthologies, or performances, phonograms or broadcasts, or other works or subject matter other than works listed in Section 1(f) below, which, by reason of the selection and arrangement of their contents, constitute intellectual creations, in which the Work is included in its entirety in unmodified form along with one or more other contributions, each constituting separate and independent works in themselves, which together are assembled into a collective whole. A work that constitutes a Collection will not be considered an Adaptation (as defined above) for the purposes of this License.
3. "Distribute" means to make available to the public the original and copies of the Work or Adaptation, as appropriate, through sale or other transfer of ownership.
4. "Licensor" means the individual, individuals, entity or entities that offer(s) the Work under the terms of this License.
5. "Original Author" means, in the case of a literary or artistic work, the individual, individuals, entity or entities who created the Work or if no individual or entity can be identified, the publisher; and in addition (i) in the case of a performance the actors, singers, musicians, dancers, and other persons who act, sing, deliver, declaim, play in, interpret or otherwise perform literary or artistic works or expressions of folklore; (ii) in the case of a phonogram the producer being the person or legal entity who first fixes the sounds of a performance or other sounds; and, (iii) in the case of broadcasts, the organization that transmits the broadcast.
6. "Work" means the literary and/or artistic work offered under the terms of this License including without limitation any production in the literary, scientific and artistic domain, whatever may be the mode or form of its expression including digital form, such as a book, pamphlet and other writing; a lecture, address, sermon or other work of the same nature; a dramatic or dramatico-musical work; a choreographic work or entertainment in dumb show; a musical composition with or without words; a cinematographic work to which are assimilated works expressed by a process analogous to cinematography; a work of drawing, painting, architecture, sculpture, engraving or lithography; a photographic work to which are assimilated works expressed by a process analogous to photography; a work of applied art; an illustration, map, plan, sketch or three-dimensional work relative to geography, topography, architecture or science; a performance; a broadcast; a phonogram; a compilation of data to the extent it is protected as a copyrightable work; or a work performed by a variety or circus performer to the extent it is not otherwise considered a literary or artistic work.
7. "You" means an individual or entity exercising rights under this License who has not previously violated the terms of this License with respect to the Work, or who has received express permission from the Licensor to exercise rights under this License despite a previous violation.
8. "Publicly Perform" means to perform public recitations of the Work and to communicate to the public those public recitations, by any means or process, including by wire or wireless means or public digital performances; to make available to the public Works in such a way that members of the public may access these Works from a place and at a place individually chosen by them; to perform the Work to the public by any means or process and the communication to the public of the performances of the Work, including by public digital performance; to broadcast and rebroadcast the Work by any means including signs, sounds or images.
9. "Reproduce" means to make copies of the Work by any means including without limitation by sound or visual recordings and the right of fixation and reproducing fixations of the Work, including storage of a protected performance or phonogram in digital form or other electronic medium.
2. Fair Dealing Rights. Nothing in this License is intended to reduce, limit, or restrict any uses free from copyright or rights arising from limitations or exceptions that are provided for in connection with the copyright protection under copyright law or other applicable laws.
3. License Grant. Subject to the terms and conditions of this License, Licensor hereby grants You a worldwide, royalty-free, non-exclusive, perpetual (for the duration of the applicable copyright) license to exercise the rights in the Work as stated below:
1. to Reproduce the Work, to incorporate the Work into one or more Collections, and to Reproduce the Work as incorporated in the Collections;
2. to create and Reproduce Adaptations provided that any such Adaptation, including any translation in any medium, takes reasonable steps to clearly label, demarcate or otherwise identify that changes were made to the original Work. For example, a translation could be marked "The original work was translated from English to Spanish," or a modification could indicate "The original work has been modified.";
3. to Distribute and Publicly Perform the Work including as incorporated in Collections; and,
4. to Distribute and Publicly Perform Adaptations.
5.
For the avoidance of doubt:
1. Non-waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing scheme cannot be waived, the Licensor reserves the exclusive right to collect such royalties for any exercise by You of the rights granted under this License;
2. Waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing scheme can be waived, the Licensor waives the exclusive right to collect such royalties for any exercise by You of the rights granted under this License; and,
3. Voluntary License Schemes. The Licensor waives the right to collect royalties, whether individually or, in the event that the Licensor is a member of a collecting society that administers voluntary licensing schemes, via that society, from any exercise by You of the rights granted under this License.
The above rights may be exercised in all media and formats whether now known or hereafter devised. The above rights include the right to make such modifications as are technically necessary to exercise the rights in other media and formats. Subject to Section 8(f), all rights not expressly granted by Licensor are hereby reserved.
4. Restrictions. The license granted in Section 3 above is expressly made subject to and limited by the following restrictions:
1. You may Distribute or Publicly Perform the Work only under the terms of this License. You must include a copy of, or the Uniform Resource Identifier (URI) for, this License with every copy of the Work You Distribute or Publicly Perform. You may not offer or impose any terms on the Work that restrict the terms of this License or the ability of the recipient of the Work to exercise the rights granted to that recipient under the terms of the License. You may not sublicense the Work. You must keep intact all notices that refer to this License and to the disclaimer of warranties with every copy of the Work You Distribute or Publicly Perform. When You Distribute or Publicly Perform the Work, You may not impose any effective technological measures on the Work that restrict the ability of a recipient of the Work from You to exercise the rights granted to that recipient under the terms of the License. This Section 4(a) applies to the Work as incorporated in a Collection, but this does not require the Collection apart from the Work itself to be made subject to the terms of this License. If You create a Collection, upon notice from any Licensor You must, to the extent practicable, remove from the Collection any credit as required by Section 4(b), as requested. If You create an Adaptation, upon notice from any Licensor You must, to the extent practicable, remove from the Adaptation any credit as required by Section 4(b), as requested.
2. If You Distribute, or Publicly Perform the Work or any Adaptations or Collections, You must, unless a request has been made pursuant to Section 4(a), keep intact all copyright notices for the Work and provide, reasonable to the medium or means You are utilizing: (i) the name of the Original Author (or pseudonym, if applicable) if supplied, and/or if the Original Author and/or Licensor designate another party or parties (e.g., a sponsor institute, publishing entity, journal) for attribution ("Attribution Parties") in Licensor's copyright notice, terms of service or by other reasonable means, the name of such party or parties; (ii) the title of the Work if supplied; (iii) to the extent reasonably practicable, the URI, if any, that Licensor specifies to be associated with the Work, unless such URI does not refer to the copyright notice or licensing information for the Work; and (iv) , consistent with Section 3(b), in the case of an Adaptation, a credit identifying the use of the Work in the Adaptation (e.g., "French translation of the Work by Original Author," or "Screenplay based on original Work by Original Author"). The credit required by this Section 4 (b) may be implemented in any reasonable manner; provided, however, that in the case of a Adaptation or Collection, at a minimum such credit will appear, if a credit for all contributing authors of the Adaptation or Collection appears, then as part of these credits and in a manner at least as prominent as the credits for the other contributing authors. For the avoidance of doubt, You may only use the credit required by this Section for the purpose of attribution in the manner set out above and, by exercising Your rights under this License, You may not implicitly or explicitly assert or imply any connection with, sponsorship or endorsement by the Original Author, Licensor and/or Attribution Parties, as appropriate, of You or Your use of the Work, without the separate, express prior written permission of the Original Author, Licensor and/or Attribution Parties.
3. Except as otherwise agreed in writing by the Licensor or as may be otherwise permitted by applicable law, if You Reproduce, Distribute or Publicly Perform the Work either by itself or as part of any Adaptations or Collections, You must not distort, mutilate, modify or take other derogatory action in relation to the Work which would be prejudicial to the Original Author's honor or reputation. Licensor agrees that in those jurisdictions (e.g. Japan), in which any exercise of the right granted in Section 3(b) of this License (the right to make Adaptations) would be deemed to be a distortion, mutilation, modification or other derogatory action prejudicial to the Original Author's honor and reputation, the Licensor will waive or not assert, as appropriate, this Section, to the fullest extent permitted by the applicable national law, to enable You to reasonably exercise Your right under Section 3(b) of this License (right to make Adaptations) but not otherwise.
5. Representations, Warranties and Disclaimer
UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY, FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS, WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.
6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
7. Termination
1. This License and the rights granted hereunder will terminate automatically upon any breach by You of the terms of this License. Individuals or entities who have received Adaptations or Collections from You under this License, however, will not have their licenses terminated provided such individuals or entities remain in full compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will survive any termination of this License.
2. Subject to the above terms and conditions, the license granted here is perpetual (for the duration of the applicable copyright in the Work). Notwithstanding the above, Licensor reserves the right to release the Work under different license terms or to stop distributing the Work at any time; provided, however that any such election will not serve to withdraw this License (or any other license that has been, or is required to be, granted under the terms of this License), and this License will continue in full force and effect unless terminated as stated above.
8. Miscellaneous
1. Each time You Distribute or Publicly Perform the Work or a Collection, the Licensor offers to the recipient a license to the Work on the same terms and conditions as the license granted to You under this License.
2. Each time You Distribute or Publicly Perform an Adaptation, Licensor offers to the recipient a license to the original Work on the same terms and conditions as the license granted to You under this License.
3. If any provision of this License is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this License, and without further action by the parties to this agreement, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable.
4. No term or provision of this License shall be deemed waived and no breach consented to unless such waiver or consent shall be in writing and signed by the party to be charged with such waiver or consent.
5. This License constitutes the entire agreement between the parties with respect to the Work licensed here. There are no understandings, agreements or representations with respect to the Work not specified here. Licensor shall not be bound by any additional provisions that may appear in any communication from You. This License may not be modified without the mutual written agreement of the Licensor and You.
6. The rights granted under, and the subject matter referenced, in this License were drafted utilizing the terminology of the Berne Convention for the Protection of Literary and Artistic Works (as amended on September 28, 1979), the Rome Convention of 1961, the WIPO Copyright Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996 and the Universal Copyright Convention (as revised on July 24, 1971). These rights and subject matter take effect in the relevant jurisdiction in which the License terms are sought to be enforced according to the corresponding provisions of the implementation of those treaty provisions in the applicable national law. If the standard suite of rights granted under applicable copyright law includes additional rights not granted under this License, such additional rights are deemed to be included in the License; this License is not intended to restrict the license of any rights under applicable law.

View File

@ -0,0 +1,52 @@
Spectral by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
A big, modern, blocky affair with a mobile-style menu, fully responsive styling,
and an assortment of pre-styled elements. So, pretty much what you were expecting
-- except, of course, for how it's put together, specifically:
- It's built on Skel 3*, a leaner, more modular rewrite of my responsive framework.
(* = still in development as of this writing)
- It uses flexbox*, which eliminates all kinds of terrible hacks and clunky layout
stopgaps (like CSS grid systems).
(* = not supported on IE8/9, but non-flexbox fallbacks are included)
- It uses Sass* a lot more intelligently, thanks in part to several new mixins
and functions I've been working on (as well as a few by @HugoGiraudel).
(* = still entirely optional if you prefer vanilla CSS :)
- A ton of other stuff.
In short, Spectral's the culmination of several new things I'm working on/trying out,
so please, let me know what you think :)
Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
you can use for pretty much whatever.
(* = not included)
AJ
n33.co @n33co dribbble.com/n33
Credits:
Demo Images:
Unsplash (unsplash.com)
Icons:
Font Awesome (fortawesome.github.com/Font-Awesome)
Other:
jQuery (jquery.com)
html5shiv.js (@afarkas @jdalton @jon_neal @rem)
background-size polyfill (github.com/louisremi)
Misc. Sass functions (@HugoGiraudel)
Respond.js (j.mp/respondjs)
Skel (skel.io)

View File

@ -0,0 +1,62 @@
# Welcome to Jekyll!
#
# Site settings
title: Popper.js
encoding: utf-8
description: A kickass library<br> used to manage poppers in web applications<br><a href="https://medium.com/@FezVrasta/popper-js-v1-5e8b3acd888c" target="_blank">Now much more powerful!</a>
owner: Federico Zivolo & contributors # or company name
first_published: 2016 # if migrating another site, the year of your first publish
email: federico.zivolo@gmail.com
baseurl: "" # the subpath of your site, e.g. /blog
url: "https://popper.js.org" # the base hostname & protocol for your site
github: https://github.com/FezVrasta/popper.js
social:
twitter: https://twitter.com/FezVr4sta
github: https://github.com/FezVrasta
medium: https://medium.com/@FezVrasta
linkedin-square: https://linkedin.com/in/FezVrasta
#email: /contact/
#flickr:
#instagram:
#youtube-square:
#spotify:
#stack-overflow:
#vimeo:
#reddit:
#stubleupon:
#delicious:
#pied-piper:
#digg:
#soundcloud:
#deviantart:
#angellist:
#tumblr-square:
#stackexchange:
#weibo:
#trello:
#foursquare:
#linux:
#bitbucket-square:
#vk:
#slack:
#vine:
#weixin:
#yelp:
#skyatlas:
#leanpub:
#connectdevelop:
#ils:
#forumbee:
#tripadvisor:
#amazon:
# Build settings
markdown: kramdown
#sass:
# style: compressed
kramdown:
parse_block_html: true
parse_span_html: true
html_to_native: true

View File

@ -0,0 +1,13 @@
<h2 id="example10" tabindex="0">Popper on your side!</h2>
<p id="example10Title">
What are you waiting for? Select a popper from that dropdown.<br />
Placing poppers around elements is just that easy!
</p>
<div id="example10code">
{% highlight javascript %}
var popper = new Popper(referenceElement, onPopper, {
placement: 'position'
});
{% endhighlight %}
</div>

View File

@ -0,0 +1,78 @@
<div class="rel" id="example10reference1">
<p class="bold">Hey!</p>
<p class="thin">Choose where to put your popper!</p>
<select id="example10positionSelector">
<option value="top">Top</option>
<option value="right">Right</option>
<option value="bottom">Bottom</option>
<option value="left">Left</option>
</select>
</div>
<div class="popper" width="200" id="example10popper1">
<p class="bold">Popper on <b id="example10currentPosition" class="currentPosition"></b></p>
<div class="popper__arrow" x-arrow></div>
</div>
<style>
#example10positionSelector {
margin-top: 1em;
}
@media (max-width: 460px) {
#example10popper1 {
max-width: 100px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
var index = 0;
var popper;
var code = $('#example10code').html();
$('#example10positionSelector').on('change', attachPopper).trigger('change');
// Stop autoflip popper when the user click on the dropdown
$('#example10positionSelector').on('click', function() {
clearInterval(autoPopperFunctionTimer);
});
var autoPopperFunctionTimer = setInterval(function() {
if (index === 0) {
$('#example10positionSelector').val('top');
$('#example10positionSelector').trigger('change');
index++;
} else if (index === 1) {
$('#example10positionSelector').val('right');
$('#example10positionSelector').trigger('change');
index++;
} else if (index === 2) {
$('#example10positionSelector').val('bottom');
$('#example10positionSelector').trigger('change');
index++;
} else {
$('#example10positionSelector').val('left');
$('#example10positionSelector').trigger('change');
index = 0;
}
}, 4000);
function attachPopper(evt) {
position = evt.target.value;
//Position of the popper
$('#example10code').html(code.replace('position', position));
$('.currentPosition').text(position);
popper && popper.destroy();
popper = new Popper(example10reference1, example10popper1, {
placement: position,
boundariesElement: example10reference1.parentNode
});
}
});
</script>

View File

@ -0,0 +1,13 @@
<h2 id="example10" tabindex="0"></h2>
<p id="example10Title">
The available placements are the same you are used to with Popper.js:
</p>
<div id="example10code">
{% highlight javascript %}
new Tooltip(referenceElement, {
placement: 'top', // or bottom, left, right, and variations
title: "Top"
});
{% endhighlight %}
</div>

View File

@ -0,0 +1,30 @@
<div class="rel" id="example10treference1">
<p class="bold">It just works</p>
<p class="thin">Hover me to see 4 tooltips!</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
var index = 0;
var popper;
new Tooltip(document.getElementById("example10treference1"), {
placement: "top",
title: "Top",
});
new Tooltip(document.getElementById("example10treference1"), {
placement: "right",
title: "Right",
});
new Tooltip(document.getElementById("example10treference1"), {
placement: "bottom",
title: "Bottom",
});
new Tooltip(document.getElementById("example10treference1"), {
placement: "left",
title: "Left",
});
});
</script>

View File

@ -0,0 +1,18 @@
<h2 id="example3" tabindex="0">Custom flip behavior</h2>
<p>
Try dragging the reference element on the left side, its popper will move on its bottom edge.
Then, try to move the reference element on the bottom left corner, it will move on its top edge.
</p>
{% highlight javascript %}
var popper = new Popper(referenceElement, onLeftPopper, {
placement: 'left',
modifiers: {
flip: {
behavior: ['left', 'bottom', 'top']
},
preventOverflow: {
boundariesElement: container,
},
},
});
{% endhighlight %}

View File

@ -0,0 +1,54 @@
<div class="rel" id="example3reference1">
<p class="bold">Drag me</p>
<p class="thin">on the edges</p>
</div>
<div class="popper" id="example3popper1">
<p class="bold">Flipping popper</p>
<p class="thin">which never flips to right</p>
<div class="popper__arrow" x-arrow></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
var example3popper1inst = new Popper(example3reference1, example3popper1, {
placement: 'left',
modifiers: {
flip: {
behavior: ['left', 'bottom', 'top'],
},
preventOverflow: {
boundariesElement: example3reference1.parentNode,
},
}
});
interact('#example3reference1').draggable({
restrict: {
restriction: "parent",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
onmove: dragMoveListener
});
var x = 0, y = 0;
function dragMoveListener (event) {
target = event.target,
// keep the dragged position in the data-x/data-y attributes
x += event.dx,
y += event.dy;
// translate the element
target.style.top = y + 'px';
target.style.left = x + 'px'
example3popper1inst.update();
}
}, false);
</script>
<style>
#example3reference1:hover {
background: rgba(255,255,255,0.2);
}
</style>

View File

@ -0,0 +1,14 @@
<h2 id="example20" tabindex="0"></h2>
<p id="example20Title">
You can show, hide or toggle a tooltip programmatically:
</p>
<div id="example10code">
{% highlight javascript %}
const instance = new Tooltip(referenceElement, {
title: "Hey there",
trigger: "click",
});
instance.show();
{% endhighlight %}
</div>

View File

@ -0,0 +1,18 @@
<div class="rel" id="example20treference1" style="width: 40%">
<p class="bold">Manually triggered</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
var index = 0;
var popper;
var instance = new Tooltip(document.getElementById("example20treference1"), {
title: "Hey there",
trigger: "click",
});
instance.show();
});
</script>

View File

@ -0,0 +1,10 @@
<h2 id="example2" tabindex="0">Popper on scrolling container</h2>
<p>
In this example we have a relative div which contains a div with <code>overflow: scroll</code>.<br>
Inside it, there are our popper and reference elements.
</p>
{% highlight javascript %}
var popper = new Popper(referenceElement, onLeftPopper, {
placement: 'left',
});
{% endhighlight %}

View File

@ -0,0 +1,44 @@
<div class="example2__fake-body nano">
<div class="nano-content">
<div class="example2__scrol-box">
<div class="rel" id="example2reference1">
<p class="bold">Scroll me</p>
<p class="thin">up and down</p>
</div>
<div class="popper" id="example2popper1">
<p class="bold">I follow it</p>
<p class="thin">staying between boundaries</p>
<div class="popper__arrow" x-arrow></div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
var fakeBody = document.querySelector('.example2__fake-body');
$('.nano').nanoScroller({ scrollTop: fakeBody.clientHeight / 2 });
setTimeout(function() {
var pop1 = new Popper(example2reference1, example2popper1, {
placement: 'left',
});
}, 1000);
}, false);
</script>
<style>
.example2__fake-body {
overflow-x: scroll;
height: 450px;
flex: 1;
}
.example2__scrol-box {
height: 200%;
display: flex;
align-content: center;
align-items: center;
}
</style>

Some files were not shown because too many files have changed in this diff Show More