« Module:NavCard » : différence entre les versions

(2 versions intermédiaires par le même utilisateur non affichées)

Ligne 4 :

local args = frame:getParent().args

~~-- Récupération des paramètres~~

local titre = args['titre'] or 'Titre'

local titre = args['titre'~~] or args[1~~] or 'Titre'

local description = args['description'] or 'Description'

local description = args['description'~~] or args[2~~] or 'Description'

local lien = args['lien'] or titre

local lien = args['lien'~~] or args[3~~] or titre

local image = args['image'] or ''

local image = args['image'~~] or args[4~~] or ''

local couleur = args['couleur'] or '#3b82f6'

-- ~~Création du lien~~ cliquable

-- Lien cliquable avec div dedans

~~local lienUrl = mw.uri.encode(lien, 'WIKI')~~

~~-- Construction de l'HTML~~ avec ~~un vrai lien~~

local html = mw.html.create('a')

:attr('href', mw.~~title~~.~~new~~(lien~~):fullUrl(~~))

:attr('href', mw.uri.encode(lien, 'WIKI'))

:addClass('~~wiki-~~nav-card-link')

:addClass('nav-card-link')

:css({

:css('text-decoration', 'none')

~~['display'] = 'block',~~

:css('display', 'inline-block')

['text-decoration'~~] =~~ 'none',

['~~color~~'~~] =~~ '~~inherit~~'

})

local card = html:tag('div')

:addClass('~~wiki-~~nav-card')

:addClass('nav-card')

:css({

:css('background', couleur)

['background'~~] = 'linear-gradient(135deg~~, ~~' ..~~ couleur ~~.. ' 0%, rgba(59, 130, 246, 0.8~~) ~~100%)',~~

:css('width', '280px')

['~~border-radius~~'~~] =~~ '~~16px~~',

:css('height', '160px')

['~~padding'] = '24px~~',

:css('border-radius', '12px')

['~~margin~~'~~] = '8px',~~

:css('position', 'relative')

['~~max~~-~~width'] = '320px~~',

:css('overflow', 'hidden')

['~~min-height~~'~~] = '200px',~~

:css('margin', '10px')

['position'~~] =~~ 'relative',

['overflow'~~] =~~ 'hidden',

-- Image de fond si présente

~~['box-shadow'] = '0 4px 12px rgba~~(~~0, 0, 0, 0.2)~~',

if image ~= '' then

~~['transition'] = 'all 0.3s ease',~~

~~['cursor'] = 'pointer~~',

['~~color~~'~~] = 'white'~~

})

-- Image ~~en haut~~

if ~~image and~~ image ~= '' then

~~local imageHtml = '[[File:' .. image .. '|80px|link=]]'~~

~~card:tag('div')~~

~~:css({~~

~~['text-align'] = 'center',~~

~~['margin-bottom'] = '16px'~~

})

~~:wikitext(imageHtml)~~

~~else~~

card:tag('div')

:css({

:addClass('nav-card-bg')

['~~text~~-~~align~~'~~] =~~ '~~center~~',

:css('background-image', 'url(/images/' .. image .. ')')

['~~font~~-size'~~] =~~ '~~48px~~',

:css('background-size', 'cover')

['~~margin-bottom~~'~~] =~~ '~~16px~~',

:css('position', 'absolute')

['~~opacity~~'~~] =~~ '~~0.7~~'

:css('top', '0')

})

:css('left', '0')

:~~wikitext~~('📄')

:css('width', '100%')

:css('height', '100%')

:css('opacity', '0.3')

end

-- ~~Titre~~

-- Contenu texte

card:tag('h3')

local content = card:tag('div')

:css({

:addClass('nav-card-content')

['~~margin~~'~~] =~~ '0 0 ~~12px~~ 0',

:css('position', 'absolute')

['~~color~~'~~] =~~ '~~white~~',

:css('bottom', '0')

['~~font-size~~'~~] =~~ '1.~~4rem~~',

:css('left', '0')

['~~font-weight~~'~~] =~~ '~~bold~~',

:css('right', '0')

['~~text-align~~'~~] =~~ '~~center~~'

:css('padding', '20px')

})

:css('background', 'linear-gradient(transparent, rgba(0,0,0,0.7))')

content:tag('h3')

:css('color', 'white')

:css('margin', '0 0 8px 0')

:wikitext(titre)

~~-- Description~~

content:tag('p')

~~card~~:tag('p')

:css('color', 'rgba(255,255,255,0.9)')

:css({

:css('margin', '0')

['~~margin'] = '0~~',

~~['color'] =~~ 'rgba(255, 255, 255, 0.9)',

['~~font-size~~'~~] =~~ '0~~.9rem',~~

['~~line-height'] = '1.4',~~

~~['text-align'] = 'center'~~

})

:wikitext(description)

@@ Ligne 4 : / Ligne 4 : @@
      local args = frame:getParent().args
-    -- Récupération des paramètres
+     local titre = args['titre'] or 'Titre'
-     local titre = args['titre'] or args[1] or 'Titre'
+     local description = args['description'] or 'Description'
-     local description = args['description'] or args[2] or 'Description'
+     local lien = args['lien'] or titre
-     local lien = args['lien'] or args[3] or titre
+     local image = args['image'] or ''
-     local image = args['image'] or args[4] or ''
      local couleur = args['couleur'] or '#3b82f6'
-     -- Création du lien cliquable
+     -- Lien cliquable avec div dedans
-    local lienUrl = mw.uri.encode(lien, 'WIKI')
-    -- Construction de l'HTML avec un vrai lien
      local html = mw.html.create('a')
-         :attr('href', mw.title.new(lien):fullUrl())
+         :attr('href', mw.uri.encode(lien, 'WIKI'))
-         :addClass('wiki-nav-card-link')
+         :addClass('nav-card-link')
-         :css({
+         :css('text-decoration', 'none')
-            ['display'] = 'block',
+        :css('display', 'inline-block')
-            ['text-decoration'] = 'none',
-            ['color'] = 'inherit'
-         })
      local card = html:tag('div')
-         :addClass('wiki-nav-card')
+         :addClass('nav-card')
-         :css({
+         :css('background', couleur)
-            ['background'] = 'linear-gradient(135deg, ' .. couleur .. ' 0%, rgba(59, 130, 246, 0.8) 100%)',
+        :css('width', '280px')
-            ['border-radius'] = '16px',
+        :css('height', '160px')
-            ['padding'] = '24px',
+        :css('border-radius', '12px')
-            ['margin'] = '8px',
+        :css('position', 'relative')
-            ['max-width'] = '320px',
+        :css('overflow', 'hidden')
-            ['min-height'] = '200px',
+        :css('margin', '10px')
-            ['position'] = 'relative',
-            ['overflow'] = 'hidden',
+     -- Image de fond si présente
-            ['box-shadow'] = '0 4px 12px rgba(0, 0, 0, 0.2)',
+     if image ~= '' then
-            ['transition'] = 'all 0.3s ease',
-            ['cursor'] = 'pointer',
-            ['color'] = 'white'
-        })
-     -- Image en haut
-     if image and image ~= '' then
-        local imageHtml = '[[File:' .. image .. '|80px|link=]]'
-        card:tag('div')
-            :css({
-                ['text-align'] = 'center',
-                ['margin-bottom'] = '16px'
-            })
-            :wikitext(imageHtml)
-    else
          card:tag('div')
-             :css({
+            :addClass('nav-card-bg')
-                ['text-align'] = 'center',
+             :css('background-image', 'url(/images/' .. image .. ')')
-                ['font-size'] = '48px',
+            :css('background-size', 'cover')
-                ['margin-bottom'] = '16px',
+            :css('position', 'absolute')
-                ['opacity'] = '0.7'
+            :css('top', '0')
-             })
+            :css('left', '0')
-             :wikitext('📄')
+            :css('width', '100%')
+             :css('height', '100%')
+             :css('opacity', '0.3')
      end
-     -- Titre
+     -- Contenu texte
-     card:tag('h3')
+     local content = card:tag('div')
-         :css({
+        :addClass('nav-card-content')
-            ['margin'] = '0 0 12px 0',
+         :css('position', 'absolute')
-            ['color'] = 'white',
+        :css('bottom', '0')
-            ['font-size'] = '1.4rem',
+        :css('left', '0')
-            ['font-weight'] = 'bold',
+        :css('right', '0')
-            ['text-align'] = 'center'
+        :css('padding', '20px')
-        })
+        :css('background', 'linear-gradient(transparent, rgba(0,0,0,0.7))')
+    content:tag('h3')
+        :css('color', 'white')
+        :css('margin', '0 0 8px 0')
          :wikitext(titre)
-     -- Description
+     content:tag('p')
-    card:tag('p')
+         :css('color', 'rgba(255,255,255,0.9)')
-         :css({
+        :css('margin', '0')
-            ['margin'] = '0',
-            ['color'] = 'rgba(255, 255, 255, 0.9)',
-            ['font-size'] = '0.9rem',
-            ['line-height'] = '1.4',
-            ['text-align'] = 'center'
-        })
          :wikitext(description)